HTML基础篇

最新推荐文章于 2022-04-17 08:42:15 发布

AnswerForWang

最新推荐文章于 2022-04-17 08:42:15 发布

阅读量597

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/AnswerForWang/article/details/77417786

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.HTML简介

HTML：超文本标记语言，不单指文字，页面内可以有图片，声音，链接。

编写工具：记事本，写字板，Hbuilder，Sublime。

后缀名：.html或者.html。

表现形式：指令。

二.基本语法

指令分为：单标记指令：</>，双标记指令：<></>

常见指令形式：

（1）<标签名/>

单标签，不用设置属性。例如<br/>，<hr/>

（2）<标签名属性=“属性值”/>

单标签，设置属性。例如<hr width=“800”/>

类比单标签

（3）<标签名>......<标签名/>

例如<span>.....<span/>

（4）<标签名属性=“属性值”>.....<标签名/>

例如<font size=“7”>......<font/>

三.<!DOCTYPE>

1.在HTML所有标签之前，文档第一行，自身不是标签。

2.作用是指定文档类型，指引浏览器使用哪个版本去解析页面。

3.不需要强记。

4.但是要注意版本有些东西支持有些东西不支持

例如 HTML4.01 Strict 不包括展示性和弃用的元素

HTML 4.01 Transitional 包括展示性和弃用的元素

二这HTML 5的区别是不支持框架集Framesets

四.基本结构

<!DOCTYPE html> ------->制定浏览器用何种版本去解析页面

<html> -------->文档结束

<head> --------->不会在浏览其中显示

<title>HTML文档的基本结构</title> -------->浏览器窗口标题栏

</head>

<body> ---------->浏览器中显示的内容

</body>

</html> ------>文档结束

五.基本标签的使用

1、<a></a>

<a>标签定义超链接，用于从一张页面链接到另一张页面。

<a>元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。

若是想要跳转到当前页面，那么href的值为#。

被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

常用属性

属性	值	描述
href	URL	连接所要跳转的位置，可能是其他或当前页面。
rel	text	规定当前文档与被链接文档之间的关系。比如说下一个文档是整体中的第一个文档，可能是最后一个文档等等，主要为搜索引擎服务，让搜索引擎更好的知道连接之前的关系。
target	_blank _parent _self _top Framename 作为锚点的a标签的name值	规定在何处打开链接文档。 _blank：开启新页面显示页面； _self：当前页面显示跳转到页面，默认值。 _top：一般用于有frameset布局的页面，想要覆盖整个页面显示连接的情况。 Framename：这里framename与上边的值不同，具体以你为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。

例1：在frameset中打开

（1）使用frameset布局，cols设置布局的列，第一列占200

</frameset>

（2）在frameset布局时使用a标签所在的页面，（一定要设置，否则这里的的target值相当于_blank）。

（3）a标签中target属性值为frame01

例2：锚点anchor

（1）设定方式：

方式1：利用a标签的name属性：<a name="top"></a>

方式2：一般标签的id属性：div id=""、a id=""等

（2）定位方式：a href=”#锚点名称“

2、id，name，class，style说明

这四个属性，基本上在任何的标签中都可以使用。

id属性：

主要在编写js时会利用到该属性，或者利用id使用id选择器设置css样式。

name属性：

主要在form表单中使用。在表单中若没有name属性，在使用get请求方式提交表单时，无法传递值。在js中也可能会利用到name属性。

class属性：

可以规定元素的类名（classname）。

class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。

style属性：

style 属性规定元素的行内样式（inline style）

3、列表

（1）无序列表

由<ul></ul>和<li></li>标签组成。

格式：

<ul>

......

</ul>

eg：

<ul>

</ul>

显示：

常用属性

属性

值

描述

type

dise

circle

square

规定列表的项目符号类型。可以使用样式取代。

dise：实心圆（默认）

circle：空心圆

square：方块

（2）有序列表

由<ol></ol>和<li></li>标签组成。

格式：

<ol>

......

</ol>

eg：

<ol>

</ol>

显示：

常用属性

属性

值

描述

type

I（大写i）

规定在列表中使用的标记类型。

1：用数字形式表示序号（默认）

a：用小写字母表示序号

A：用大写字母表示序号

i：用小写罗马数字表示序号

I（大写i）：用大写货吗数字表示序号

（3）定义列表

由<dl></dl>和<dt></dt>和<dd></dd>标签组成。

格式：

<dl>

......

</dl>

说明：

<dl>：列表的开始

<dt>：表示一个项目

<dd>：表示一个项目下的更详细的内容

eg：

<dl>

</dl>

显示：

（4）列表嵌套

格式：

<ul>

<li>

<ol>

</ol>

.....

</li>

<li>

<ol>

</ol>

.....

</li>

</ul>

eg：

<ol>

<li>上海

<ul>

</ul>

</li>

<li>北京

<ul>

</ul>

</li>

</ol>

显示：

eg：

<ul>

<li>上海

<ol>

</ol>

</li>

<li>北京

<ol>

</ol>

</li>

</ul>

显示：

4、table表格

<table></table> 标签定义 HTML表格。

<tr></tr>标签定义表格的行。

<td></td>标签定义 HTML 表格中的标准单元格。

<th></th>定义表格内的表头单元格。

简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。

理解：table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。

tr元素包含一个或多个th或td元素

th定义表格内的表头单元格。

td定义表格内的标准单元格。

HTML 表单中有两种类型的单元格：

表头单元格 - 包含表头信息（由 th 元素创建）

标准单元格 - 包含数据（由 td 元素创建）

th元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

常用属性

属性	值	描述
align	right、center、left	表格对齐方式
border	px	规定表格边框的宽度
width	% 、px	规定表格的宽度

tr常用属性

属性	值	描述
align	right、left、center	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格行的背景颜色，以后可以用样式取代它
valign	top、middle、bottom	规定表格行中内容的垂直对齐方式，以后可以用样式取代它

5、p、div、pre

（1）<p></p>

<p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

理解：语文课本中各个段落之间会有大的空隙。

常用属性

属性	值	描述
align	left、right、center、justify	规定段落中文本的对齐方式，以后可以用样式取代它

（2）<div></div>

<div>块级元素，通常与css配合使用，用于布局。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

常用属性

属性	值	描述
align	left、right、center、justify	规定div元素中的内容的对齐方式，以后可以用样式取代它

（3）<pre></pre>

格式化标签。pre标签中的内容，基本可以以原样展示，通常会保留空格和换行符。而文本也会呈现为等宽字体。比如写了两行文字，不添加br标签就可以。

Eg：

<pre>

我是第一行

我是第二行

我是第三行

</pre>

显示的结果如图：

6、br、hr

（1）br标签为换行符号。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。

在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

注意：<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行，而不是分割段落。

（2）hr标签创建一条水平线

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。

常用属性

属性	值	描述
align	Center Left right	规定 hr 元素的对齐方式，以后可以用样式取代它
size	pixels	规定 hr 元素的高度（厚度），后可以用样式取代它
width	Pixels %	规定 hr 元素的宽度，后可以用样式取代它

7、标题、b、i、u、del、font

（1）标题

<h1> ~ <h6> 标签可定义标题。

<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

<h999>这样的标签不产生错误，但是不具有标题的效果。

H1标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是一个页面最好只有一个h1标签，否则可能进入搜索引擎的黑名单。

（2）b、i、u、del

<b> 标签规定粗体文本

<i> 标签显示斜体文本效果

<u> 标签可定义下划线文本

<del> 标签会让文本产生中间画线的效果

例：

注意：都要有结束标签

（3）font

<font> 规定文本的字体、字体尺寸、字体颜色。

常用属性

属性	值	描述
color	rgb(x,x,x) #xxxxxx colorname	规定文本的颜色，以后可以用样式取代它
face	font_family	规定文本的字体，后可以用样式取代它
size	number	规定文本的大小，后可以用样式取代它

8、img

img 元素向网页中嵌入一幅图像。

注意：从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

必须属性

属性	值	描述
alt	text	规定图像的替代文本，一般在图片无法正常显示占位的文字。
src	URL	规定显示图像的 URL。

常用属性

属性	值	描述
align	top、bottom、middle、left right	规定如何根据周围的文本来排列图像
border	pixels	定义图像周围的边框
height	pixels、%	定义图像的高度。
width	pixels、%	定义图像的宽度。
Title	文本	当鼠标在图片上时显示的文字

9、表单

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea、fieldset、legend 和 label等元素。

表单用于向服务器传输数据。

form 元素是块级元素，其前后会产生折行。

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送 form-data 的 HTTP 方法
name	Form_name	规定表单的名称
target	_blank _self _parent _top framename	规定在何处打开 action URL

说明:

1.method：表单提交方式：get、post

get：默认值，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

（1）fieldset、legend

外边框： <fieldset></fieldset>

标题： <legend></legend>

（2）<input>

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

注意：

1.没有name属性的属性是无法提交到后台的！！！！

2.Radio单选按钮以name相同为一组。

3.Checkbox复选按钮以name相同为一组。

常用属性

属性	值	描述
alt	text	定义图像输入的替代文本。
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
readonly	readonly	性规定输入字段为只读。
maxlength	number	规定输入字段中的字符的最大长度。
value	value	规定 input 元素的值。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

例：

<formaction="diner/login"target="_blank">

隐藏域：<inputtype="hidden"name="id"/><br/>

姓名：<inputtype="text"name="uname"maxlength="8"/><br/>

密码：<inputtype="password"name="upwd"/><br/>

邮箱：<inputtype="text"name="uemail"value="123456@qq.com"disabled="disabled"/><br/>

户籍：<inputtype="text"name="native"value="北京"readonly="readonly"/><br/>

性别：<inputtype="radio"name="gender"value="男"checked="checked"/>男

<inputtype="radio"name="gender"value="女"/>女<br/>

爱好：<inputtype="checkbox"name="hobby"value="1"/> 羽毛球

<inputtype="checkbox"name="hobby"value="2"checked="checked"/> 网球

<inputtype="checkbox"name="hobby"value="3"/> 敲代码<br/>

头像：<inputtype="file"name="headImg" /><br/>

<inputtype="submit"value="提交"/>

<inputtype="button"value="按钮"/>

<inputtype="reset"value="重置"/>

<inputtype="image"src="../img/timg_副本.jpg"alt="提交"value="提交"/>

</form>

</fieldset>

说明：

1.若上传文件，请求方式为post，且表单添加一个属性

enctype="multipart/form-data"

（3）<button></button>

1）按钮基本格式：

eg：

2）按钮图像基本格式：

eg：

常用属性

属性	值	描述
disabled	disabled	禁用该按钮。
type	button、submit、reset	规定按钮的类型。
value	text	规定按钮的初始值。
name	button_name	规定按钮的名称。

（4）<select></select>

<select>用于定义下拉列表。

基本格式：

</select>

eg:

注意：默认将第一项选为被选项。

select常用属性

属性	值	描述
disabled	disabled	禁用该下拉框。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
size	number	规定下拉列表中可见选项的数目。

option常用属性

属性	值	描述
disabled	disabled	禁用该下拉框。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。