一、html简单基础

什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

 

HTML 常用标签演示

本页演示的所有标签均为浏览器默认效果。

【基础】

<div> 定义文档中的节（块元素，无任何属性）

<span> 定义文档中的节（内联元素，无任何属性）

<h1> to <h6> 定义标题（通常使用粗体显示。注意：单个页面内最好只使用1个H1标签）

H1 标题

H2 标题

H3 标题

H4 标题

H5 标题
H6 标题

<p> 定义段落

<hr> 定义水平线（本页中的分割线均为 <hr> 标签）

<header> 定义 section 或页面的头部

<footer> 定义 section 或页面的尾部

<article> 定义文章

<section> 定义文档中的节

<aside> 定义文档内容相关的内容

<nav> 定义导航

header 头部footer 尾部article 内容section 内容aside 内容nav 内容

<details> 定义细节内容

<summary> 定义 details 的标题

HTML 5

【列表】

<ul> 定义无序列表（通常列表前会有项目符号）

  • <li> 定义列表的项目
  • 张三
  • 李四

<ol> 定义有序列表。（通常列表前会有数字符号）

  1. <li> 定义列表的项目
  2. 张三
  3. 李四

<dl> 定义定义列表

<dt> 定义定义列表中的项目
<dd> 定义定义列表中项目的描述
张三的家谱
张三的家谱于1900年开始统计，进行了..

【表格】

<table> 定义表格

<caption> 定义表格标题

<thead> 定义表格中的表头内容

<tfoot> 定义表格中的表注内容（脚注）

<tbody> 定义表格中的主体内容

<tr> 定义表格中的行

<th> 定义表格中的表头单元格（通常使用粗体显示）

<td> 定义表格中的单元

table 结构标准顺序如下：

<table>

  <caption></caption>

  <thead>

    <tr>

      <th></th>

    </tr>

  </thead>

  <tfoot>

    <tr>

      <td></td>

    </tr>

  </tfoot>

  <tbody>

    <tr>

      <td></td>

    </tr>

  </tbody>

</table>

※ 虽然 tfoot 放在了 tbody 之前，浏览器依然会将 tfoot 显示在 tbody 之后，而且这样做能让浏览器在获得所有表格内的数据前显示表注。

表格标题
表头 ID 表头 姓名 表头 日期
表注 这是编号 表注 这是假名 表注 这是添加日期
1 张三 2009-09-09
2 李四 2010-10-10
自带边框样式
表头 ID 表头 姓名 表头 日期
表注 这是编号 表注 这是假名 表注 这是添加日期
1 张三 2009-09-09
2 李四 2010-10-10

【表单】

<form> 定义表单

<fieldset> 定义围绕表单中元素的边框（通常四周会有缩进，并显示围绕的边框）

<legend> 定义 fieldset 元素的标题

标题

内容

<select> 定义选择列表（下拉列表、多选列表）

<optgroup> 定义选择列表中相关选项的组合

<option> 定义选择列表中的选项

张三
     
张三的儿子
     
张三的孙女
   
   
     
李四
     
李四的女儿
     
李四的孙子

滚动列表形式

张三
     
张三的儿子
     
张三的孙女
   
   
     
李四
     
李四的女儿
     
李四的孙子

多选列表

张三
     
张三的儿子
     
张三的孙女
   
   
     
李四
     
李四的女儿
     
李四的孙子

<input> 定义输入控件（如果浏览器不支持 HTML5 新的类型，那么会使用文本域替代）

文本域 type="text"

密码域 type="password"

复选框 type="checkbox" A B C

单选按钮 type="radio" 组A:① ②　　组B:Ⅰ Ⅱ

文件域 type="file"

图像域 type="image" （可用做提交按钮）

隐藏域 type="hidden" （当然是看不见的了）

普通按钮 type="button"

重置按钮 type="reset"

提交按钮 type="submit"

email 域 type="email" （若有输入内容，则会验证格式是否符合 email）

url 域 type="url" （若有输入内容，则会验证格式是否符合 url）

数值域 type="number" （若有设置最大值或最小值，则会验证数字是否在最大最小值之内）

数值范围域 type="range" （通过拖动滑块来选择数值）

日期域 type="date" （会调用浏览器自带的日期选择器，可设置的类型：date, month, week, time, datetime, datetime-local）

　　　 type="month"

　　　 type="week"

　　　 type="time"

　　　 type="datetime"

　　　 type="datetime-local"

色值域 type="color" （会调用浏览器自带的颜色选择器）

搜索域 type="search" （用于搜索，站内搜索或 Google 搜索等，在输入框内容右侧通常会出现清除按钮）

<datalist> 定义 input 元素的选项列表

<keygen> 定义生成秘钥

<output> 定义多行的文本输入控件

<label> 定义 input 元素的标注点击这里也可以选中

<textarea> 定义多行的文本输入控件

<button> 定义按钮（与 input 不同的是，button 内部可以放置更多的内容，比如文本或图像）

普通按钮 重置按钮 提交按钮

【格式】

<blockquote> 定义长的引用（通常四周会有缩进）

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

<pre> 定义预格式文本（通常会保留空格及换行符，并使用等宽字体显示，很适合用来表示计算机代码）

for(var i=0; i<9; i++){

    i++;

};

<address>定义文档作者或拥有者的联系信息（通常使用斜体显示）

联系小叉
前端开发工程师

<a> 定义链接、锚点

<em> 定义强调文本（通常使用斜体显示）

<strong> 定义更为强调的文本（通常使用粗体显示）

<mark> 定义带有标记的文本（通常会高亮显示）

<time> 定义时间（通常不会有任何视觉效果）

<del> 定义被删除文本（通常带有删除线）

<ins> 定义新插入文本（通常带有下划线）

2015年1月1日是星期五星期四

<i> 定义斜体文本

<b> 定义粗体文本

<big> 定义大号文本（通常使用比正文更大的字号显示）

<small> 定义小号文本（通常使用比正文更小的字号显示）

<sup> 定义上标文本、X2

<sub> 定义下标文本、H2O

<code> 定义计算机代码文本。This HTML Code.（通常使用等宽字体显示，但不会保留空格及换行符，需要保留空格及换行符，请使用<pre>）详细描述

<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。（通常使用斜体显示）详细描述

<q> 定义短的引用（通常会在两边加双引号）

<bdo> 定义文本的方向

后面的文字会从右到左来显示：你已经具备了倒读的能力

<abbr> 定义缩写

微软推出的浏览器是 IE 浏览器。（鼠标移到“IE”上看效果）

<progress> 定义进度条

<meter> 定义度计量

【图像】

<img> 定义图像

<map> 定义可点击区域

<area> 定义可点击区域的内部区域

图片左右两边的链接不一样：

<figure> 定义文档中的媒体内容（图片、图表、照片、代码等）

<figcaption> 定义 figure 元素的标题

小叉试验场

<canvas> 定义画布（此处不做演示）

【音频/视频】

<audio> 定义声音

<source> 定义媒体源

<audio> 定义视频

<video> 定义字幕

【其他】

<noscript> 定义针对不支持客户端脚本的用户的替代内容

当前您的浏览器支持JavaScript脚本

<noframes> 定义针对不支持框架的用户的替代内容

<ruby> 定义 ruby 注释

<rt> 定义 ruby 注释的解释

<rp> 定义若浏览器不支持 ruby 元素显示的内容

二、CSS选择器的概念

　　选择器是css 的灵魂,所谓的选择器就是能够在css 文件中识别 html 中指定的元素的语法,css 的选择器有很多种,基本的选择器有:元素选择器(直接使用元素的名称选择)、id 选择器 (在id 值前面加上#)、类选择器(在 class 的值前面加上dot)、子选器器、后代选择器、伪类选择器、属性选择器选择器的概念很重要,因为在 jQuery 中也会出现类似的原则器,所以你现在记住了,jQuery 的时候就会轻松一些。

总结:

1、元素选择器:直接使用元素名称

2、id 选择器:在 id 值得前面加上“#”

3、类选择器:在 class 的值之前加上“.”

4、后代选择器:选择的是指定元素的后代元素

5、子选择器:选择指定元素的子元素

6、伪类选择器:在其他原则器后面加上“:”+行为(hover)

html基础和CSS选择器的更多相关文章

  1. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  2. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  3. Scrapy基础(五) ------css选择器基础

    基本语法: *                  选择所有节点#container         选择id为container的节点.container      选择所有class包含contai ...

  4. Selenium系列（十二） - 自动化必备知识之CSS选择器的详细使用

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  5. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  6. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  7. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  8. css基础,css选择器

    07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...

  9. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

随机推荐

  1. .Net高并发解决思路（附源码）

    本文如有不对之处,欢迎各位拍砖扶正.另源码在文章最下面,大家下载过后先还原一下nuget包,需要改一下redis的配置,rabbitmq的配置以及Ef的连接字符串.另外使用的是CodeFirst,先u ...

  2. 用gogs轻松搭建个人的git服务器

    因为公司和家里电脑里面有些项目需做版本控制或者说共享吧,就想搭个自己的git服务器:原本想用gitlab,不过我服务器配置比较差,查了一下,看到gogs,眼前一亮: Gogs 的目标是打造一个最简单. ...

  3. PHP大法

    Topic Link http://ctf5.shiyanbar.com/DUTCTF/index.php Notes: 1) 进去发现 根据提示查看是否存在.txt文件,打开之后发现有东西 2)分析 ...

  4. 在centos7中python3的安装注意

    ---恢复内容开始--- 云主机的python是2.7有些不方便,故要更换3,看到官网有3.6的包,就下载了. wget https://www.python.org/ftp/python/3.6.3 ...

  5. Java开发知识之Java的集成开发环境

    Java开发知识之Java的集成开发环境 一丶Eclipse 开发环境 Eclipse是IBM公司花了4000万美金开发的一个集成开发环境.是一个免费开源的. 下载官网: http://www.ecl ...

  6. 手把手教您将 libreoffice 移植到函数计算平台

    LibreOffice 是由文档基金会开发的自由及开放源代码的办公室套件.LibreOffice 套件包含文字处理器.电子表格.演示文稿程序.矢量图形编辑器和图表工具.数据库管理程序及创建和编辑数学公 ...

  7. 深度学习框架Keras介绍及实战

    Keras 是一个用 Python 编写的高级神经网络 API,它能够以 TensorFlow, CNTK, 或者 Theano 作为后端运行.Keras 的开发重点是支持快速的实验.能够以最小的时延 ...

  8. Java开发笔记（二十九）大整数BigInteger

    早期的编程语言为了节约计算机的内存,给数字变量定义了各种存储规格的数值类型,比如字节型byte只占用一个字节大小,短整型short占用两个字节大小,整型int占用四个字节大小,长整型long占用八个字 ...

  9. Java学习笔记之——IO

    一． IO IO读写 流分类: 按照方向:输入流(读),输出流(写) 按照数据单位:字节流(传输时以字节为单位),字符流(传输时以字符为单位) 按照功能:节点流,过滤流 四个抽象类: InputStr ...

  10. 2013年第四届蓝桥杯javaB组 试题 答案 解析

    1.世纪末的星期 曾有邪教称1999年12月31日是世界末日.当然该谣言已经不攻自破. 还有人称今后的某个世纪末的12月31日,如果是星期一则会.... 有趣的是,任何一个世纪末的年份的12月31日都 ...