01-HTML基础-标签

基础标签

---

a标签

---

什么是a标签?

• a标签的作用:就是同于控制页面与页面之间跳转的
• a标签的格式:

需要展现给用户查看的内容

• a标签中的target属性:这个属性的作用就是专门用于控制如何跳转
  - _self:用于在当前选项卡跳转,也就是不新建界面跳转,默认就是_self
  - _blank:用于在新的选项卡中跳转,也就是新建页面跳转.
• a标签的title属性:这个属性和在img的title属性一样,都是用来控制鼠标悬停时显示的提示文本的.
• 注意点:
  • a标签不仅可以让文字可以点击,图片也可以点击
  • 一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方
  • 如果通过a标签的href属性指定给一个URL地址,那么必须在地址前面加上http:// 或者https://
  • a标签的href属性除了可以指定一个网络地址以外,还可以指定一个本地地址

base标签

---

• 格式:

• 作用:base标签就是专门用来指定当前网页中所有的超链接(a标签)需要如何打开.
• 注意点:
  • base标签必须写在head标签的开始标签和结束标签之间.
  • 如果既在a标签中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行.

假链接

---

• 格式:

  • javascript:
• 两者之间的区别:
  • .#的假链接会自动回到网页的顶部,而javascript:不会自动回到网页顶部.

锚点

---

1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如何给HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

• 格式:

跳转到中部
我是中部

• 注意点:
  • 1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
  • 2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
    • 格式:

跳转到锚点测试界面
我是锚点测试界面33333

列表标签

---

定义列表

---

• 定义列表的作用:
  • 给一堆数据添加列表语义
  • 先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
• 定义列表的格式:

其实dt和dd都是英文的缩写
dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的

• 定义列表的应用场景
  • 做网站尾部的相关信息
  • 做图文混排
• 定义列表的注意点
  • 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
  • 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
  • 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.推荐使用一个dt对应一个dd
  • 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

表格标签

---

什么是表格标签?

• 作用:用来给一堆数据添加表格语义,其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式.
• 格式:

需要显示的内容

 - table标签:其实表格标签中的table代表整个表格,也就是一堆table标签就是一个表格.
 - tr标签:其实标高 标签中的tr标签代表整个表格中的一行数据,也就是说一对tr标签就是表格中的一行.
 - td标签:其实表格标签中的td标签代表表格中一行中的一个单元格,也就是说一对td标签就是一行中的一个单元格.
- 注意点:
 - 表格标签中有一个边框属性,这个属性决定了边框的宽度,默认情况下这个属性的值是0,所以看不到边框.
 - 表格标签和列表标签一样,它是一个组合标签,所以table/tr/td要么一起出现,要么一起不出现,不会单个出现.

## 表格标签的属性
- 宽度和高度的属性:可以给table标签和td标签使用
 - 表格的宽度和高度默认是按照内容的尺寸来调整的,也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
 - 如果给td标签设置width/height属性,会修改当前单元格的宽度和高度,不会影响整个表格的宽度和高度.
- 水平对齐和垂直对齐的属性:其中水平对齐可以给table标签和tr标签和td标签使用;垂直对齐只能给tr标签和td标签使用.
 - 给table标签设置align属性, 可以控制表格在水平方向的对齐方式
 - 给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
 - 给td标签设置align属性, 可以控制当前单元格中内容在水平方向的对齐方式
    - 注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
 - 给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
 - 给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式
    - 注意点:  如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐.
- 外边距和内边距的属性,只能给table标签使用.
 - 外边距就是单元格和单元格之间的距离,我们称之为外边距.默认情况下单元格和单元格之间的外边距的距离是2px.
    - 格式
```html
cellspacing="12px"

• 内边距就是单元格的边框和文字之间的间隙,我们称之为内边距.默认情况下,内边距是1.
  • 格式

cellpadding="1"

• 注意:以上内容仅仅作为了解,以后再企业开发中所有控制样式的都是通过CSS.

细线表格

• 在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的,其实它是将2条线合并为了一条线,所以看上去很不舒服.
• 细线表格的制作方式:
  • 给table标签设置bgcolor
  • 给tr标签设置bgcolor
  • 给table标签设置cellspacing = "1px"'
• 注意点:table标签和tr标签以及td标签都支持bgcolor属性,但是以上内容仅仅作为了解,因为样式都是以后通过CSS来控制.
• 格式:

    

        
1.1
        
1.2
    
    

        
2.1
        
2.2
    

表格标签的其它标签

• 表格标签
  • 在表格标签中提供了一个标签专门用来设置表格的标题,这个标签就叫做caption.只要将标题写在caption标签中,那么标题就会自动相对于表格的宽度居中.
• caption标签的注意点:
  • caption一定要写在table标签中,否则无效.
  • caption一定要紧跟在table标签后面.
• 标题单元格标签
  • 在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做th标签,只要将当前列的标签存储在这个标签中就会自动居中+加粗文字
  • 到此为止我们就发现,其实表格中有两种单元格,一种是td,一种是th.td是专门用来存储数据的,th是专门用来存储当前列的标题的.
• 例子:

    

        
今日小说排行榜
    
    

        
排名
        
关键词
        
趋势
        
今日搜索
        
最近七日
        
相关链接
    
    

        
1
        
暴走大事件
        

            
        
        
623557
        
4088311
        

            贴吧
            图片
            百科
        
    
  

表格的结构

• 由于表格中存储的数据比较复杂,为了方便管理和阅读以及提升语义,我们可以对表格红存储的数据进行分类.
  表格中的数据可以分为4类:
  • 表格的标题
  • 表格的表头信息
  • 表格的主体信息
  • 表格的页尾信息
• 表格的完整结构
  • 例子:

    
表格的标题
    

        

            
每一列的标题
        
    
    

        

            
数据
        
    
    

        

            
数据
        
    

• caption作用:指定表格的标题
• thead作用: 指定表格的表头信息
• tbody作用: 指定表格的主体信息
• tfoot作用: 指定表格的附加信息
• 注意点:
  • 如果我们没有编写tbody, 系统会自动给我们添加tbody
  • 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

单元格合并

• 水平方向上的单元格合并:
  可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
  • 例如:

• 含义: 把当前单元格当做两个单元格来看待
• 垂直方向上的单元格合并:
  可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
  • 例如:

• 含义: 把当前单元格当做两个单元格来看待
• 注意点:
  • 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
  • 一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并

快捷键的使用:

• 快速移动选中的代码, 上下移动
  往上移动 Ctrl + shift + ↑(方向键上)
  往下移动 Ctrl + shift + ↓(方向键下)
• 快速合并和展开代码(合并和展开的是某一个标签)
  合并: Ctrl + -
  展开: Ctrl + +
• 快速合并和展开代码(合并和展开选中的所有标签)
  合并: Ctrl + shift + -
  展开: Ctrl + shift + +
• 快速新启一行
  shift + enter

表单标签

---

表单标签

• 什么是表单?
  • 表单就是专门用来收集用户信息的
• 什么是表单元素?
  • 什么是元素? 在HTML中,标签/标记/元素都是指HTML中的标签,例如:a标签/a标记/a元素
  • 表单元素其实还是HTML中的一些标签,只不过这些标签比较特殊,在浏览器中所有的表单标签都有特殊的外观和默认的功能.
• 表单的格式:

<表单元素>

```

• 常见的表单元素:
  • input标签:input标签有一个type属性,这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观不同.
• 注意点:
  • 表单元素一定要写在表单中.
• remember:

    
    账号:

    
    密码:

    
    账号:

    密码:


    
    性别:
    男
    女
    保密


    
    爱好:
    篮球
    足球
    棒球
    足浴

• 定义普通按钮:可以通过value属性来给按钮指定标题
  • 作用:配合JS完成一些操作

```

• 定义图片按钮:
  • 作用:配合JS完成一些操作

```

• 定义重置按钮:
  • 作用:用来清空表单中已经填写好的数据
  • 注意点:如果想修改重置按钮默认的按钮标题可以通过value属性来修改.

```

• 定义提交按钮:
  • 作用:将表单中已经填写好的数据提交到远程服务器.
  • 注意点:要想把表单中填写好的数据提交到远程服务器,必须具备两个条件
    • 需要给form表单添加一个action的属性,通过这个action属性指定需要提交到的服务器地址
    • 需要给需要提交到服务器的表单元素添加一个name属性

```

• 隐藏域
  • 作用:配合提交按钮将一些数据默默的提交到服务器 Ajax

```

Label标签

• 默认情况下文字和输入框是没有关联关系的,也就是点击文字输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么就需要让蚊子和输入框进行绑定.
• 要想让输入框和文字绑定在一起,那么我们可以使用Label标签.
• 绑定的格式:
  • 将文字利用label标签包裹起来
  • 给输入框添加一个id属性
  • 在label标签中通过for属性和输入框中的id进行绑定即可.
• 例子1:

    账号:

    密码:

• 例子2:

        账号:

Datalist标签

• 例子:

请输入你的车型: 

表单标签select以及textarea

• select标签
  • 作用:用来定义下来列表
  • 格式:

    
        列表数据
    

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

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

• textarea标签
  • 作用:定义一个多行输入框
  • 格式:

• 注意点:
  • 默认情况下输入框可以无限换行
  • 默认情况下输入框有自己的高度和宽度
  • 可以通过cols和rows来指定输入框的宽度和高,但是虽然指定了列数和行数,但是还是可以无限往下输入.
  • 默认情况下输入框是可以手动拉伸的
• 例子:

• fieldset标签:可以给表单添加一个边框
• legend标签:可以给边框指定给一个标题.
  • 例子:

          

                 
注册界面