html笔记

html

基本标签

<>内标签	功能	备注
h1--h6	标题由大到小	双标签 属性：align=“center"居中
p	段落标签	双标签 内容处&nbsp+;是空格
img src="图片路径"	图片	相对路径： ①图片在同级目录下不需要定义路径，可以直接使用名称 ②访问上级路径使用 ../ ③引用子文件夹中的图片使用 目录1/目录2 的方式； 绝对路径： ①直接使用互联网图片的地址。 ②D:\pic.png 属性： alt=“图片名字” 对图片进行描述 title="显示文字" 鼠标滑到图片处显示的文字，不占据页面空间
a	文本	双标签 属性: href="网页链接" 超链接 target=“超链接打开方式” 设置超链接的打开方式，下划线+self表示在当前页面打开，下划线+blank表示在空白页面打开 超链接锚点: ①首先需要给跳转目标加id属性，如 id=“box1” ②超链接的href属性内容不再填写目标链接，而是#+锚点，如 href="#box1"
b或strong	加粗文本	双标签 区别： ①b标签仅加粗文本 ②strong标签语义化更强，表示该文本比较重要
i或em	倾斜文本	双标签 即加粗又倾斜使用标签嵌套 区别： ①i标签仅倾斜文本 ②em标签不仅倾斜，还可以加强语气，在爬虫爬取页面包含em中内容时会优先显示此页面
s或del	删除线文本	双标签 区别： HTML5已经不支持s标签了，建议使用del标签
u	下划线文本	双标签
sup和sub	上下角标文本	双标签 sup为上角标 sub为下角标
--!内容--	注释	Ctrl+/添加注释
ol 内嵌套多个 li	有序列表	均为双标签 属性type：设置列表项目的符号 1.A和a 英文字母顺序 2.I和i 罗马数字顺序 3. 数字1 阿拉伯数字顺序 属性start：列表的序号起始值 例如：type="A" start="6" 从A开始变为从F开始
ul内嵌套多个li	无序列表	均为双标签 type属性：列表符号样式 1.disc 实心圆 2.circle 空心圆 3.none 隐藏 4.square 实心方块
dl内嵌套一个dt和多个dd	自定义列表	均为双标签 dt可理解为列表头 dd可理解为列表内容 修改样式使用CSS

快捷键

• alt+上下键 可以交换代码行
• 标签名{标签文本内容}+tab 补全标签(补充：*数量可以创建多个)
• Ctrl+/ 添加注释
• 标签${标签文$本内容}*标签重复数量 创建多个标题标签且有相应文本，例如h${这是$级标签}*6
• 父标签名>子标签名{子标签文本}*子标签重复次数 嵌套标签补充，父标签也可以*N

表格

• table标签定义，tr标签表格行，td标签单元格，都是双标签

• th加粗文本，与td类似

• table属性：

  ​ border为表格线条粗细，例如border="1"

  ​ width为表格总宽度，height表格总高度，例如width=“500” height="150"

  ​ cellspacing为单元格之间的距离

  ​ cellpadding为单元格边框与文本之间的距离

  ​ align为表格在页面中水平方向上的对齐方式，取值left，center，right

  ​ bgcolor为表格背景颜色

  ​ bordercolor为表格的边框颜色

• tr属性：

  height为该行单元格高度

  bgcolor为该行背景颜色，如果table也有定义bgcolor属性，则按就近原则渲染，以子标签为准

  align为水平对齐方式，取值为left(默认)，center，right

  valign为垂直对齐方式，取值为top，middle(居中)，bottom

• td属性:

  width和height会修改同行所有的高与同列所有的宽

  bgcolor为背景颜色

  align为水平对齐方式，取值为left(默认)，center，right

  valign为垂直对齐方式，取值为top，middle(居中)，bottom

• 合并单元格

  rowspan属性为跨行，合并多行，例如rowspan=“5”

  colspan属性为跨列，合并多列

• 表格标题

  caption属性表格标题，是table标签的子标签，一般写在第一个tr标签前

• 结构分组：表格头，表格体，表格尾

  thead表格头，tbody表格体，tfoot表格尾，都是table的子标签

  列分组：colgroup标签，通过span属性设置组，如span=“1”

---

块级元素:h1-h6,p,ol,ul,li,ld,dt,dd,table,tr,td,th,thead,tfoot,caption,div

内联元素:a,b,em,i,strong,sub,sup,br,img,span

表单

form标签，双标签，其action属性为表单提交后的行动，其值为服务器地址

method属性为表单提交的方式，值为get和post，get为默认值，浏览器会将收集的数据加到服务器地址的后面，提交给服务器，而post不但能收集数据，还不会在地址栏里暴露隐私数据。

表单控件：

• input标签：输入，其type属性可以决定记录的方式，

  值text为单行文本（默认）

  值password为密码，name属性帮助存储内容

  值radio为单选（需要name属性来限制为同一组才有效）

  值checkbox为多选，添加checked属性可以作为默认值

  值file为选择文件

  值submit为提交

  值reset为复位，重置，即清空

  值button为普通按钮，其value为显示的字

  值image为图像按钮，需要有src属性为图片路径，会提交表单

  补充：双button标签也可以提交表单，且默认提交表单

• textarea标签：多行输入文本框，双标签，其cols属性指定一个文本区的可见宽度，rows属性指定文本区域中可见行数，为了美观一般通过css来控制多行文本的样式

  readonly属性可设置为只读

• select标签：下拉菜单，双标签，包含一或多个option子标签（双标签），给option标签添加selected属性可设为默认值

  当select标签含有multiple属性时，允许用户选择多个值

  size属性可以控制下拉菜单的可见行数

• lable标签：表单标签，双标签，其for属性为设置与此标签相关联的表单控件的id值

• disabled属性为禁用该标签

• fieldset标签：字段集，即表单控件分组，双标签

• legend标签：分组的标题，双标签，是fieldset标签的子标签，在同组的其他表单控件的前面

其他实用标签

<>内标签	功能	备注
hr	水平分割线	属性： ①width和size：设置水平线的宽度和高度 ②noshade：去除阴影 ③color：颜色 ④align：水平对齐方式，使用时需设置宽度
pre	预格式化的文本	双标签 会保留其中的空格和回车，按照html源代码中的形式显示
map	图像映射	双标签 必须要有name属性与img标签的usemap属性相关联，用于在图像和地图之间创建关系 其area子标签用于定义图片上的热点区域，实现相应区域的跳转： ①herf属性用于定义热点区域连接的目标地址 ②shape属性用于定义区域的形状，shape的值为defalut：所有区域，rect：矩形，circle：圆形，poly：多边形 ③coords属性用于定义可点击区域的坐标，与shape混合使用，例如shape=“circle” coords=“x,y,r”，x和y即为坐标，r为半径，坐标系的原点在图像的左上角，而多边形则是shape="poly" coords="x1,y1,x2,y2···xn,yn",矩形定义对角的坐标即可。
iframe	在页面中显示其他页面	双标签 属性： ①src：页面路径 ②width：宽度 ③height：高度 ④frameborder：边框宽度，一般为0不显示 ⑤scrolling：滚动条显示方式，值为auto在需要时显示，为yes始终显示，为no从不显示 ⑥name：可以用于一个iframe显示网站变化，在对应的a标签内添加target属性对应该name即可

SVG图片

可缩放矢量图，对图像的形状描述，放大不会失真。

svg标签，创建一个svg画布，双标签，width和height属性为画布的宽和高。

图形通用属性:

• fill：矩形的填充颜色
• stroke-width：矩形的边框高度
• stroke：定义矩形边框的颜色
• filter:用于滤镜效果使用，值为滤镜filter标签的id，例：filter标签的id为f1，则filter="url(#f1)"

可以使用g双标签包含对多个绘图进行编辑

效果标签：

模糊：

1. defs双标签内套filter双标签，再套feGaussianBlur /标签
2. filter标签属性需要有起始滤镜地址x="",y=""，还需要有id用于绑定
3. feGaussianBlur标签需要有 stdDeviation属性用于定义模糊程度，值越大模糊程度越高

阴影：

1. defs双标签内套filter双标签，再套feOffset和feBlend标签，两者是同级的，可以同时使用feGaussianBlur标签对阴影进行模糊
2. feOffset标签需要有属性dx,dy设置阴影偏移量，属性in用于设置阴影样式，值为SourceAlpha为黑色阴影，值为SourceGraphic为原始图像
3. feBlend标签用于渲染原图需要有属性in，值为SourceGraphic

线性渐变：

1. defs双标签内套linearGradient双标签，再套stop /标签
2. linearGradient标签需要含有id，起点和终点的百分比值x1，y1,x2,y2，例如x1="0%"，y1="0%"，x2="100%"，y2="0%"，此时就是水平渐变，如果改为x2="0%",y2="100%"则为垂直渐变
3. stop /标签为详细效果，属性offset=“0%”在水平渐变例子中表示渐变从最左侧开始，stop-color属性表示颜色。例:stop1:offset="0%" stop-color="rgb(255,255,0)",stop1:offset="100%" stop-color="rgb(255,0,0)",渐变从黄到红

水平渐变：

1. defs双标签内套radialGradient双标签，再套stop /标签
2. radialGradient标签需要含有id，内外圆的百分比值cx，cy,r,fx,fy，例如cx="50%"，cy="50%"，r="50%,"fx="50%"，fy="50%"，此时为由外向内渐变，高光在中心处
3. stop /标签为详细效果，属性offset=“0%”在水平渐变例子中表示渐变从最左侧开始，stop-color属性表示颜色。例:stop1:offset="0%" stop-color="rgb(255,255,0)",stop1:offset="100%" stop-color="rgb(255,0,0)",渐变从黄到红

绘制标签：

绘制矩形：rect /标签

属性：

• width和height：矩形的宽和高
• x：矩形的左侧位置
• y：矩形的顶部位置
• fill-opacity：填充颜色的不透明度0~1
• stroke-opacity：描边颜色的不透明度0~1
• rx：圆角矩形x方向的长度
• ry：圆角矩形y方向的长度

绘制圆形：circle /标签

属性：

• cx：圆心x坐标
• cy：圆心y坐标
• r：半径

绘制椭圆:ellipse /标签

属性：

• cx：圆心x坐标
• cy：圆心y坐标
• rx：水平半径
• ry：垂直半径

绘制直线：line /标签

属性：

• x1，y1：起点坐标
• x2,y2:终点坐标

绘制多边形：polygon /标签

• points：多边形每个角的坐标

绘制折线：polyline /标签

属性：

• points：每个点的坐标

绘制文字： text 双标签

可含有多个tspan双标签，多个文本

属性：

• x，y：文本的位置坐标
• font-size：文本大小
• text-anchor：坐标对齐方式，值start为文本左端对齐，middle为中间对齐，end为文本尾部对齐
• transform：文本样式，旋转文本,例：transform=“rotate(30 20,40 )” 30为旋转角度，20,40为旋转的中心点坐标

想要给text添加超链接，需要作为a标签的子标签，在a标签属性xlink：href中填写链接，还需要在svg中添加属性xmlns：xlink=“http://www.w3.org/1999/xlink”,这是固定值，同样可以使用target标签设置打开方式

绘制路径：path /标签

属性：

• d属性代表绘制路径，例如：d="M100 350 l 150 -300"，大写M代表起始点坐标为绝对路径（150,350），而小写l代表相对路径为直线（150，-300），d="M 100 350 q 150 -300 300 0",小写q代表绘制贝塞尔曲线控制点为相对路径（150，-300），终点为相对路径（300,0）
• stroke属性，笔画属性，值为颜色如：red
• stroke-width属性，笔画宽度属性，值为数字
• stroke-linecap属性，笔画笔帽属性，值为butt没有线帽，round圆形线帽，square方形线帽
• stroke-dasharray属性，虚线笔画属性，值为数字，以“线长，空长，线长，空长···”的形式如“20,10,5,5”即这条虚线上的第一条线长为20，空为10，第二条线长为5，空为5。