2021-01-16

HTML标签

1. 概念

Hyper Text Markup Language，超文本标记语言
超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：由标签构成的语言。<标签名称>

2. 语法

html文档后缀名：html或htm
标签分为

围堵标签：由开始标签和结束标签。如< html> < /html>

自闭和标签：开始标签和结束标签在一起。如< br/>
标签可以嵌套
在开始标签中可以定义属性。属性由键值对构成，值需要用引号引起来
不区分大小写

3. 标签

3.1文件标签

html：标识html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签
body：体标签
< !DOCTYPE html>

3.2 文本标签

注释：
<h1> </h1> to <h6> </h6> ：标题标签，字号从h1到h6变小，且自动换行
<p> </p> ：段落标签
<br> ：换行标签
<hr>：显示一条水平线。参数：color(颜色)，width(线条宽度) size(线条高度) align(对齐方式)
<b> </b> ：字体加粗
<i> </i>：字体斜体
<center> </center> :文本居中
<font> </font> ：字体标签
属性定义
- color
  1. 英文单词：red、green
  2. rgb(值1，值2，值3)：值的范围0~255，如rgb(0,0,255)
  3. #值1值2值3：值的范围：00~FF之间。如 #FF00FF
- width
  1. 数值：width=”20”，单位默认是像素px
  2. 数值%：占比，相对与父元素的比例

3.3 图片标签

img：展示图片
- 属性
  
  src：指定图片的位置
  
  alt：当图片加载不出来时所显示的文字
src路径
- 绝对路径
- 相对路径
  
  ./ ：代表当前目录
  
  ../ ：代表上一级目录

3.4 列表标签

有序列表
- ol ：定义一个有序列表
- li ：有序列表项
无序列表
- ul ：定义一个无序列表
- li ：无序列表项

3.5 链接标签

a ：定义一个超链接
- href：指定访问资源的URL
- target：指定打开资源的方式
  
  _self：默认值，在当前页面打开
  
  _blank：在空白页面打开

1
2
3

<a href="https://hxx-98.github.io/"  target="_blank">hxx</a>
<a href="https://hxx-98.github.io/"  target="_self">hxx</a>
<a href="https://hxx-98.github.io/"> <img src="示意图.PNG"> </a>

3.6 div和span

span：文本信息在一行展示，行内标签/内联标签
div：每一个div占满一行，块级标签
- id

3.7 语义化标签

提高程序可读性

header
footer

3.7 表格标签

table：表

width、border(边框)、bgcolor(背景色)、align

cellpadding：定义内容和单元格之间的距离

cellspacing：定义单元格之间的距离，若指定为0，则单元格的线会合为一条
tr：行
- bgcolor(背景色)
- align
td：单元格
- bgcolor(背景色)
- align
- colspan：合并列
- rowspan：合并行
th：表头单元格
caption：表格标题
thead：表示表格的头部分
tbody：表示表格的体部分
tfoot：表示表格的脚部分

3.8 表单标签

表单：用于采集用户输入数据。用于和服务器进行交互。
标签：form

action：指定提交数据的URL

method：指定提交方式
- get
  1. 请求参数会在地址栏中显示，会封装在请求体中
  2. 请求参数长度有限制
  3. 不太安全
- post
  1. 请求参数不会在地址栏中显示，会封装在请求体中
  2. 请求参数长度没有限制
表单项中的数据要想被提交，必须指定其name属性
表单项标签

input：可以通过type属性值，改变元素展示的样式
- label：指定输入项的文字描述信息。其for属性和input中的id属性对应，若对应，则点击label区域会在input输入框获取焦点
- type
  - text：文本输入框
    
    placeholder：指定输入框的提示信息
  - password：密码输入框
  - radio：单选框
    
    注意
    1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked=”checked”：代表默认被选中
  - checkbox：复选框
  - file：文件选择框
  - hidden：隐藏域
  - 按钮
    1. submit：提交
    2. button：按钮
    3. image：图片提交按钮，src属性指定图片的路径
  - color：取色器
  - date：日期，年月日
  - datetime-local：年月日时分
- select：下拉列表
  - 子元素option指定列表项，其中可加入selected表示默认选择
- textarea：文本域
  - cols：指定列数，每一行由多少个字符
  - rows：默认行数

<form action="#" method="get">
    <label for="username">用户名</label>
    <input id="username" type="text" name="username"placeholder="请输入用户名"><br>
    <!--for和id对应起来-->
    <label for="password">密码</label>
    <input id="password" type="password"name="password"placeholder="请输入密码"><br>
    <!--name值要一样-->
    性别<input id="male"type="radio" name="gender"value="male"checked="checked"> <label for="male">男</label>
       <input id="female"type="radio" name="gender"value="female"> <label for="female">女</label><br>
    爱好
    <input id="shopping"type="checkbox"name="hobby" value="shopping"> <label for="shopping">逛街</label>
    <input id="sing"type="checkbox"name="hobby"value="sing"> <label for="sing">唱歌</label><br>
    图片<input type="file"name="file"><br>
    隐藏域 <input type="hidden"name="id"value="aaaa"><br>
    取色器<input type="color"><br>
    生日<input type="date"><br>
    生日<input type="datetime-local"><br>
    邮箱<input type="email"name="email"><br>
    年龄<input type="number"name="age"><br>
    省份
    <select name="province">
        <option value="null"selected>请选择</option>
        <option value="陕西">陕西</option>
        <option value="山西">山西</option>
        <option value="北京">北京</option>
    </select><br>
    自我描述<textarea name="describe" id="des" cols="30" rows="10"></textarea><br>
    <!--input type="image"src="移动运营商网间信令互通示意图.PNG"-->
    <input type="submit" value="登录">
</form>