HTML常用标签及属性

• 什么是HTML
• HTML基本语法
• 常用标签及属性
• 链接
• 文本标记
• 表格
• 列表
• 表单
• 结构标记

什么是HTML

Hyper Text Markup Language，超级文本标记语言
- 普通文本a:无特殊意义,超级文本:超链接
- 超文本：文本具备特殊的功能
- 标记：超文本的组成形式
- 语言：拥有自己的语法结构

用该语言编写的文件，以.html 或 .htm为后缀,用来设计网页
由浏览器解释运行，可以嵌入脚本语言编写的程序片段，如JS

HTML基础语法

1- 标记语法

标记以封闭类型划分：
（1）封闭类型标记.也称双标记，必须成对出现
    <标记>内容
（2）非封闭类型的标记,也叫做空标记/单标记
    <标记> 或 <标记/>

例如：
标签内容
其中：a为标签名，也叫元素；
      href，id为属性；
      双引号中的值为属性值

1-1 元素

指尖括号及尖括号间所包围的内容部分
元素可以包含文本内容和其他元素，也可以是空的
a.包含文本内容：
这是一段文本
b.元素嵌套：形成更为复杂的语法
            

                 

             
注意:（1）嵌套顺序；（2）代码缩进（保证代码可读性）
c.空标记

1-2 属性和值

属性是用来修饰元素的
<标记 属性="值" 属性="值">
 ex:


【常用的标准属性】
id： 定义元素在页面中的唯一标识
title：鼠标移入到元素上时提示的文本
class：样式相关，定义元素引用的类选择器
style：样式相关，定义元素的行内样式

1-3 注释

在源码中编写，但不会被浏览器所解释的内容，成为注释
可以将对代码的解释说明放在注释中
语法：

2- 文档结构

（1）文档类型声明
指定HTML的版本和风格
（2）HTML页面
表示HTML页面的开始与结束
语法：
位于之下

2-1 HTML页面

包含页面头部和页面主体两部分

页面头部：定义页面全局信息

紧跟在html之后，是html中的首个子元素

头部所包含的内容（子元素）
（1）网页标题：
（2）定义网页的编码格式,关键字，描述
    网页的编码格式：(utf-8:支持中英文、标点、符号)
    关键字：
    描述：
（3）定义或引用javascript：
（4）定义内部样式
（5）引入外部样式

页面主体：网页显示的主体内容

【属性】
text：表示文本颜色
bgcolor：表示网页的背景颜色

简单完整写法如下：

常用标签及属性

1- 链接

又称超链接，设置页面中允许被点击的内容。
【标签】
【属性】
href：链接地址（要跳转到的页面的地址）
target：目标，打开新网页的形式
取值：
     _blank：在新标签页中打开
     _self：在自身页面中打开（默认值）
title：鼠标放到链接上的提示

2- 文本标记

• 特殊字符

空格： 
<:  <
>:  ≷  
©:  ©
￥: ¥ 

• 文本样式

斜体：
粗体：
删除线：
下划线：
上标：
下标：

• 标题元素

以标题的形式来显示文本内容






【特点】
- 改变字号（一级最大，六级最小）
- 加粗显示
- 上下有垂直的空白距离
- 独立成行

• 段落元素

【标签】

【特点】
- 默认文字大小
- 独立成行
- 上下垂直空白

• 换行元素

【标签】

• 分隔线元素

【标签】

【属性】
        size：尺寸，取值单位为 px（像素），可以省略
        width：宽度，取值单位为px（像素）可以省略或百分比
        color：颜色，取值自然颜色值
        align：水平对齐方式，取值：left/center/right

• 分区元素

（1）块分区元素：

【特点】独立成行
【作用】页面布局
（2）行内分区元素：
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式

• 行内元素与块级元素

（1）块级元素（div 、p、h1~h6）
【特点】元素会独占一行，即元素前后都会自动换行，主要用于网页布局
（2）、行内元素（ span、i、b、s、u、sub、sup、img、a）
【特点】不会换行，多个元素会在一行内显示

3- 图像

• 路径

URL：Uniform Resource Locator（统一资源定位器，俗称：路径） 
作用：标识网络任何资源的位置

（1）绝对路径：从文件所在的最高级目录下开始查找资源文件所经过的路径
-包括网络资源&本地资源（如：E:\mmper\练习\img\flower.jpg）
（2）相对路径：从当前文件位置处开始，查找资源文件所经过的路径
- 同目录，直接用， 直接通过资源文件名称进行引用（a.jpg）
- 子目录，进入到子目录中，然后再对资源文件进行引用（img/a.jpg）
- 父目录，返回到父级目录再对资源文件进行引用（../a.jpg）

• 图像

【标签】
【属性】
        src：图片地址（绝对/相对）
        width：图像宽度
        height：图像高度

4- 表格

由元素定义。
【标签】
【属性】
        width ：设置表格的宽度
        height：设置表格的高度
        align：设置表格的对齐方式，取值: left/center/right
        border：设置表格边框宽度
        cellpadding：内边距（单元格边框与内容之间的距离）
        cellspacing：外边距（单元格之间的距离）
        bgcolor：设置表格的背景颜色

• table中包含的子元素

中包含的子元素：
【标签】 （创建表行）
【属性】
       align：该行内容水平对齐方式，取值: left/center/right
       valign：该行内容的垂直对齐方式，取值: top/middle/bottom
       bgcolor：设置表格的背景颜色

【标签】 （创建单元格）
【属性】
        align：内容水平对齐方式
        valign：内容垂直对齐方式
        width ：宽度
        height ：高度
【标签】 （表格标题）
【标签】 （列标题）
        行标题或列标题，字体有加粗的效果，放在tr中
【标签】 （表头）
【标签】 表主体）
【标签】 （表尾）

• 一个完整的表格

标题文本

   

    

      
姓名
       
性别
    
  
  

    

      
张三
      
男
    
    

      
李四
      
女
    
  

• 两行两列的表格

• 表格的其他应用

（1）不规则表格
- 跨列：从指定单元格位置处，横向向右合并几个（包含自己）单元格
  属性：colspan=值（数字，合并单元格的个数）;
- 跨行：从指定单元格位置处，纵向向下合并几个（包含自己）单元格
  属性：rowspan=值（数字，合并单元格的个数）;
（2）表格的嵌套
  在单元格中去嵌套另一个表格，但嵌套的表格必须要放在td中

5- 列表

将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起

• 有序列表

    


【属性】
        type:指定列表项标志的类型，默认为数字排列
        取值：1（默认值）/a/A/i/I
        start:定义起始值(数字)，默认从1开始
        取值：数字，如：start:1;  start:i;等 

• 无序列表

     


【属性】
        type：指定无序列表的列表项标识
        取值： disc,默认,实心圆/circle，空心圆/square，实心矩形none，不显示标识

• 自定义列表

  
列表中的标题内容
  
列表中的数据

使用场合：图文混排时使用

6- 表单

由
定义，将用户输入的数据提交给后台。
【常见属性】
        action：提交的服务器地址
        method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
        name：定义表单名称，JS用到的比较多
        id： 独一无二的标识
如： 

元素

【主要属性】
        type：根据不同的type属性值可以创建各种类型的输入字段
        value：最终提交给服务器的值
        name：控件的名称，提供给服务器使用，没有name，控件则无法提交
        id：唯一标识，只能在当前页面使用，服务器不能用
        disabled：禁用，不能被提交

• 常用的表单控件：

    
（1）文本框：
（2）密码框：
 【专有属性】
         maxlength：限制输入的字符数，取值：数字
         readonly：设置文本控件只读
（3）单选按钮：
（4）复选框：
【专有属性】
         checked，设置默认被选中
（5）提交按钮：
（6）重置按钮：
（7）普通按钮：
（8）图片按钮： 
（9）隐藏域：
（10）文件选择框：

按钮（提交按钮）

内容

下拉选择框select 和 option

7- 结构标记

HTML5所提供的结构标记，专门用于表示常见的网页结构（即制作布局），提升布局代码的语义性和可读性

• 常见结构标记

：定义文档的页眉即页面顶部信息
：定义页面的导航链接部分
：定义文档中的节，文档中主体内容
 ：定义独立于文档的其他部分内容(章、节等)
：定义某区域的脚注信息，页面底部内容等
：多用于侧边栏和相关引用信息等