HTML全部笔记：

最新推荐文章于 2024-03-09 19:58:04 发布

凉风有信、

最新推荐文章于 2024-03-09 19:58:04 发布

阅读量286

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/qq_52207728/article/details/116500341

版权

HTML全部笔记：

HTML基础：

<hr>/<hr/>:为水平线，可通过CSS改变样式
可在body中加bgcolor=""设置颜色

<table></table>	表格
<tr></tr>	行
<td></td>	单元格
这三个为逐层包含的td在tr内,tr在table内
在添加一行和删除一行时都要弄完整；
<th></th>定义表头单元格，会居中加粗
<caption></caption>表格标题，居中显示，需紧靠在table标签后
<thead></thead>表格头部
<tbody></tbody>表格主体
<tfoot></tfoot>表格尾部
<！———这三个标签对结构没有影响，可以通过设置CSS来改变表格外观-->

基础语法：
<table>
    <caption>……</caption>
    ……
    <thead>
    	<tr>
        	<td>……</td>
        	<td>……</td>
    	</tr>
    </thead>
    <tbody>
    	<tr>
        	<td>……</td>
        	<td>……</td>
    	</tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td>……</td>
        	<td>……</td>
    	</tr>
    </tfoot>
</table>

无论怎样修改，的都在表格头部，的都在表格主体,的在表格尾部，与书写的先后顺序无关！

表格属性：

属性	值	描述
width	pixels、%	规定表格的宽度
align	left、center、right	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb(x,x,x)、#xxxx、colorname	表格的背景颜色
cellpadding	pixels、%	单元边沿与其内容之间的空白（单元格与内容）
cellspacing	pixels、%	单元格之间的空白(格与格之间)
frame	属性值	规定外侧边框的哪个部分是可见的
rules	属性值	规定内侧边框的哪个部分是可见的

不设置表格宽度时，表格宽度取决于内容的宽度。

外边框frame属性：

值	描述
void	不显示外侧边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
lhs	显示左边的外侧边框
rhs	显示右边的外侧边框
box	在所有四个边上显示外侧边框
border	在所有四个边上显示外侧边框

内边框 rules 属性：

值	描述
none	没有线条
groups	位于行组和组之间的线条
rows	位于行之间的线条
cols	位于列之间的线条
all	位于行和列之间的线条

行标签属性：

属性	值	描述
align	left、center、right、justify、char	行内容的水平对齐
valign	top、middle、bottom、baseline	行内容的垂直居中
bgcolor	rgb(x,x,x)、#xxxx、colorname	行的背景颜色

颜色设置有三种方式：直接用颜色名称、用rgb的方式、用16进制的方式（一定要加#）

标签属性：

属性	值	描述
align	left、center、right、justify、char
valign	top、middle、bottom、baseline

、、内容的水平对齐、、内容的垂直对齐

表格跨行列：

跨列属性colspan:在相应td标签内书写colspan即可，俩个单元格的内容需一致，且使用属性后要删除多余单元格。

跨行属性rowspan:在相应td标签内书写rowspan即可，俩个单元格的内容需一致，且使用属性后要删除多余单元格。

表格嵌套：

1.完整表格结构。

2.一定要放在标签内。

注意：

pre标签会保留输入文字的所有格式！

td标签内也可设置相应属性值！

尽量少使用表格嵌套，表格跨行列！

网页布局中table标签中一般不用border属性！

DOCTYPE文档类型声明:

声明必须放在HTML文档第一行

声明不是HTML标签

网页编码设置：

问题：

当网页显示出现乱码时

解决：

在标签之间添加：

		<meta http-equiv="Content-type" content="text/html;charset=utf-8" />

这段话是告诉网页的内容使用什么语言和什么编码形式

国内一般使用utf-8或gb2312这两种编码形式

文字和段落：

段落标签<p>，<h1>~<h6>来表示标题标签,换行标签<br/>

段落标签align属性值：

值	描述
left	左对齐内容
right	右对齐内容
center	居中对齐内容
justify	对行进行伸展、这样每行都可以有相等的长度

在编辑器中敲入空格对网页显示不起任何作用，在编辑器中敲入 &nbsp ;表示空格，可以用

来保留编辑器中的形式！

<hr/>为水平线，可以通过CSS样式来改变水平线样式
<i></i>、<em></em>文字斜体
<b></b>、<strong></strong>加粗
<sub></sub>下标、<sup></sup>上标//这里的上标和下标是针对文字的基准线上移和下移

特殊符号<可去CSDN上面查阅>：

属性	显示结果	描述
&lt ;	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&reg ;	®	已注册
&copy ;	©	版权
&trade ;	™	商标
&nbsp ;	空格	不断行的空白

列表标签：

无序列表：

<ul>
    <li></li>
    	……
    <li></li>
</ul>
<!--在无序列表中没有先后顺序，每列前边有一个圆点·符号-->
在<ul>里面可添加相应的type属性值：
    值										描述
   disc										圆点
   square									正方形
   circle									空心圆

有序列表：

<ol>
    <li></li>
    	……
    <li></li>
</ol>
在<ol>里面可添加相应的type属性值：
    值										描述
    1										数字：1，2……
    a										小写字母
    A										大写字母
    i										小写罗马字母
    I										大写罗马字母

定义列表：

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
   ……
</dl>
<!--定义标签内可以有多个<dt>,对于每一个<dt>可以有多个<dd>，且<dd>和<dt>是同级标签，且使用这两个标签时一定要写在<dl>标签内-->
	在定义列表中会进行自动的缩进，即列表项描述前边会自动形成空格

图像与超链接标签：

图像标签：

语法：<img src="" alt="" ……  />

img属性：

属性	值	描述
src(必写)	URL	显示图像的URL(路径)
alt	文字	图像替代文本，当网速慢的时候可代替图像显示在网页中
height	数值和百分比	图像的高
width	数值和百分比	图像的宽

路径：

相对路径：图片相对做的网页的路径。

绝对路径：从盘服开始写起，直到找到文件。

注意：如果图片与网页文件在同一目录下，直接引用图片名即可，如果图片在上一级目录中就用：……/图片名/，如果图片在下一级目录中那么路径为：文件夹名/图像名/。

超链接标签：

语法：
	<a href="" >内容</a>
	href:链接地址，可以是内部链接或外部链接。
	链接地址可以是网站（站外链接，一般使用绝对路径），也可以是文件。
	也可以是空链接：<a href="#">空链接</a>

属性：

属性	描述
href	链接地址
target	链接的目标窗口 _self（当前窗口内）、_blank（创建新窗口）、_top、_parent
title	链接提示文字
name	链接命名

注意：当不设置target时默认为当前窗口内，title属性是鼠标放上去时会有提示文字！

锚链接（同一页面）：

可通过name跳转到相应的锚

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="……" name="锚名1">内容</a><!--name定义的锚名的位置即为要跳转的位置-->
	xxxxxxxx
	xxxxxxxxxxxxxxxxx
<a href="……" name="锚名2">内容</a>
	xxxxxxxx
	xxxxxxxxxxxxxxxxx

总结：1.定义锚的位置和锚名。

2.设置寻找锚的链接。

不同页面：

网页1：<a href="网页名称#锚名">……</a>
网页2：<a name="锚名">……</a>

邮箱链接：

电子邮件链接：

<a href="mailto:邮箱地址" >……</a>
<!--这个邮箱地址一定要是完整的，如果想成功打开邮箱，需要在本机电脑上，已装有邮箱软件-->

文件下载：

<a href="下载文件的地址">……</a>
<!--如果是地址就打开地址，如果是文件就就直接下载-->

HTML表单：

语法：

<form>
    表单元素
</form>

form标签：

属性	值	描述
action	URL	提交表单时向何处发送表单数据
method	get(保密性差：会将信息暴露在URL后面)、post(保密性强一些，不会暴露)	设置表单以何种方式发送到指定页面
name	form_name	表单的名称
terget	_blank、_self、_parent、_top	在何处打开action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	在发送表单数据之前如何对其进行编码

注意：

GET:使用URL传递参数，对所发送信息的数量也有限制，一般用于信息获取

POST：表单数据作为HTTP请求体的一部分，对所发送信息的数量无限制，一般用于修改服务器上的资源

表单本身不可见。

form标签中，以下标签实现表单元素添加：

标签	描述
<input>	表单输入标签
<select>	菜单和列表标签
<option>	菜单和列表项目标签
<textarea>	文字域标签
<optgroup>	菜单和列表项目分组标签

input标签：

语法：

<input type="类型属性"  name="名称" ……/>

Type属性值	描述
text	文字域
password	密码域
file	文件域
checkbox	复选域
radio	单选域
button	按钮
submit	提交按钮
reset	重置按钮
hidden	隐藏域
image	图像域

input标签的文本域：

语法：

<form>
    <input type="text" name="……" …… />
</form>

属性	描述
name	文字域的名称
maxlength	指用户输入的最大字符长度
size	指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符，默认为20
value	指定文本框的默认值（文本框内自带信息）
placeholder	规定用户填写输入字段的提示

name用于表单元素命名，数据处理时，通过name名称来区分。

input的文件域：

语法：

<form>
    <input type="file" name="……" />
</form>
<!--不同浏览器显示样式不同-->

单选框：

语法：

<form>
    <input type="radio" name="……" value="……" checked />
</form>

注意：在单选框的同一组的name值要相同，只有相同时才能单选！但复选框的name属性不受限制，无论name值是否相同都可多选，但在实际开发中name值要设置相同，为的是传给服务器时能让服务器知道是那一组的复选框！value值是用来传到服务器中的

如：

男<input type="radio" name="sex1" value="男" checked/>
女<input type="radio" name="sex1" value="女" />

多选框（复选框）：

语法：

<form>
    <input type="checkbox" name="……" value="……" checked/>
</form>

input标签的按钮：

作用：按钮可以激发提交表单的一个动作，可以在用户修改表单的时候将表单恢复成初始状态还可以按照程序的需求发挥其他作用！

语法：

<input type="button" name="……" value="……"/>
<input type="submit" name="……" value="……"/>
<input type="reset" name="……" value="……"/>
<!--value属性可以改变按钮上的内容，name是给按钮一个名字，但这个不会显示-->

input标签的图像域（图像提交按钮）和隐藏域：

图像域：

语法：

<input type="image" name="……" src="imageurl" />
<!--src属性为图像的路径，在图像域中的不仅仅是一张图像，还有提交功能-->

隐藏域：

语法：

<input type="hidden" name="……" value="……"/>
<!--隐藏域作用：网页上一些信息不想让用户看到但还要传给到服务器-->

select标签：

下拉菜单和列表标签：

语法：

<select>
    <option value="……">选项</option>
    <option value="……">选项</option>
    ……
</select>
<!--在选项比较多的时候用下拉菜单-->

select标签属性：

属性	描述
name	设置下拉菜单和列表的名称
multiple	设置可选择多个选项
size	设置列表中可见选项的数目

注意：如果要用下拉菜单时size和multiple属性就不要设置，如果想使用列表形式那么就添加size属性，如果这个列表需要多项选择时就再添加一个multiple属性！

option标签属性：

属性	描述
selected	设置选项初始选中状态
value	定义送往服务器的选项值

分组下拉菜单和列表标签：

语法：

<select name="">
    <optgroup label="组1">
        <option value="……">选项</option>
        <option value="……">选项</option>
        ……
    </optgroup>
    <optgroup label="组2">
        <option value="……">选项</option>
        <option value="……">选项</option>
        ……
    </optgroup>
	……
</select>
<!--lable是为了给分组命名-->

textarea文本域标签：

语法：

<textarea name="……" rows="……" cols="……">
    内容……
</textarea>

属性	描述
name	设置文本区的名称
placeholder	设置描述文本区域预期值的简短提示
rows	设置文本区的可见行数
cols	设置文本区的可见宽度

04-网页布局：

div：是一个区块容器标记，

之间是一个容器，可以包含段落、表格、图片等各种HTML元素。为块级标签。

span：没有实际意义，为了应用样式。为行内标签。

——块级标签：占据一行，换行。div、ul、ol、li、dl、dt、dd、h1~h6、p、form、hr……

——行内标签：在一行，不换行。b、em、img、input、a、sup、sub、textarea、span……

标签嵌套规则：

<!--块级元素可包含行内元素和某些块级元素-->
<div><h1></h1><a href="……"></a></div>

<!--行内元素不能包含块级元素，只能包含其他行内元素-->
<span><em></em></span><!--正确-->
<a href="……"><h1></h1><div></div></a><!--错误-->

<!--块级元素不能放在<p>标签内-->
<p><div>111</div><h1>222</h1></p><!--错误-->

<!--特殊块级元素只能包含行内元素，不能再包含块级元素，如：h1~h6、p、dt-->

<!--块级元素与块级元素并列，行内元素与行内元素并列-->
<div><h1></h1><p></p></div><!--正确-->
<div><span></span><a href="……"></a></div><!--正确-->
<div><h1>666</h1><span>888</span></div><!--错误-->

注意：当标签嵌套出现错误时，系统会自动排列，但不会按编写者的意愿排列。

凉风有信、

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML全部笔记：

HTML全部笔记：HTML基础：<hr>/<hr/>:为水平线，可通过CSS改变样式可在body中加bgcolor=""设置颜色<table></table> 表格<tr></tr> 行<td></td> 单元格这三个为逐层包含的td在tr内,tr在table内在添加一行和删除一行时都要弄完整；<th></th>定义表头单元格，会居中加粗<caption>
复制链接

扫一扫