结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML 代码由包含在尖括号中的字符组成。这些成为 HTML 代码元素。
通常由两个标签组成:一个起始标签个一个结束标签(结束标签要多一个斜杠)。<html></html>
位于起始标签<html> 和 </html> 之间的代码都是 HTML 代码。<body></body>
位于 body 标签之间的代码都会显示在浏览器的主窗口中<head></head>
包含有关这个页面的一些信息<title></title>
是显示网页标题的标签<meta>
使用meta,我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等
总结
- HTML 页面是文本文档
- HTML 使用的标签(尖括号及其字符)位包含在其中的内容提供结构信息
- 标签经常与元素互换使用
- 标签通常成对出现。
- 标签可以附带特性。特性由特性名称和特性值组成
文本
标题
<h1>主标题</h1>
<h2>次标题</h2>
<h1>
至 <h6>
<h1>
用在主标题上<h2>
用在子标题上
段落
<p>要添加的段落</p>
<p>
:在成段的文字两端分别添加起始标签<p>
和结束标签 </p>
构成了HTML中的段落
默认情况下,浏览器在显示段落时会另起一行并于后续段落保持一定的距离
粗体/斜体
<b>要加粗的文本</b>
无其他特殊含义,但是它可以在外观上将其中的文字以粗体展示出来
<i>要倾斜的文本</i>
无其他特殊含义,但是它可以在外观上将其中的文字以倾斜展示出来
上标/下标
<sup>上标字符</sup>
用来记作上标的字符,像22
<sub>要倾斜的文本</sub>
用来记作下标的字符。通常用在脚注、化学式中:H2O
空白
当浏览器遇到两个或者两个以上的空格时,只将其显示位一个空格,换行同样是此问题,这一特性称为白色空间折叠
换行符/水平线
<br/>
:换行符
<hr/>
:水平线符
加粗/强调
<strong>
:作用是表示内容十分重要,在浏览器中显示粗体<em>
:起强调作用,能够改变语句的含义,在浏览器中默认显示斜体
引用
<blockquote>
:用来标记那些会占用一整段的较长的引用。通常浏览器会对此元素中的内容进行缩进。<q>
:用来标记段落中较短的引用
缩写词/首字母缩写词
<abbr>
:缩写词/缩写字母可以使用此元素,其起始标签中的title
特性用来指定相应的词汇的完整形式。
引文/定义
<cite>
:当引用作品时(书籍、电影、研究报告)可以使用此元素<dfn>
:解释新术语时,可以用此元素
其他
<address>
:设计者的联系方式<ins>
:显示已经插入到文档中的内容<s>
:表示不准确、不相关却不应当删除的内容<del>
:表示已经从文档中删除的内容
列表
有序列表
定义
有序列表是指为其中的每个项目编号的列表。
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ol>
可以通过list-style-type
css属性设置编号类型
无序列表
定义
无序列表是以点状(默认)项目符号作为开头的列表
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
可以通过list-style-type
css属性设置编号类型
定义列表
定义
定义列表是由一系列术语及其定义组成的列表
<dl>
<dt>被定义的术语</dt>
<dd>定义</dd>
</dl>
嵌套列表
<ul>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
总结
- HTML 中有三种列表:有序、无序、定义列表
- 有序列表使用数字编号
- 无序列表使用项目编号
- 定义列表用来定义专业属于
- 列表可以嵌套在其他列表中
链接
作用
- 跳转到另一个网站
- 跳转到另一网页
- 指向同一网页内的另一个位置
- 在新的窗口打开链接
<a>
:有一个重要的特性:href ,该特性的值设定了链接的目标。即点击该连接时所到达的页面地址。
默认情况下是蓝色并带有下划线的样式。
URL:全称是”Uniform resource locator(统一资源定位器)“
绝对 URL:以网站的域名开头,域名后面可以指定具体的页面路径,没指明具体路径将显示网站主页。
相对 URL:若是同一网站的其他页面,可使用相对路径,不用指定网站的域名。
Email 链接
<a href="mailto:xxxxx@xxx.com">email johnson </a>
新窗口打开链接
<a href="https://www.baidu.com" target="_blank"></a>
链接到当前页面的某个位置
<h1 id="top">标题1</h1>
<a href="#arc_shot">arc_shot</a>
<a href="#interlude">interlude</a>
<a href="#prologue">prologue</a>
<h2 id="arc_shot">arc shot</h2>
<p>fujashfujaskhfjkasdfjask</p>
<h2 id="interlude">interlude</h2>
<p>dfahuifhfuisdhbfujkasbfujkdas</p>
<h2 id="prologue">prologue</h2>
<p>fhasdiufhasjduihfujasidfh</p>
<a href="#top">top</a>
总结
- 链接是由
<a>
元素创建的 -
<a>
元素通过href
属性来知名你所要链接的页面 - 如果链接到网站的内部的某个页面相对于完全限定 URL ,最好使用相对链接
- 可以通过 id 特性将某个科链接某个科链接的页面上的元素作为链接目标
图像
<img src=" " alt="" title="">
src
属性告诉浏览器在何处可以找到所需的图像文件alt
属性是当图像文件显示不出来时对图像进行描述title
当光标停留在图像上时会以提示的方式显示title属性的内容
总结
-
<img>
元素用于向网页中添加图像 - 必须为
<img>
元素指定 src 特性和 alt 特性,src 用来表示图像的源地址,alt 特性用来描述图像的内容。
表格
定义
表格以网格形式表示数据。
<table>
<thead>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4</td>
<td>5</td>
<td>7</td>
</tr>
</tfoot>
</table>
<table>
:用来创建表格,表格的内容逐行编写<tr>
:每行<td>
:单元格<th>
:表示行/列的标题。可以使用scope
表示此元素时列标题还是行标题。row
是指行标题,col
是指列标题。colspan
:跨列rowspan
:跨行
总结
-
<table>
元素是用来向网页中添加表格 - 表格是逐行绘制的,行是由
<tr>
创建的 - 每一行中都有一定数量的由
<td>
元素(表示标题是为<th>
)表示的单元格 - 可利用colspan(跨列)rowspan(跨行)来使表格中的单元格跨越多行/多列
- 长表格可以分为
<thead>
、<tbody>
、`<tfoot>三个部分
表单
表单结构
<form>
:表单控件位于<form>
元素中,每一个form 都应该设置 action 属性和 method属性。
action:属性值是服务器上一个页面的URL
method:可以采用get/post
单行文本框
<input type="text">
密码框
<input type="password">
文本框
<textarea name="" col="" row=""></textarea>
单选按钮
<input type="radio" name="" value="" id="" checked>
复选框
<input type="checkbox" name=”“ value="" checked>
下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
文件上传
<input type="file">
提交按钮
<input type="submit" >
按钮
<button></button>
标签表单控件
<label>
age:
<input type="text">
</label>
<input type="radio" value="man" name="sex">
<label for="man">男</label>
<input type="radio" value="woman" name="sex">
<label for="woman">女</label>
两种用法:
- 将文本说明和表单输入框全部包围起来
- 与表单控件分开,使用
for
属性来指明<label>
元素所关联的表单控件。for属性值与他所标注的表单控件的 id 属性相匹配。
其他控件
<input type="date" name="" id=""> //时间控件
<input type="text" required="required"> //必填
<input type="email" name="" id=""> // 邮件控件
<input type="search" name="" id=""> //搜索控件
其他标记
DOCTYPE(文档类型)
!DOCTYPE 是一个文档类型标记,是一种标准通用标记语言的文档类型声明,在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。
标签定义及使用说明
<!DOCTYPE> 声明位于文档中的最前面的位置,处于<html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在 HTML 4.01 中, <!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML (Standard Generalized Markup Language 标准通用标记语言)。DTD 指定了标记语言的规则,确保了浏览器能够正确的渲染内容。
注释
<!-- -->
页面信息
<meta>
<meta>
元素位于<head>中,对用户不可见。最常用的特性时name
和content
属性。
id/class属性
每一个元素都有id/class属性
行内元素
有些元素在显示时总是与它的临近元素出现在同一行内,这些元素被称为内联/行内元素。
块级元素
有些元素在浏览器窗口中显示总是另起一行,这些元素被称为块级元素