超精简HTML知识整理

最新推荐文章于 2024-05-21 20:57:05 发布

有个店小二～

最新推荐文章于 2024-05-21 20:57:05 发布

阅读量611

点赞数

分类专栏：超精简HTML知识整理文章标签： html

本文链接：https://blog.csdn.net/m0_46574597/article/details/119061756

版权

超精简HTML知识整理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML（超文本标记语言，Hyper Text Markup Language）

1.W3C标准

word wide web consortium(万维网联盟）
中立性技术标准结构
结构化标准语言（html，xml）
表现标准语言（css）
行为标准（dom，ecmascript）

2.html基本结构

网页基本标签：<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素）为自闭合标签，如<hr/>（水平分割线标签），中的/意为用来关闭空元素。
标题标签： <h1>,</h1>~<h6> ,</h6>：一级->六级标签
段落标签：<p>
换行标签：<br>（自闭合标签），把该标签放在行末尾起到换行效果。
字体样式标签：粗体<strong></strong>,斜体<em></em>
特殊符号：注释—、空格—&nbsp；、小于号—&lt；
大于号—&gt；、版权符号—&copy；

2.1图像标签：

2.2链接标签：

<a herf="path(必填)“ target=”目标窗口位置“>链接文本或者图像\</a>

href：表示要跳转到哪个页面
target：表示链接在哪个窗口打开——可取值为_self：在本标签页打开，_blank:在新建标签页打开。

2.3超链接

①、页面间链接：从一个页面链接到另一个页面
<a href="1.我的第一个网页.html" taget="_blank" \>点我跳转到页面一<\/a>

也可以把链接放到图片中，点击图片链接到另一个网页
<a img src="../resources/images/1.jpg alt="叮当猫" title="叮当猫" \/a>

②、锚链接：1、需要一个锚链接。2、跳转到标记（#）
<a href="#top" \>跳转<\/a>
//利用#生成锚标记，跳转到某个name=“top"的链接标签的位置
<a href="4.链接标签.html#down>跳转<\/a>
//点击跳转，跳转到4.链接标签网页中<a name=“down”>底部</a>的标签位置，跨页跳转。
注：<a name"down”>表示该标签的名字为down，相当于对该标签的标记
锚标签使用步骤：先对一个链接标签<a>用name做一个标记，再用另一个链接标签# + name的值跳转到那个标签所在位置，注意跳转之间必须是链接标签跳转到另一个链接标签，否则无效。

③、功能性链接：

邮件链接：mailto：
<a href="mailto:1010927831@qq.com>点击联系我</a>
QQ链接

2.4行内元素和块元素

注：行内元素可以包含在块元素中，反正则不然

块元素：无论内容多少，该元素独占一行；-----（p、h1-h6…）会自动换行的标签；
行元素：内容撑开宽度，左右都是行内元素的可以排一起；（a、strong、em）不会自动换行的标签；

2.5列表

有序列表标签：应用范围—试卷、问答…
<ol>
<li\>... </li>
...
</ol>
无序列表标签：
<ul>
<li>...</li>
...
</ul>
自定义列表标签：应用范围—公司网站底部…
<dl> dl:标签（最外层包裹）
<dt>...</dt> dt：列表名称
<dd>...</dd> dd:列表内容
<dd>...</dd>
</dl>

2.6表格标签

<table>：表格 <tr>：行 <td>：列（列包括在行中）
<table border="5px>"
<tr> 表示表格中的第一行
<td>...</td> 表示表格中的第一行第一列
...
</tr>
<tr> （表示表格中的第二行）
<td>...</td>（表示表格中的第二行第一列）
</tr>
</table>
colspan—跨列
<td colspan="4">...</td> //在一行中跨了4列
rowspan—跨行
<td rowspan="2">...</td> //在一列中跨了2行

2.7媒体元素标签

视频和音频
src：资源路径（必填）
controls：控制条（必填）
muted autoplay：自动播放
视频：<video src="..." controls muted autoplay>...</video>
音频：<audio src="..." controls muted autoplay>...</video>

2.8页面结构分析

header：标题头部区域的内容（用于整个页面或页面的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
section：web页面中的一块独立区域
article：独立的文章内容
aside：相关内容或应用（常用于侧边栏）
nav：导航类辅助内容

2.9iframe内联框架

<iframe src="path" name="mainFrame" width=" " height=" ">...</iframe>

src：地址
name：框架标识名
width：宽
height：高

2.10初识表单post和get提交

<form action="1.我的第一个网页.html" method="post(或写get)"></form>

action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get-----提交方式

2.11表单元素格式

<input type=".." name=".." value=".." />

type：指定元素的类型，text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为text
name：指定表单元素的名称，表单内的所有元素都需要一个name属性，否则无法提交
value：元素的初始值。type为radio时必须指定一个值
size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小字符为单位。对于其它类型，宽度以像素为单位。
maxlength：type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否被选中
注：表单中元素提交的格式为key=value键值对形式
以下为常用的表单元素格式举例：
1、文本输入框：<input type="text" name="username" value="小二" maxlength="8" size="30"/>
2、密码输入框：<input type="password" name="pwd"/>
3、单选框按钮：<input type="radio" value="boy" name="gender" checked/>男
<input type="radio" value="girl" name="gender" />女
4、多选框：<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="sleep" name="hobby" checked/>敲代码
5、按钮：<input type="button" name="btnl" value="点击"/>
6、下拉列表：
<select name="列表名称">
<option value="china">中国</option>
<option value="us" selected>美国</option>
......
</select>
- select:下拉列表外部标签
- option:内部子选项
- selected：表示被选中
  7、文本域：<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
- cols：列值
- rows：行值
8、文件域：<input type="file" name="files"/>
9、邮件验证：<input type="email" name="email"/>
10、url验证：<input type="url" name="url"/>
11、数字验证：<input type="number" name="number" max="100" min="0" step="1"/>
- max：最大值
- min：最小值
- step：步长
12、滑块：<input type="range" name="vioce" min="0" max="100" step="1"/>
13、搜索框：<input type="search" name="search"/>
14、提交表单：<input type="submit" value="提交"/>
15、重置表单：<input type="reset" value="重置"/>

2.12表单的应用（扩充）

1、隐藏域：hidden<input type="..." hidden/>
2、只读：readonly <input type="..." readonly>
3、禁用：disabled <input type="..." disabled/>

增强鼠标可用性：

<label for="mark">你点我试试</label>
<input type="text" id="mark".>
注：当点击文字时，会自动跳转到for所对应的id值的标签中

2.13表单初级验证

placeholder：提示信息，可用在所有文本类型属性组件中
required：非空判断，可用在所有文本类型属性组件中
pattern：正则表达式，用于判断输入的值是否符合自己定义的输入规则（pattern的值）

有个店小二～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
超精简HTML知识整理

HTML（超文本标记语言，Hyper Text Markup Language）1.W3C标准word wide web consortium(万维网联盟）中立性技术标准结构结构化标准语言（html，xml）表现标准语言（css）行为标准（dom，ecmascript）2.html基本结构网页基本标签：<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素）为自闭合标签，如<hr/>（水平分割线标签），中的/意为用
复制链接

扫一扫