目录

注释标签

标题标签 h1-h6

段落标签

换行标签

格式化标签

加粗:strong 标签和 b 标签

倾斜:em 标签和 i 标签

删除线: del 标签 和 s 标签

下划线:ins 标签 和 u 标签

图片标签:img 单标签

src属性:

alt属性:

title属性:

width属性:

height属性:

border属性:

超链接标签:a标签

href属性:

target属性:

表格标签

单元格合并

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域:

表单空间

1>文本框

2>密码框

3>单选框

​4>复选框

5>普通按钮

6>提交按钮

7>重置按钮

8>选择文件

label标签

select标签

textarea标签

无语义标签

HTML中常用特殊字符


注释标签

ctrl+’/’ 将当前行注释,效果如下:

PS:要看注释掉的信息,F12显示代码

标题标签 h1-h6:

有六个,从h1-h6,数字越大,字体越小

hello

hello

hello

hello

hello
hello

效果如下(各个标签之间的间隙是浏览器默认的css样式,可更改):

段落标签

测试页面

这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段

这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段

换行标签

测试页面

这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段

这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段换行处
这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段

格式化标签

加粗:strong 标签和 b 标签

倾斜:em 标签和 i 标签

删除线: del 标签 和 s 标签

下划线:ins 标签 和 u 标签

测试页面

加粗 strong标签

加粗 b标签

倾斜 em标签

倾斜 i标签

删除线 del标签

删除线 s标签

下划线 ins标签

下划线 u标签

PS:虽说每种效果的两种标签效果一样,但是前者是带强调的意思。

图片标签:img 单标签

src属性:

img标签必须带有src属性,指定图片的路径

此时要把rose.jpg这个图片放到和html同级的目录下

title属性:

提示文本,鼠标放到图片上,就会有提示

width属性:

图片的宽度,px单位 像素

height属性:

图片的高度

border属性:

给图片加边框

超链接标签:a标签

href属性:

必须具备,表示点击后跳转到哪个页面

测试页面 跳转页面

href=”#”表示不做任何跳转,停留在当前页面

刷新

要用图片进行超链接跳转,可在a标签里添加img标签,示例:

 

单元格合并

合并行 rowspan="合并的行数"

合并列 colspan="合并的列数"

Document
姓名性别年龄
张三3
李四4
王五5

列表标签

无序列表

ul 、li

ul中的 types属性 改变列前面的符号,有以下三种取值

disc(默认)

square

circle

PS:快捷键 ”ul>li*3+回车” 在ul下面写3个li“ 在ul下面写3个li

Document

这是无序列表

  • 内容1
  • 内容2
  • 内容3

有序列表

ol 、li

ol中的 types属性 改变列前面的编号符号,有以下五种取值

a //小写英文字母编号
A //大写英文字母编号
i //表示小写罗马数字编号
I //表示大写罗马数字编号
1 //数字编号(默认)

ol 的start属性,更改编号的起始值

Document

这是有序列表

  1. 这是有序列表1
  2. 这是有序列表2
  3. 这是有序列表3
  4. 这是有序列表4

自定义列表

dl 、dt 、dd

Document

这是自定义列表

自定义列表显示内容
自定义列表内容1
自定义列表内容2
自定义列表内容3

表单标签

用表单标签来完成服务器的一次交互

分为两个部分:

表单域包含表单元素的区域,重点是form标签
表单控件输入框,提交按钮等,重点是input标签

表单域:

表单空间

可以通过对type进行对应的取值,控制input的类型

1>文本框

姓名

2>密码框

姓名
密码

3>单选框

input 的type 属性为radio时为单选框,使用name实现只能勾选一个的功能,checked="true" 表示默认是勾选的。

Document姓名
密码
性别男女

4>复选框

input 的 type 属性为 checkbox 时

Document爱好吃饭睡觉玩游戏

5>普通按钮

input 的 type 属性为 botton时,value设置按钮显示的文字,点击按钮要触发的事件通过gs设置,

这里举例弹出hello

6>提交按钮

一般将数据提交到服务器上

input 的 type 属性为 submit ,单击提交按钮后,会自动清空文本框中的数据

姓名

7>重置按钮

重置文本框、单选框、复选框

8>选择文件

label标签

一般和单选框配合使用,实现单击文字也可勾选单选框的功能

select标签

一般和option配合使用(下拉框效果),默认显示第一个option的文字,可以通过设置selected属性,修改默认显示。

 --请选择年份-- --2002-- --2003-- --2004-- 

textarea标签

row属性 设置超过多少行时出现滚轮

无语义标签

没有固定的用途,可以拿着这个标签啥都可以干

div 是独占一行的,是一个大盒子

span 是不独占一行的,是一个小盒子

Document吃饭睡觉玩游戏吃饭睡觉玩游戏

HTML中常用特殊字符

空格:

小于号:<

大于号:>

按位与:&amp;