HTML标签知识点总结

最新推荐文章于 2022-09-19 08:44:05 发布

3379

最新推荐文章于 2022-09-19 08:44:05 发布

阅读量706

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weizheng751676/article/details/122575802

版权

HTML

超文本标记语言，用来书写网页

html定义的网页内容不只局限于文本，还可以显示图片、超链接、视频、音频等

1、网页三剑客：html、css、js

html—>网页里有什么？定义内容

css—>网页长什么样？定义外观样式

js—>网页可以做什么？定义行为动作

2、html5的基础模板

<!-- 
    文档声明，不是标签！
 -->
<!DOCTYPE html>
<!-- 网页整体标签！ -->
<html lang="en">
    <!-- 网页头部 -->
    <head>	
        <!-- 中文编码 -->
        <meta charset="UTF-8">
        <!-- 网页名字、网页标题 -->
        <title>我的第一个网页</title>
    </head>
    <!-- 
        网页主体，网页中显示的所有内容，书写在body内部！
     -->
    <body>
        HelloWorld!
    </body>
</html>

3、常用标签

(1)双标签

标题标签：h1-h6
段落标签：p
文本格式化标签：

hr（分割线） b（加粗） i（倾斜字体） sup（上标标签） sub（下标标签） font（字体格式化标签）

文本格式化标签属性：

书写规范：属性名=“值”

width：长短

align对齐方式： left、right、center

color：颜色英文颜色随机色号

size：粗细取值1-7

超链接标签：a

href：必备属性

target：设置超链接的打开方式，默认_self刷新当前页面。_balnk在新窗口打开

title:鼠标悬停在超链接上时，出现的文本提示，也是增强用户体验

路径分为两种：

绝对路径：网址链接字符串就是绝对路径

相对路径：可以参照当前目录文件夹中的路径就是相对路径

/ 进入下一级

…/ 返回上一级

同级文件直接写文件名

音频标签：audio

source：单标签，在audio内部，用于引入音频资源

controls：是出现音频播放的控制面板

loop：循环播放

muted：自动静音

视频标签：video

source：单标签，在video内部，用于引入视频资源

controls：是出现音频播放的控制面板

loop：循环播放

muted：自动静音

width：宽度

height：高度

列表标签：

有序列表：

<ol type="I">
	<li>我是有序列表1</li>
	<li>我是有序列表2</li>
	<li>我是有序列表3</li>
</ol>

ol的type属性：
1----阿拉伯数字
a----小写字母
A----大写字母
i----小写罗马数字
I----大写罗马数字

无序列表：

<ul type="square">
	<li>我是无序列表1</li>
	<li>我是无序列表2</li>
	<li>我是无序列表3</li>
</ul>

ul的type属性：
circle 空心圆
square 小黑方形、黑方块

表格标签table:

<table border="表格边框和单元格之间的分界线" cellspacing="单元格与单元格之间的间隙" cellpadding="单元格与自身内容之外的间隙"
        width="表格整体变宽" height="表格整体变高" bgcolor="背景色"
        bordercolor="表格边框及分割线颜色">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tr align="center">
            <td>小虫</td>
            <td>20</td>
            <td>男</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小花</td>
            <td rowspan="2">30</td>   //rowspan行合并，删除这个单元格同一列位置上需要合并的单元格
            <td bgcolor="purple" colspan="2">男</td>   //colspan列合并，设置给th或者td，列合并，删除这个单元格所在这一行后面合并的单元格
            <!-- <td>男</td> -->
        </tr>
        <tr bgcolor="green">
            <td>小兰</td>
            <!-- <td>36</td> -->
            <td>男</td>
            <td align="right">喜欢小花</td>
        </tr>
    </table>
</body>

表单标签form:

作用：收集数据、提交数据，而且是一并提交：登录、注册

<form action="表单提交数据的地址" method="数据提交的方式（get、post）">
	<!--
		表单收集数据的标签：input、select...option、textzrea
	-->
	<input type="submit" value="提交表单">
</from>

当点击了表单内部的submit提交按钮后、表单就将内部收集到的所有数据以method的指定的方式，提交到action的地址上去

input标签：
type：属性标识input收集数据的方式：
	text 文本输入框
	password 密文输入框
	radio 单选框
	checkbox 复选框
	file 文件上传域
	button 普通按钮
	submit 提交按钮
	reset 重置按钮
	hidden 隐藏域
	date 日期选择框
	
name属性是为收集、提交的数据设置关键字的属性！
value属性是收集的数据值！

输入框、文件上传域、日期可以不给定value，因为可以输入或者选择，但是单选框及复选框想要进行数据提交，必须把value的值绑定在标签内部！
name就是数据传递的名字，而value才是数据的值！

placeholder占位符属性，针对输入框提供的占位文本，用于提示用户输入信息的！
checked属性，针对单选框、复选框提供的默认选中！
disabled，禁用


<form action="表单提交数据的地址" method="数据提交的方式（get、post）">
	 学历：
            <select name="degree">
                <option value="专科">专科</option>   
                //value里面的值才是真正传递的内容  option里的文本只是为了在页面中显示内容！
                <option value="幼儿园">红太阳幼儿园</option>
                <option value="本科" selected>本科</option>
                //selected属性设置给option标签，可以实现默认选中！
                <option value="外婆交大">外婆交大</option>
            </select><br> 
         个人简介：   //textarea文本域  name为数据提供关键字 rows行数限制文本域高度   cols列数 限制文本域宽度    超过指定行数，出现纵向滚动条    超过指定列数，
            <textarea name="mark" cols="30" rows="10" style="resize: none;"></textarea><br>
         普通按钮：
            <input type="button" value="普通按钮"><br>
         重置按钮：
            <input type="reset" value="重置按钮"><br>
        <input type="submit" value="提交表单">
</form>

(2)单标签

换行标签 br

图片标签 img：用于承载图片显示

可选属性：width：设置图片的宽度

height：设置图片的高度

alt：图片加载失败时，出现的文本占位，目的增强用户体验

title：鼠标悬停时，出现的文本介绍，目的增强用户体验

(3)框架集标签frameset

可以将多个页面集成到一个页面中，进行同时显示

<frameset rows="100, *" border="1" bordercolor="red">
	<frame src="top.html" noresize name="top">
	<frameset cols="200, *">
		<frame src="left.html" name="left" noresize>
		<frame src="right.html" name="right">
	</frameset>
</frameset>

注意：

*frameset与body不能同时存在

*frameset的子标签可以是frame，也可以是frameset，但是frame的父级只能是frameset

*frameset的属性：

rows，限制子标签的高度，可以给具体的值，也可以给*通配剩余量

cols，限制子标签的宽度，可以给具体的值，也可以给*通配剩余量

border，调整多个frame之间分割线的粗细

bordercolor，设置分割线的颜色

*frame的属性：

src，引入集成的页面路径

noresize，在集成完毕之后，不允许拉伸页面尺寸

name，为当前的frame页面设置一个名称，后期在改变内容时，可以指定到底是哪一个页面要改变！

3379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签知识点总结

HTML超文本标记语言，用来书写网页html定义的网页内容不只局限于文本，还可以显示图片、超链接、视频、音频等1、网页三剑客：html、css、jshtml—>网页里有什么？定义内容css—>网页长什么样？定义外观样式js—>网页可以做什么？定义行为动作2、html5的基础模板<!DOCTYPE html><html lang="en">
复制链接

扫一扫