A HTML5基础知识（标签）

abc0x

已于 2022-02-17 09:03:34 修改

阅读量366

点赞数

分类专栏：前端文章标签： html5 html 前端

于 2022-01-12 20:50:28 首次发布

本文链接：https://blog.csdn.net/weixin_44145887/article/details/122461070

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.HTML：

1)超文本标记语言，用来描述网页的一种语言。
2) HTML页面包括：HTML标签和文本内容
3)必须要明确HTML版本
4)<head></head>标签内的内容不会出现在页面上
5）搜索引擎：

搜索引擎关键字
<meta name="keywords" content="青岛，前端">
搜索引擎描述
<meta name="descrption" content="小白学习，前端内容">

6)<title></title>标签内的内容出现在新标签页标题
7)<body></body>标签内包含了所有页面可见的内容

2.HTML常用标签

2-1基本标签

1）标题标签
<h1></h1> 字体最大
<h6></h6>字体最小
2）段落标签
<p>内容</p> 内容前后隔开一段
3）换行标签
<br>
4）水平线标签
<hr> 划出一条水平线

2-2 字体格式标签（行级标签，不会自动换行）

1）粗体:<b></b>
2）斜体：<i></i>
3）比普通文本更小的字体:<small></small>
4）删除字体:<del></del>

2-3 超链接
1） <a href ="网址">淘宝</a>
2）书签：

<div id="tips">提示内容</div>
<a href="#tips">跳到提示部分</a>

2-4图片
1）<img src ="img/gril.jpeg" title="图片说明" width="200px" heigh = "300px">

绝对路径：从项目根路径开始，根目录用/表示
相对路径：从当前文件开始，向上一级目录用 …/ 表示
eg：…/aaa…/aa…/a.txt

2-5列表
1）无序列表：

<ul>
<li>内容1</li/>
<li>内容2</li>
<li>内容3</li>
</ul>

2）有序列表

<ol>
<li>内容1</li/>
<li>内容2</li>
<li>内容3</li>
</ol>

2-6表格标签

border-边框属性，控制边框粗细，0-表示不显示边框
cellpadding 指定单元格内容与单元格边界之间的空白距离的大小
cellspacing 指定表格各单元格之间的空隙，参数值是数字，表示单元格间隙所占的像素点数

2-7表单标签

<form action="" method="">

form表单标签
action属性表单数据的提交到后台服务的地址
method属性比较表单的方式get/post
提交form表单，会刷新数据。当提交form表单时，会触发form的action事件。
用ajax提交请求，不会刷新页面

例如：

<form action="u?method=queryStaffList" method="POST">
     //name属性，在servlet里面，用req.getParameter("id")，会得到标签的value值 
	<input type="text" name="id" placeholder="请输入工号" class="d">
	<input type="text" name="staffName" placeholder="请输入员工姓名" class="d">
	<button type="button" class="layui-btn" onclick="$('form').submit();">查询</button>
</form>
//点击查询按钮，提交form表单，触发queryStaffList方法

2-8 button按钮：

button的type默认是submit

1.当button里面有type属性时，无法自动提交事件，需要使用onclick提交form表单
<form action="s?method=listPage" method="POST>
	<button type="button" class="layui-btn" onclick="$('form').submit();">查询</button> 
</form>
2.当没有type属性时，默认button的type为submit，不需要onclick。使用button的默认type会导致页面自动刷新
<button >查询</button>


1）文本框
```html
<input type="" value="">
type类型：text文本框、password密码框

2）单选框、复选框

<input type="" name="" title="" value="">
type类型：radio单选框、checkbox复选框
 其中，单选框和复选框的name属性必须相同才能控制单、双选

3）下拉框

select选项下的option无法触发onclick事件。可以在select里加onchange。
但是要注意相同的value值，无法触发onchange事件

<select>
   <option selected="selected">内容1<option>  <!--selected默认选择-->
   <option>内容2<option>
   <option>内容3<option>
</select>

示例：
原代码：在option中使用onclick
注意：function函数参数不要加数据类型，function方法间不要加；

select name="depart" lay-verify="required" class="d" onchange="jumpadd();">
			<option value="">请选择部门</option>
			<option id="d1" onclick="add(1)">研发部</option>
			<option id="d2" onclick="add(2)">运维部</option>
</select>
function add(i) {
		depart_click = i;
}

修改后：使用select的onchange事件

<select name="depart" lay-verify="required" class="d" onchange="jumpadd();">
			<option value="">请选择部门</option>
			<option id="d1" value="1">研发部</option>
			<option id="d2" value="2">运维部</option>
</select>
function jumpadd() {//添加
		add($("#s").val());
	}	
function add(i) {
		depart_click = i;
	}

4）文本域 textarea

<textarea maxlength="20"></textarea>
textarea文本域
maxlength限定文本域字数
disabled 禁用文本域

5）按钮

<input type="button" value="普通按钮"onclick="alter('123')"/>
<!--οnclick="alert('123')"指点击按钮，窗口返回123-->
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
<input type="hidden" value="隐藏框"/>

3.实体字符

&lt; 等同于小于号<
&gt; 等同于大于号>
&nbsp; 等同于空格
&#169; 等同于©

4.div标签–用于页面分区

可以控制宽度width、高度weight、内边距padding、外边距margin
div标签的align属性：规定 div 元素中的内容的水平对齐方式。有left、right、center等值
align属性的效果等同于css样式的

5.框架标签frame

frameset标签不能和body标签同时使用
rows表示当前页面上下分区，cols表示当前页面左右分区

//表示当前页面按1：9上下分区，分区边界宽度为1
<frameset rows="10%,90%" border="1">
//src引入页面路径
//引入10%的页面
<frame src="frame_top.html">
//引入90%的页面
<frame src="frame_bottom.html">
</frame>
</frameset>

iframe：嵌套页面

<body>
<!-- 嵌套页面 -->
<!--  name属性，iframe标签的名字，用于指定其他链接跳转页面位置  -->
	<!-- scrolling启用滚轮 auto自动 yes启用 no禁用 -->
	<iframe src="https://www.bilibili.com/" name="main_page" 
		width="100%" height="425px" scrolling="auto">
</iframe>
</body>

frame示例

//分区页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<frameset rows="20%,80%" border="1">
	<frame  src="frame_top.html"/>
	<frameset cols="10%,90%" border="3">
		<frame src="frame_left.html" />
		<frame src="frame_main.html" />
	</frameset>
</frameset>
</html>

//frame_top.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body></body>
</html>

//frame_left.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>
			    <!-- 点击链接，在main_page页面（分区）显示内容 -->
				<a href="https://www.jjwxc.net/" target="main_page">晋江</a>
			</li>
			<li>
				<a href="https://www.xxsy.net/" target="main_page">潇湘</a>
			</li>
			<li>
				<a href="https://www.hongxiu.com/" target="main_page">红袖</a>
			</li>
		</ol>
	</body>
</html>

//frame_main.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 指定本分区名为main_page,本分区展示页面为链接网站内容 -->
	<iframe src="https://www.xxsy.net/" name="main_page" width="100%" height="600"></iframe>
</html>

示例

<!DOCTYPE html>
<!-- 明确HTML版本为HTML5版本，简称H5;只有明确版本，浏览器才能正确显示HTML页面 -->
<html><!-- HTML页面的根标签 -->
	
	<!-- head标签包含HTML页面元数据， head标签中的信息不会显示在浏览器上 -->
	<head>
		<!-- 网页编码 -->
		<meta charset="utf-8" />
		<!-- 标题标签 -->
		<title>H5基础标签</title>
		<!-- 搜索引擎关键词-->
		<meta name="keywords" content="前端，思途，青岛" />
		<!-- 网站描述，涉及到SEO优化 -->
		<meta name="description" content="思途前端学习" />
	</head>
	
	<!-- body标签包含了全部的页面可见的内容 -->
	<body>
		<div id="tips">提示部分</div>
		
		1 基本标签
		<h1>h1标题标签</h1>
		<h6>h6标题标签</h6>
		
		<p>p标签：段落标签，<br>块级标签，单独占一行</p>
		<!-- 换行标签 -->
		<br />
		<!-- 水平线标签 -->
		<hr />
		
		2 文本格式标签：都是行级标签，不换行
		<br>
		<b>粗体标签</b>
		你好
		<i>斜体标签</i>
		
		<small>比普通文本更小的字体</small>
		<strong>等价于粗体</strong>
		<br>
		<del>删除字体，标记文本中间一条横线</del>
		<hr>
		3 超链接标签
		<br>
		<!-- 
		href属性：指定超链接要跳转的地址
		target属性：指定新页面的打开方式
			_blank 在一个新的页面打开
			_self（默认）  在当前页面打开
		 -->
		<a href="https://www.taobao.com" target="_blank">淘宝</a>
		
		<a href="#tips">跳到提示部分</a>
		<hr>
		4 图片
		<br>
		<!-- img标签是行级元素，不会独占一行 -->
		<!-- src是img标签的属性，表示图片文件的地址 -->
		<!-- width-宽度属性 单位是像素-->
		<!-- height-高度属性 单位是像素-->
		<img src="img/ab.jpg" title="图片说明" width="200px" height="180px" />
		<br>
		<img src="https://img2.baidu.com/it/u=969746118,2322541383&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=434" width="300px" height="150px">
		
		<!-- 
		相对路径：从当前文件开始，向上一级目录用../表示 
		绝对路径：从项目根目录开始，根目录用/表示
		 -->
		<hr>
		5 列表
		<!-- 无序列表 -->
		<ul>
			<li>aaa</li><!-- 列表的行标签 -->
			<li>bbb</li>
			<li>ccc</li>
		</ul>
		
		<!-- 有序表标签 -->
		<ol>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ol>
		<hr>
		6 表格标签
		<!-- 
		border属性：表示表格外边框粗细，0-不显示边框，1-边框粗细为1像素
		 cellspacing属性：表格各单元格之间的空隙，参数值是数字，表示单元格间隙所占的像素点数
		 -->
		<table border="10" cellspacing="0">
			<tr><!-- 行标签 -->
				<!-- rowspan:纵向合并单元格 -->
				<td rowspan="2">单元格1</td><!-- 单元格标签 -->
				<!-- 
				align: 控制标签包含的文本位置
				left:居左
				center:居中
				right:局右
				-->
				<!-- colspan：横向合并单元格 -->
				<td colspan="2" align="center">单元格2</td>
			</tr>
			<tr>
				<td>单元格2</td>
				<td>单元格3</td>
			</tr>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
			</tr>
		</table>
		
		<hr>
		7 表单
		<form action="http://www.baidu.com">
			<!-- 
				文本框 type="text"
				placeholder 解释说明
			-->
			<input type="text" placeholder="文本框">
			<br>
			<!-- 密码框 -->
			<input type="password" placeholder="密码框" />
			<br>
			<!-- 单选框 type="radio" 单选框需要指定相同的name属性才能控制单选 -->
			<input type="radio" name="sex" title="单选框" value="1"/>男
			<input type="radio" name="sex" value="0" />女
			<br>
			<!-- 复选框 type="checkbox" 多个复选框标签的name属性相同，可以多选-->
			<input type="checkbox" name="cb1" title="复选框1"/>北京
			<input type="checkbox" name="cb1" title="复选框2"/>上海
			<br>
			<!-- 下拉框  -->
			<select>
				<option>济南</option>
				<option selected="selected">青岛</option><!-- selected默认选中 -->
				<option>烟台</option>
			</select>
			<!-- textarea文本域 -->
			<!-- maxlength限定文本域字数 -->
			<!-- disabled 禁用文本域 -->
			<textarea maxlength="10" placeholder="文本域"></textarea>
			<br>
			<!-- 按钮 -->
			<input type="button" value="普通按钮" onclick="alert('123')" >
			<!-- 
				提交按钮根据form标签的action属性，
				将真的form表单中的元素的值提交给action属性指定的地址 	
			-->
			<input type="submit" value="提交按钮" />
			
			<input type="reset" value="重置按钮" />
			<!-- 隐藏框，不在浏览器显示，用于缓存临时数据 -->
			<input type="hidden" value="1" />
			
			<hr>
			
			
			&#169; &lt;&nbsp; 
		</form>
		
		
		
	</body>
</html>

abc0x

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
A HTML5基础知识（标签）

1.HTML：1)超文本标记语言，用来描述网页的一种语言。2) HTML页面包括：HTML标签和文本内容3)必须要明确HTML版本4)<head></head>标签内的内容不会出现在页面上5）搜索引擎：搜索引擎关键字<meta name="keywords" content="青岛，前端">搜索引擎描述<meta name="descrption" content="小白学习，前端内容">6)<title></ti
复制链接

扫一扫

专栏目录