文本属性

• color：
  1. 英文单词：red,green,blue
  2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
  3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
• width：
  1. 数值：width='20' ,数值的单位，默认是 px(像素)
  2. 数值%：占比相对于父元素的比例

特殊符号(需要什么符号去百度查)

• 空格键的空格：无论多少个，只显示一个
• 空格： 
• 大于符号(greater than)：>
• 小于符号(less than)：<
• 版权符号?：©

3、图片标签

：展示图片

属性：

• src(必填)：图片地址，可以填相对地址（推荐）和绝对地址，../ 代表上一级目录。
• alt(必填 )：图片加载失败会返回的内容（图片地址/图片名不对等原因）
• title：鼠标悬停显示的文字
• width : 图片规格pixel 像素
• height : ...
• ...

4、列表标签

• 有序列表（unordered list）

  可以通过type属性指定序号的样式，start属性指定序号从哪个数字开始

  
    
  Java
    
  Python
    
  C
    
  C++
  
  
  
  
  
    
  Java
    
  Python
    
  C
    
  C++
  
  
  
  

• 无序列表（order list）

  可以通过type属性指定序号的样式

  
    
  Java
    
  Python
    
  C
    
  C++
  
  
  
  

• 自定义列表（definition list）

  
    
  机器语言
    
  Java
    
  Python
    
  C
    
  C++
    
  Go
  
  
  
  

5、链接标签

  







这里是顶部

       ...

回到顶部


跳转到图像标签页的底部






  

点击跳转到百度

这里是顶部

       ...

回到顶部


跳转到图像标签页的底部

点击联系我




  

6、页面结构标签

html5中为了提高程序的可读性，提供了一些标签。

• : 标题头部区域的内容（用于页面或页面中的一块区域）
• : 标记脚部区域的内容（用于整个页面或页面的一块区域）
• : Web页面中的一块独立的区域
• : 独立的文章内容
• : 相关内容或应用（常用于侧边栏）
• : 导航类辅助内容

7、表格标签table

• table：定义表格
  • width：宽度
  • border：边框
  • cellpadding：定义内容和单元格的距离
  • cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
  • bgcolor：背景色
  • align：对齐方式
• tr：定义行
  • bgcolor：背景色
  • align：对齐方式
• td：定义单元格
  • colspan：合并列
  • rowspan：合并行
• th：定义表头单元格
• ：表格标题
• ：表示表格的头部分
• ：表示表格的体部分
• ：表示表格的脚部分

  

    
    
 1-1 



  
  

    
    
 2-1 
    
 2-2 
    
 2-3 
    
 2-4 
  
  

    
 3-2 
    
 3-3 
    
 3-4 
  

8、

和

• :每一个div占满一整行。块级标签
• ：文本信息在一行展示，行内标签 内联标签

9、视频和音频

10、内联框架iframe

点击跳转到B站

2、表单form(内容多)

用于采集用户输入的数据的。用于和服务器进行交互。

1、表单属性

• action：指定提交数据的URL，#为当前页面

• method：指定提交方式(必填)，一共7种，2种比较常用

  • get：
    1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
    2. 请求参数大小是有限制的。
    3. 不太安全，但是快速
  • post:
    1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
    2. 请求参数的大小没有限制。
    3. 较为安全，可以传输大文件
  • 如何查看post提交的表单信息？ 检查页面元素 -> 网络 -> 提交之后会有个表单文件，点开 -> Payload

注意：表单项中的数据要想被提交，必须指定其name属性。

2、表单项标签

1、

可以通过type属性值，改变元素展示的样式

• type: 指定元素的类型，默认为text

  • text：文本输入框，默认值

    • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

  • password：密码输入框

  • radio:单选框

    1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked属性，可以指定默认值

  • checkbox：复选框

    1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    2. checked属性，可以指定默认值

  • file：文件选择框

  • hidden：隐藏域，用于提交一些信息。

  • 按钮：

    1. submit：提交按钮。可以提交表单
    2. button：普通按钮
    3. image：图片提交按钮

• cols：指定列数，每一行有多少个字符

• rows：默认多少行。

• name: 指定表单元素的名称，表单项中的数据要想被提交，必须指定其name属性 必填

• value: 元素的初始值。type 为 radio(单选框) 时必须指定一个值

• size: 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

• maxlength: type为text或password时，输入的最大字符数

• checked：type为radio或checkbox时，指定按钮是否是被选中

• readonly: 只读

• disable: 禁用

• hidden: 隐藏（可以用来提交一些默认值）

2、

指定输入项的文字描述信息

• label的for属性一般会和 input 的 id属性值 对应。
• 如果对应了，则鼠标移至label区域，会让input输入框获取焦点，点击label也相当于点击input

3、

下拉列表

• 子元素：option，指定列表项

• selected: 默认下拉框的选项

4、

文本域

• cols：指定列数，每一行有多少个字符
• rows：默认多少行。

3、表单中元素值的初级验证

• placeholder：提示信息
• required：非空验证
• pattern: 正则表达式

4、代码举例

  
  
名字： 
  
密码： 

  
  
性别：
    男
    女
  

  
  
爱好：
    敲代码
    唱歌
    游戏
    聊天
    睡觉
  

  
  
按钮：
    

  
    
  


  
国家（下拉框）：
    
      中国
      美国
      瑞士
      英国
      巴基斯坦
    
  


  
反馈：
    文本内容
  


  
提交文件：
    
  


  
邮箱：
    
  
  
自定义邮箱：
    
  



  
网址：
    
  


  
商品数量：
    
  


  
音量：
    
  


  
搜索：
    
  


  你点我试试
  
  

    
    
  



注册post提交

  
  
名字： 
  
密码：