一、html语法规范
开始标签结束标签 双标签 标签成对出现 单标签(极少):换行 图像标签
标签关系:
二、基本标签结构
Html页面也叫html文档
基本结构标签(骨架标签)
文档类型声明标签 非html文档标签Lang 语言种类:"en"定义语言为英语网页 "zh-CN"定义语言为中文网页
charset:字符集三、html标签上
1、标题标签,6个等级网页标题,即
-
我是一级标题
h为head缩写 作为标题标签 并根据重要性依次递减 一行显示2、段落标签
用于定义一个段落,可将网页分成不同的段落,段落之间有明显的分隔3、 换行标签
,是一个单标签,强制让文字换行 break
4、文本格式化标签:设置粗体,斜体,下划线等效果,用格式化标签,突出重要性
加粗标签:
倾斜标签:
删除线:
下划线:
5、盒子标签,没有语义,用来布局页面
分割、分区 跨度、跨距6、图像标签和路径
单标签,用于定义html页面中的图像,image
src是标签的必须属性(属于这个图像标签的特性),它用于指定图像文件的路径和文件名,属性值为图片路径
图像标签的其他属性:
A、属性值为文本:1、alt 替换文本,图像显示不出来时用文字代替;
2、title 提示文本,鼠标放到图像上时,提示的文字;
B、属性值为像素:1、width 设置图像宽度
2、height 设置图像高度
3、border 设置图像的边框粗细
注意:图像标签可有多个属性,跟在标签名img后面;
属性之间不分先后,标签名与属性、属性与属性之间用空格分开
属性采取键值对的格式,即key=“value”的格式,属性=“属性值”
路径:1、目录文件夹和根目录:目录文件夹就是最大的一个文件夹,根目录就是打开目录文件夹的第一层
2、页面中的图像非常多,建一个文件夹保存,引用图片有相对路径、绝对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。简单来说就是图片相对于html页面的位置。
1、图像文件位于html同一级路径
2、图像文件位于html下一级路径 /
3、图像文件位于html上一级路径 …/
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径;如:“D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif”
7、超链接标签
标签用于定义超链接,作用是从一个页面跳到另一个页面
语法格式 文本或图像
href属性:必须属性,用于指定链接目标的url地址,为标签应用href属性时,它就具有了超链接的功能
target属性:打开窗口的方式 默认值是 _self当前窗口打开页面 _blank新窗口打开页面
链接分类:1、外部链接:访问外部网站,一定要加http://再加网址.如百度
2、内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可。如首页
3、空链接:# 未决定跳转到哪的链接
4、下载链接:地址链接的是文件 .exe或者是zip等压缩包形式,会下载这个文件 下载文件
5、网页元素的链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
6、锚点链接:点击链接,可以快速定位到该页面的某个位置,即当前页面的跳转。
在链接文本的href属性中,设置属性值为#名字的形式,如第2集
找到目标位置的标签,里面添加一个id属性=刚才的名字,如
第2集介绍
四、注释与特殊字符
1、注释标签
2、特殊字符
空格符: 
小于号:<
大于号:>
五、html标签下
1、表格标签
不是用来布局页面的,是用来展示数据的
基本语法:
单元格内的文字 |
表头单元格,单元格内文字加粗居中,突出重要性
单元格内的文字 |
---|
表格属性,实际开发中不常用,后面通过css来设置,表格属性要写到表格标签table中去
align:对齐属性,规定表格相对周围元素的对齐方式,left、center、right
Border:表格边框,默认为无“”或“1”
Cellpadding:文字距离单元格边框的空白,像素值,默认为1像素
cellspacing:单元格和单元格的距离,像素值,默认2像素
width:表格宽
height:表格高
2、表格结构标签
为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体;在表格标签中,用标签表示表格头部整个区域;和th标签不同,th仅是表头单元格,而thead是整个表头;标签表示表格主体区域;
thead和tbody标签都嵌套在table标签里
3、合并单元格
特殊情况下,可把多个单元格合并为一个单元格
合并单元格的方式:跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
目标单元格:写合并代码的位置;跨行:将上侧单元格视为目标;跨列:将左侧单元格视为目标
合并单元格的步骤:1、确定和跨行还是跨列合并;2、找到目标单元格,写上合并方式=合并的单元格数量。如:;3、删除多余的单元格。
4、列表标签
表格是显示数据的,列表是来布局的
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便
列表分类:
无序列表:
- 标签定义
- 列表项1
- 列表项2
- 列表项3
…
⚠️:无序列表的各个列表项之间没有顺序级别之分,是并列的;
- 标签,直接在ul标签中输入其他标签或者文字的做法是不被允许的;
- 标签之间相当于一个容器,可以容纳所有元素,即什么标签,文字都可以嵌套;
无序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置;有序列表:
- 标签来定义列表项
- 列表项1
- 列表项2
- 列表项3
…
⚠️:有序列表即为有排列顺序的列表,其哥哥列表项会按照一定的顺序排列定义;
- 标签,直接在ol标签中输入其他标签或者文字的做法是不被允许的;
- 标签之间相当于一个容器,可以容纳所有元素,即什么标签,文字都可以嵌套;
有序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置;自定义列表:
- 名词1解释1
- 名词1解释2
- 名词1解释3
名词1
⚠️:
- ;
和
- 个数没有限制,经常是一个
对应多个- ;
和
- 可容纳所有元素,放任何标签
使用场景:自定义列表常用语对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号;
5、表单标签
使用表单目的是为了收集用户信息
表单的组成,在html中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息3个部分构成表单域:是一个包含表单元素的区域,标签用于定义表单域,以实现用户信息的收集和传递;form会把它范围内的表单元素信息提交给服务器。
各种表单元素控件 常用属性:action,属性值为url地址,用于指定接受并处理表单数据的服务器程序的url地址;?服务器编程阶段 method:属性值为get/post,用于设置表单数据的提交方式,其取值为get或post; name:属性值为名称,用于指定表单的名称,以区分同一个页面中的多个表单域;表单控件(表单元素):在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或选择的内容控件。
1、input输入表单元素:在表单元素中标签用于收集用户信息,在标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
标签为单标签;type属性设置不同的属性值用来指定不同的控件类型;
type属性的属性值:button:定义可点击按钮(多数情况下,用于通过javascript启动脚本);
checkbox:定义复选框;
file:定义输入字段和“浏览”按钮,供文件上传;
hidden:定义隐藏的输入字段;
image:定义图像形式的提交按钮;
password:定义密码字段,该字段中的字符被掩码;
radio:定义单选按钮;
reset:定义重置按钮,重置按钮会清除表单中的所有数据;
submit:定义提交按钮,提交按钮会把表单数据发送到服务器;
text:定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符;除type属性外,<input/>标签还有其他很多属性,其中常用的有: name:属性值由用户自定义,定义input元素的名称,区别不同表单元素; value:属性值由用户自定义,规定input元素的值; checked:属性值为checked,规定此input元素首次加载时应当被选中,主要针对单选按钮和复选框; Maxlength:属性值为正整数,规定输入字段中的字符的最大长度; ⚠️:name和value是每个表单元素都有的属性值,主要给后台人员使用; name表单元素的名字,要求单选按钮和复选框要有相同的name值;
补充:标签为input元素定义标注标签,label标签用于绑定一个表单元素,党点击label标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素,用来增加用户体验。
<input type=“radio” name=“sex” id="sex />
此时单击男也可选中单选按钮。
⚠️:标签的for属性应当与相关元素的id属性相同2、select下拉表单元素:如果在页面中,有多个选项让用户选择,并且想要节约空间,就使用下拉列表。 <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> ... </select> ⚠️:select标签中至少包含一对option;在option中定义selected=“selected”时,当前项即为默认选中项。 3、textarea文本域元素:当用户输入内容较多的情况下,在表单元素中,<textarea></textarea>标签是用于定义多行文本输入的控件。使用该控件,可以输入更多的文字,常见于留言板,评论。 <textarea rows="3" cols="20"> 文本内容 </textarea> ⚠️:通过textarea标签可以轻松地创建多行文本输入;cols=“每行中的字符数” rows=“显示的行数”,在实际开发中不使用这两个属性,都是用css来改变大小。