第二章 HTML标签

H标签 (Header)

• 作用

专门用来给文本添加标题语义。而不是用来修改文本样式的。

• 格式

    
H1标签
    
H2标签
    
H3标签
    
H4标签
    
H5标签
    
H6标签
    没有H7
    可以看出H标签都是独占一行的！

• 效果

  
  

P标签 (Paragraph)

• 作用

告诉浏览器那些文字是一个段落。

• 格式

   
我是一段文本1
   
我是一段文本2
    我是一段普通文本3
    我是一段普通文本4

• 效果

  
  
• 注意点

可以看出，p标签包含的文本是独占一行的。

Hr标签(Horizontal Rule)

• 作用

显示一条分割线。

• 格式

• 注意点

在浏览器中单独占一行

注释

img标签

• 作用

向网页中添加相关图片。。

• 格式

• 注意

img标签不会独占一行。
alt属性的含义：当需要的图片找不到，就替换成alt属性里边的文字。

• 路径问题

br标签

• 换行标签。
• 格式

• 注意点

1. 使用多少个br标签，就换多少行。
2. 由于HTML的作用是来给文本添加语义的，而br标签的语义是不另起一个段落换行，而在企业开发中需要换行都是因为要另起一个段落，因此在企业开发中很少使用br标签。例如使用p标签包裹内容换行。

假链接

• 作用

点击之后不会跳转的链接

• 格式

xxxx   //点击之后会回到顶部
xxx  //点击之后不会回到顶部

锚点

• 作用

跳转到当前页面的制定位置，也可以跳转到指定页面的指定位置。

//跳转到当前页面指定位置
我是顶部
跳转到中部
    

    

    

我是中部

//跳转到指定页面的指定位置
我是页面1
跳转到中部
...
...

---

---

列表标签

• 作用

给一堆数据添加列表语义，也就是告诉浏览器这一堆数据是一个整体。

• HTML列表标签的分类
  • 无序列表(unordered list)
  • 有序列表(ordered list)
  • 定义列表(defination list)

无序列表

没有先后之分的一堆数据。

• 格式

    
中国有哪些城市
    

        
西安
        
北京
        
上海
    

有序列表

    
音乐排行榜
    

        
演员
        
女人不应该让男人太累
        
男人不应该让女人流泪
    

定义列表

    
定义列表的标题(difination title)
    
定义列表的描述(difination description)

    
北京
    
中国的首都
    
西安
    
爱吃肉夹馍


     dl>dt+dd  //快捷输入法

---

---

表格标签

作用

用来给一堆数据添加表格语义。表格是一种数据的表现形式。当数据量比较大的时候，表格被认为是最清晰的表现形式。

格式

   

       
表格的标题
       
表格的列标题
       

           

       
   

说明

1. 一对table标签就代表一个表格。
2. 一对tr标签代表表格中的一行。
3. 一对td标签代表表格中一行中的一个单元格。

• 注意点

表格标签有一个边框属性（border），这个属性决定了边框的宽度，默认情况下该属性值为0，所以看不到边框。在以前表格的使用非常多，但是现在基本被div+css给替代了。

表格标签的属性

以下内容为了解，因为样式要用css来控制：

1. 宽度和高度
   可以给table和td标签使用。修改td标签的width和height值，只会修改当前单元格的宽度和高度，不会修改整个表格的宽高。
2. 水平对齐和垂直对齐（align和valign）
   水平对齐可以给table/tr/td标签使用。垂直对齐只能给tr和td标签使用。
3. 外边距和内边距
   只能给table标签使用。
   外边距（cellspacing）：单元格和单元格之间的距离。
   内边距 (cellpadding)：单元格的边框和框内文字之间的间隙（最近的距离）。

• 细线表格（了解）
  

  起初是这样的。
  
  把外边距调整为0，不能解决问题，仅仅是将两个边框合并在一起了。
  

可以通过bgcolor属性，解决该问题

 

        

            
1.1
            
1.2
        
        

            
2.1
            
2.2
  
        
    

效果

单元格合并

1. 水平方向上的单元格合并

可以给td标签添加一个colspan属性，来指定把某一个单元格当作多个单元格来看待。
例如:
单元格
其含义就是把当前单元格当作两个单元格来看待。（注意：多出的单元格要删除之后才能正常显示）

2. 垂直方向上的单元格合并

可以给td标签添加一个rowspan属性。来指定把某一个单元格当作多个单元格来看待。(垂直方向)
单元格 ，删除多余的单元格，其他与水平方向同理。

表单标签

什么是表单？

表单就是专门用来收集用户信息的。

什么是表单元素？

在HTML中 标签/标记/元素都是指HTML中的标签。比如, 可以叫a标签/a元素/a标记。
表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。

表单的格式

    <表单元素>

常见的表单标签

• input标签

  input标签的type属性有很多取值，取值的不同就决定了input标签的功能和外观不同。
  注意：表单元素必须写在form表单中。

    
    账号:

    
    密码:

    
    账号:

    密码:

 
    
    性别:
    男
    女
    保密


    
    爱好:
    篮球
    足球
    棒球
    足浴

    
    账号:

    
    密码:


    
    
    
    
    
    
    
    
    
    
    

label标签的使用

• 1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

• 2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

• 3.绑定的格式:
  3.1 将文字利用label标签包裹起来
  3.2 给输入框添加一个id属性
  3.3 在label标签中通过for属性和输入框中的id进行绑定即可
  账号:

   账号:

   密码:



   
       账号:
   



   账号:

   密码:

datalist标签(了解，很多浏览器不支持)

• 1. datalist标签

作用 : 给输入框绑定待选项

• 2. datalist格式:

• 3. 如何给输入框绑定待选列表

1. 搞一个输入框
2. 搞一个datalist列表
3. 给datalist列表标签添加一个id
4. 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

select标签

用于定义下拉列表

• 格式

    
        列表数据
    

注意点:

1. 下拉列表不能输入内容, 但是可以直接在列表中选择内容
2. 可以通过给option标签添加一个selected属性来指定列表的默认值
3. 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

    
        朝阳区
        昌平区
        通州区
    
    
        天河区
        越秀区
        黄浦区
    

textarea标签

定义一个多行输入框

• 格式

注意点:

1. 默认情况下输入框可以无限换行。

2. 默认情况下输入框有自己的宽度和高度。

3. 可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入。

4. 默认情况下输入框是可以手动拉伸的。

marquee 跑马灯标签

什么是marquee标签?

作用: 跑马灯效果

格式:
内容

属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好。

随便写点内容
随便写点内容
随便写点内容
随便写点内容


随便写点内容
随便写点内容


随便写点内容


随便写点内容
随便写点内容


    

字符实体

在HTML中对空格/回车/tab键不敏感，会把多个空格/回车/tab当作一个空格来处理。

 
          代表一个空格 
        < 代表一个小于号 <
        > 代表一个大于号 >                    
        © ban'quan
       注意：分号不要忘。

  
我   爱你