Web安全学习_前端_HTML

一、body标签的属性

background属性，给背景设置图片（默认在水平和垂直方向平铺） bgcolor属性，给背景设置颜色

二、文本修饰标签
加粗<b>内容</b> Bold
斜体<i>内容</i> Italic
下划线<u>内容</u> Underline
删除线<s>内容</s> Strikethrough
下标 字<sub>下标</sub> Subscript
上标 字<sup>上标</sup> Superscript

 <font></font>

size属性：1-7
color属性：设置颜色
face属性：设置字体，如：楷体

三、排版标签
段落标签

段落内容

align：控制段落内容的水平位置
值：left（默认） center right
标题标签

~

1-6<->大-小
align：控制标题内容的水平位置
值：left center（默认） right
换行标签

水平线标签

---

color：水平线的颜色
width：水平线的宽度
值：固定数值或百分比（均以父标签为参照物）
size：设置水平线的粗细
noshade：去除水平线的阴影，属性值等于其自身
align：left center（默认） right
预格式化标签

在此标签内的空格和换行会保留

四、div与span

：无实际含义，块级元素，可以设置宽、高，如未设置宽度则为父元素100% ：无意义，行内元素，不能设置宽、高，以文字大小为准

块级元素：div、h1~h6、p等
行内元素：b、i等

五、字符实体
有些符号会让html误认为是标签如>、<等所以需要使用字符实体

六、图片标签
html可以显示的图片格式：jpg（jpeg）、png、gif、bmp
不可以显示的格式：psd、ai
语法：
alt属性：当图片不存在则显示alt中的文字
title属性：当鼠标放在图片上显示的文字

七、相对路径与绝对路径
相对路径：相对某一文件夹而言
平级关系：可以理解为在同一文件夹下，src输入./文件名 ./可省略
上级关系：可以理解为图片与html所在文件夹为平级关系， src输入…/文件名

绝对路径：即文件所在磁盘中的位置

八、超链接
点击跳转的文字
a -->anchor 锚
href -->hypertext reference 超级链接地址

属性：
title：鼠标悬浮文字上显示的信息
target：_blank -->在新窗口打开链接

实现空链接的方式：href="#"
href=“javascript:void(0)”

锚点链接：
①定义锚点：

②找到锚点：

九、无序列表、有序列表、定义列表
无序列表：无先后顺序之分

• 表项
• 表项
• ......

ui -->unordered list li -->list item

• 必须包含在
  中
• 中可以放任何内容，如图片超链接等

  无序列表前默认为实心圆圈 可在ul或li中添加属性type
  列表可以嵌套

  有序列表：有顺序之分

  1. 表项
  2. 表项
  3. ......
  ol -->ordered list

  type属性可设置数字的方式
  start属性可设置从哪里开始

  定义列表：是一个组标签，出现三对标签
  dl -->definition list
  dt -->definition title
  dd -->definition description

  ......

  ...... ......

  十、表格标签

  ...... 表示行 表示列、单元格，内容放在此标签内 中的内容会加粗居中显示

  属性：
  border：边框
  width：宽度 值可为固定值或百分比
  height：高度 一般不用高度由其内容决定
  background：设置背景图片
  bgcolor：背景颜色
  align：设置表格水平方向的对其，取值：left（默认）、center、right
  cellpadding：表格中文字距离边框的距离
  cellspacing：两个单元格间的距离
  valign：设置文字垂直的对其方式， 取值：top、middle（默认）、bottom

  合并单元格
  colspan：跨列合并
  rowspan：跨行合并

  十、框架

  十一、表单
  由和表单控件组成

  属性： action：将表单中收集的用户的数据提交给表单处理程序进行相关处理（一般为php文件） 可以省略此属性，默认将表单数据提交给当前页面进行处理。在本页面地址栏显示 method：get和post，缺省为get get提交的数据会显示在地址栏中，只能提交少量的数据 post提交的数据会直接发送给表单的处理程序，不会显示在地址栏中，提交相对安 全可提交大量数据 name是控件的名称，而value是控件的值 type值： text：单行文本框 password：密码 radio：单选框， 一组单选按钮只有其name属性值设置为一样才可以实现真正的单选，单选中的checked属性，表示默认被选中 checkbox：多选框，checked属性表示默认选择 submit：提交按钮，默认的value值为提交 reset：重置按钮 image：图片按钮，src="图片路径"，图片按钮默认具有提交的功能 file：上传文件 button：普通按钮，需要配合JavaScript使用 hidden：隐藏域，在浏览器页面看不到，但数据可以被提交给后台处理程序

  
  按钮名称
  按钮名称
  按钮名称

  选项1 选项2 ...... 多选框，属性selected="selected"表示默认选中

  十二、head内的标签

  ：显示网页的标题 ： 属性： charset：编码标准，可以选择UTF-8等编码标准，使用正确的标准以防止网页乱码 使用记事本编辑即使不写明编码标准也不会出现乱码，因为记事本默认 GBK中文编码 而使用sublime编辑器时候，其默认编码为UTF-8，则会出现乱码

  所以使用编辑器进行编辑时，需要表明使用什么编码标准

  十三、颜色的表示方式
  英文单词表示：如red、yellow等
  十进制：rgb（255.0.0）–>红、rgb（0.255.0）–>绿、rgb（0.0.255）–>蓝等
  十六进制：#FF0000 使用十六进制兼容性更好

  以上颜色可在中添加color属性表示

  HTML4 =====> XHTML =====> HTML5

  十四、HTML5新增的语义化标签

  头标签

  导航标签

  侧边栏标签

  文章标签

  页脚标签

  栏目标签 上述标签与div类似，只是增加了语义化

  十五、H5新增的属性
  required：在表单控件中添加required=“required”，则此控件为必填项
  placeholder：在表单空间中添加placeholder=“内容”，则该文本框内会默认显示内容，当填
  入信息后，内容消失。
  autofocus：光标自动定位到框内。autofocus=“autofocus”

  新增的type属性值：
  email：要求用户必须输入的是电子邮件

  url：限定用户输入的内容必须网站要包含http://

  date：要求用户选择年月日日期
  week：要求用户选择周类型
  time：要求用户选择时间（小时、分钟）
  month：要求用户选择月份
  number：要求用户输入的必须时数值类型
  color：颜色拾取器
  range：范围

  多媒体标签
  插入一个视频

  属性：
  autoplay：autoplay=“autoplay” 添加后会自动播放
  controls：controls=“controls” 可以显示暂停音量等控件
  loop：loop=“loop” 视频重复播放
  width：宽度
  height：高度

  解决浏览器的兼容性问题
  

  意思为，如果不支持第一个则挨个试

  插入一个音频
  属性同视频

  解决浏览器兼容性问题与解决视频方式一样