HTML5总笔记

Posted 2021-04-04 掘安攻防实验室

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5总笔记相关的知识，希望对你有一定的参考价值。

HTML5总笔记（一）

今天给大家介绍的是前端页面其中之一的语言：HTML。HTML5是HTML的最新版本。如不懂请联系白芈奈QQ：1076091215.作为笔记就不可能从头到尾的告诉你HTML是什么？只是在你编写代码时，如果忘记代码或者其作用翻出来让你查看。作为一个喜欢计算机的人，永远都不可以只限于看一个教程或者视频。需要你自己不断的百度，不断的探索，而本站只是帮助你学到语言的一个助力罢了。本文带有笔记的文件，可点击下载，离线观看教程。

教程链接

http://www.vkxx.top/content/uploadfile/201804/4c141524905500.docx

html5常用标签

html代码讲解一：

一、p、hn、br标签

1．<p> </p> ：写一行，一段。

2． ：注释。

3． <br /> ：一行，一段（在文字后面直接加）。

4．<h1> </h1> ：文字中的最大字符（自动换行）。

5． <h5> </h5> ：文字中的最大字符（自动换行）。

二、b、i、u、s、sup、sub标签

1．<b> </b>：粗体（1）

2．<i> </i>：斜体（1）

3．<u> </u>：下划线（1）

4．<s> </s>：删除线（1）

5．<sup> </sup>：上标（¹）

6．<sub> </sub>：下标（₁）

7．<bdo> :定义文本显示方向，内衣dir属性，只能取值ltr（正序）或rtl（倒序）

实例：

三、列表标签

1．有序列表

1. <ol type=”1”> ；编号（默认属性：1）

2. <li> </li> ：1.

3. <li> </li> ：2.

4. </ol>

5. 属性例如：1，a，一...

2．无序列表

l <ul type=”square”> : 项目符号（默认属性：实圆）

l <li> </li> ：实圆

l </ul>

l 属性例如：实圆，实正方形，空圆...

1．定义列表（用于内容解释）

<dl>

<dt> </dt> ：一问

<dd> </dd> ：一答

</dl>

二、Pre、html转义、abbe标签的使用

1．预定义文本标签pre

<pre> ：保留空格和换行符。

Avuhuiah

搜死

Shv

</pre> ：全部保留并显示。

2．对html转义

大于（<）：<（代码）。

小于（>）：>（代码）。

空格（）：（代码）。

引号（“）："（代码）。

版权号：©（代码）。

< boby > ：显示为 <boby>。

3．缩写说明

：显示：我是谁？（移动至文字，上方显示随机。）

三、Table标签

1. Table ：表格

2. <caption> ：表格标题（默认显示上方）

3. <th> </th> ：表格页眉的单元格（默认加粗）

4. <tbody> ：表格的主体

5. <thead> ：表格头

6. <tfoot> ：表格脚

7. border=”1px” ：边宽

8. cellpadding=”1px” ：文字内边距

9. cellspacing=”1px” ：边宽宽距

10. <td> </td> ：表格

11. <td colspan=”2”> </td> ：合并两行（横）单表格

12. <td rowspan=”2”> </td> ：合并两列（竖）单表格

13. <caption align=”bottom”> ：标题显示表格下方

< table >

</table>

表格标签一般什么情况下使用？

主要用于规则的数据显示

适当的可以在表单页面中使用

使用表格标签进行页面布局的缺点：

代码量比较大，页面浏览速度比较慢

层次结构比较复杂，不易于维护和改版

不利于搜索引擎搜索查找数据

强调：要对网页进行布局，推荐使用div+css，严禁使用表格进行布局页面。

四、a标签、img标签

1．a标签

1．a ：超链接

2．<a href=” ” target=”_self”>

：默认当前页面跳转

3．<a href=” ” target=”_parent”>

：在上一级页面进行跳转

4．<a href=” ” target=”_blank”>

：打开新的页面

5．<a href=” ” target=”_top”>

：在底层页面打开

6．<a href=” ” target=” name ”

: 在自己设置的框架名当中打开

7．<a href=” ”><img src=” ”></a>

<a>超链接中可插入图片

：显示百度（点击百度，超链接打开）

2．Img标签

Src：路径

相对路径适用于同一路径，网页于图片在一个地方（文件夹）。

.../ ：上级路径

.../.../ ：上上级路径

（网页和图片不同地方，要调用先退出网页的上级或上上级，在同一级中进行选择下级或下下级找到图片路径。）

<img src=” 图片名 ”> ：同一路径

<img src=” 文件夹名称/图片名 ”> ：相对路径

五、frameset内嵌框架集

frameset：定义如何将窗口分割为框架

创建框架网页的步骤：

创建各个子窗口对应的html文件

创建整个框架文件，分别引用子窗口文件

创建框架页面的基本语法：<frameset>

cols 规定某【列】占据平面的面积（竖）

rows 规定某【行】占据平面的面积（横）

border 框架/边框的属性

注意：<frameset></frameset>标签不能与<body></body>标签同时使用。

除非你在<frameset>中使用<nooframes>标签。

<frameset>框架集标签中的常用属性

pixels ：左右两个框架占多少

% ：占浏览器百分百

* ：剩余部分

例如：水平框架

<html>

</frameset>

</html>

六、iframe内嵌框架

frameborder=”0” /”1” ：规定是否显示框架周围的边框

Name=”frame_name” ：规定iframe的名称。

Scrolling=”yes" / ”no” / ”auto” ：规定是否在iframe 中显示滚动条。（yes显示滚动条）（no不显示滚动条）（auto当内容超过就显示）

Src=”URL” ：规定在iframe中显示的文档的URL。

Iframe语法：

<body>

Frameborder =”边框” scrolling=”yes” />

</body>

七、常用表单元素（1）

form：表单

属性：

2) method（传值方式） [get：数据小类型（ip等）]

[post：数据大类型（安全性高）]

3) enctype ：用于指定表单数据的编码方式

application/x-www-form-urloncoded:默认的编码方式，将表单控件中的值处理成URL编码方式。

mutipart/form-data:以二进制的方式来处理表单数据。

text/plain:当表单的action属性值为mailto:URL的形式时使用。

八、常见表单元素（2）

1．<input type=”text” name=”txtUseName”/>

：单行文本框（一般类型）

2．<input type=”password” name=”txtPwd”/>

：密码输入框（密码类型）

3．<select name=" "> （常见表单元素3详细介绍）

：列表菜单（下拉菜单）

<option>列头</option> ：列表菜单（列头）

<option> </option> ：列表菜单（内容）

</select>

4．<input type=”radio” name=”sex” /> 男

<input type=”radio” /> 女

：单选框（单项按钮+单选项目）

sex:单项

例题：

u <input type="radio" name="sex" id="cmd"/> <label for="cmd">男<label>

u <input type="radio" name="sex" id="cncmd" /> <label for="cncmd">女<label>

5．<input type=”image">

：图像域（width和height属性）

6．<input type=”file”/>

：选择文件（按钮）

7．<input type="checkbox"/>

：复选框

8．<input type="reset"/>

：重置按钮（所有选择清空）

<textarea ></textarea>（表单元素3详细介绍）

9．

：文本区域

cols=” ” ：长

rows=” ” ：宽

10．<input type="submit"/>

11．<input type="button" value=” 我是按钮”/>

：按钮（表单元素3详细介绍）

HTML5 <input> 标签

标签	描述
<form>	定义一个form表单
<input>	定义一个 input 域

以上是关于HTML5总笔记的主要内容，如果未能解决你的问题，请参考以下文章

Div & Svg可视化探索笔记

[html5] 学习笔记-html5增强的页面元素