网页文档的结构和格式的定义是由HTML元素来完成的,HTML元素是由单个或一对标签定义的包含范围。一个标签就是左右分别有一个小于号(<)和大于号(>)的字符串。开始标签是指不以斜杠(/)开头的标签,其内是一串允许的属性-值对。结束标签则是以一个斜杠(/)开头的标签。
HTML元素的四种形式
1、空元素:<r>
2、带有属性的空元素:<hr color=”red”>
3、带有内容的元素:<title>https://www.baidu.com/</title>
4、带有内容和属性的元素:<font color=”red”>https://www.baidu.com/<font>
与段落控制相关的标签
1、<p align=”#”>:表示paragraph,作用:创建一个段。属性align表示段的对齐方式,#可以是left、center、right、justify。
2、<br>:表示linebreak,作用:换行。
<hr color=”clr”>:表示horizontal rule.作用:插入一条水平线。属性color用来指定线的颜色,clr可以是预定义的颜色名字,如,red,blue,olive等,或者以16 进制数表示的颜色值,clr=#rrggbb,如#ff0000表示红色,#00ff00表示绿色。
与文本显示相关的标签
1、<center>…</center>:使文本居中显示。
2、<hn align=”#”>…</hn>:用于指出文档的标题,n是从1到6的整数,1表示最大标题,6表示最小标题。属性align用于设置标题对齐的方式,#可以是left、center、right。
3.、<font size=n color=”clr”>…</font>:用于设置字体,属性size表示字体的大小,n可以是从1到7的整数,数字越大,字体越大;属性color表示字体的颜色,clr可以是预定义的颜色名字,或者以16进制数表示的颜色值。
4、<b>…</b>:使文本成为粗体。
5、<i>…</i>:使文本成为斜体。
6、<textarea>…</textarea>:多行文本输入。
7、<a href=”URL”> …</a>:超链接。属性href用于指定链接的目标,目标地址由URL定位。
如何输入特殊字符
在HTML文档中,像不间断空格、回车等符号,HTML保留的字符(例如:‘< ’,表示一个标记的开始),一些在键盘中不存在的特殊字符,需要通过引用的方式才能输入。在HTML中有两种引用类型:字符引用和实体引用。
字符引用和实体引用都是以一个和号(&)开始并以一个分号(;)结束。如果用的是字符引用,需要在和号(&)之后加上一个井号(#),之后是所需字符的十进制代码或十六进制代码(ISO 1064字符集中字符的编码)。如果用的是实体引用,在和号(&)之写上字符的助记符。
在HTML文档中,标签和属性的名字是大小写无关的,你既可以大写标签:<html》,也可以小写标签:<html>,但实体的引用是区分大小写的。
HTML注释
(<!--……-->)小于号和感叹号之间没有空格
列表框
1、列表框允许用户从一个下拉框中选择一项或多项,其功能和单选按钮或复选框的功能相同,但显示的方式不一样。
2、列表框由<select>元素创建,列表框中的各个选项用<option>元素提供。
列表
(一)建立数字编号的列表
1、使用<ol> 和<li>标签创建带数字编号的列表
2、在<ol>标签中使用start属性,设置起始的序号。
3、在<li>标签中使用value属性,改变列表内的编号顺序。
4、指定列表编号的格式和顺序
5、在<ol>和<li>标签中,使用type属性指定编号系统的类型。Type属性的取值如下表所示:
属性值 | 数字风格 |
A | 使用大写字母(A、B、C等) |
a | 使用小写字母(a、b、c等) |
l | 使用大写罗马数字(I、II、III等) |
I | 使用小写罗马数字(i、ii、iii等) |
1 | 使用阿拉伯数字(1 、2 、3等),这是缺省值 |
(二)建立带有项目符号的列表
使用<ul>和<li>标签创建带有项目符号的列表,<ul>和<li>标签的type属性指定符号的样式,取值如下:
1、Disc —显示为实心的圆圈
2、Square — 显示为实心的方块
3、Circle —显示为空闲的圆圈
(三)建立无符号的列表
1、使用<dl>与<dt> 标签创建无符号的列表
2、使用<dd>标签替换<dt>,创建缩进的列表
表格
1、<table>元素来定义<table>…</table>
2、<caption>元素用于定义表格标题:<caption>…</caption>
3、<tr>元素在表格中添加一个新行:<tr>…</tr>
4、<th>元素用于定义表头:<th>…</th>
5、<td>元素用于定义单元格:<td>…</td>
6、<form>表单创建:<form>…</form>
<input>元素
1、单行文本输入控件(type=“text”)
2、提交按钮(type=“submit”)
3、重置按钮(type=“reset”)
4、口令输入控件(type=“password”)
5、单选按钮(type=“radio”)
6、复选框(type=“checkbox”)
7、隐藏控件(type=“hidden”)
嵌入图像:<img src=”URL” width=n height=n>
属性src指定图像资源的位置,属性width和height用于指定图片的尺寸。
总结
HTML里所讲到的东西在牛腩视频里都提到,但是没有孙鑫老师讲得详细,当是也没有做个总结,所以学到这里的时候就想做个总结,做到颗粒归仓。