1 - HTML标签

最新推荐文章于 2023-07-20 17:34:37 发布

Ponsine

最新推荐文章于 2023-07-20 17:34:37 发布

阅读量180

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Ponsine/article/details/109748671

版权

HTML

一、HTML基本语法

1.1 标签(元素)

不同标签不同的语义,决定了标签的功能

标签分为单标签和双标签

<!--双标签有开始标签和结束标签-->
<p>内容</p>
<!--单标签没有结束标签-->
<hr>
<hr/>

标签名不区分大小写
标签具有属性,通过属性可以设置标签的相关属性
```
zzzz
<!--- color和size就是属性->
```
掌握一会HTML标签需要掌握以下三点:

1.标签的语义和功能

2.标签的属性和属性的设置

3.单标签/双标签

1.2 注释

解释说明作用
注释掉一部分代码,查看页面等功能

1.3 文档声明

```
<!DOCTYPE html>
```
告诉浏览器以HTML的标准解析网页

二、HTML标签

2.1 主体结构标签

标签名	语义及作用	单标签/双标签
html	页面的根标签	双
head	页面的描述标签	双
body	页面的主体标签	双

2.2 head标签

标签名	语义及作用	属性	单标签/双标签
title	网页在导航栏的标题		双
meta	设置网页元信息	charset:设置网页的字符集 name:指定要设置的信息,如keywords,description content:与内容匹配,设置内容 http-equiv:如name类似	单
link	设置网页外联信息	rel: 值shortcut icon , stylesheet href属性: 指定外部文件地址	单
style	写css内容	所有css属性	双
script	写js内容	所有scrpt	双

①meta设置网页元信息

<!-- 1.charset----设置字符集编码,避免网页乱码-->
<meta charset="UTF-8">
<!-- 2.keywords----设置关键字 优化SEO-->
<meta class="keywords" content="方便,快捷,实惠">
<!-- 3.description----设置描述信息 用于SEO -->
<meta class="description" content="zzzzzzzzzzz">
<!-- 4.refresh---设置指定时间后跳转指定页面 -->
<meta http-equiv="refresh" content="3;url=https://www.lilithgames.com">

②设置网页导航栏图标

<link rel="shortcut icon" href="图标地址">

2.3 格式排版标签

标签名	语义及作用	单标签/双标签
h1~h6	标题(一级标题到六级标题)	双
p	段落	双
hr	分隔符	单
br	换行	单
pre	previous–>按原文显示	双
div	用于布局	双

	<!---->
	<h1>格式排版标签</h1><!-- h1标签只写一个有利于搜索引擎优化 -->
    <h2>格式排版标签</h2>
    <h3>格式排版标签</h3>
    <h4>格式排版标签</h4>
    <h5>格式排版标签</h5>
    <h6>格式排版标签</h6>

    <p>格式排版标签</p><!--段落-->

    <hr>			<!--分割线-->

    <p>
        锄禾日当午
        <br>		<!--不多用,p能自动换行-->
        汗滴禾下土
        <br>
        谁知盘中餐
        <br>
        粒粒皆辛苦
    </p>
    <pre>			<!--用于在网页显示原代码-->
        格式排版标签
        格式排版标签
        格式排版标签
    </pre>
    <p>格式排版标签</p>
					<!--div用于布局-->
    <div>
        <div>
            <div>格式排版标签</div> 
        </div>
    </div>

**注意: ** 格式排版标签重要的不是在浏览器上的表现样式 , 而是他们的语义.

合理使用格式排版标签 , 对于SEO优化是友好的.

2.4 文本标签

标签名	语义及作用	单标签/双标签
em	强调(文字斜体)	双
strong	强调(文字加粗)	双
del	删除线5	双
ins	下划线	双
sub	下标	双
sup	上标	双

三、功能标签

3.1 超链接

标签名	语义和功能	属性	单标签/双标签
a	超链接	href属性 : 指定目标地址 target属性 : 指定目标文件打开方式 name属性 : 用于设置锚点名	双
base	指定超链接的基础特性写在head标签中	href属性 : 设置超链接的基础地址(影响相对路径) target属性 : 页面内所有超链接打开方式	单

3.2 超链接的功能

①目标地址

通过 href 属性指向目标地址 , 目标地址是文件的地址
点击超链接 , 浏览器就会打开目标地址的指向文件
如果目标地址指向的文件的格式浏览器打不开 , 浏览器就会下载

②超链接的特殊用法

<!--移动端功能-->
<a href="tel:10086">10086</a>
<a href="sms:10086">发短息给我</a>

③指定目标文件打开的位置

把 target 属性的值设置为 “_blank” , 目标文件会在新窗口打开
target 的默认属性值是 “_self”

3.3 锚点链接

①在页面设置锚点

	<!--1. 使用a标签-->
	<a name = "锚点名"></a>

	<!--2. 给标签设置 id 属性-->
	<div id="锚点名"></div>

②跳转到锚点

跳转到锚点 , 还是需要超链接 , 不跳转到新页面 , 跳转到当前页面的锚点位置

<a href="锚点名">指定锚点</a>
<a href-"#">返回定位</a>

注意:

不但可以跳转到本页面的某个锚点<a href="#锚点名">

还可以跳转到其他页面的某个锚点<a href="页面地址#锚点名">

3.4 图片标签

标签名	语义及功能	属性	单标签/双标签
img	图片	src属性 : 指定图片地址 alt属性: 指定图片失效时,提示的文字 usemap属性 : 指定与该图像对应的map标签name值	单
map	用于图像映射	name属性 : 指定区域的形状不同执行不同的坐标	双
area	用于图像映射划分区域必须嵌套在map标签的里面	shap属性 : 指定area的形状 rect(矩形),circle(圆形),poly(多边形) coods属性 : 根据形状不同执行不同的坐标 href属性 : 指定目标地址 target属性 : 指定在什么位置打开新的页面	单

3.4.1 在页面中引入图像

<!-- src: resource 目标源   alt: 图片失效后提示文字  title: 图片提示文字-->
<img src="" alt="" title="" >

常见的图片格式:
jpg:静态图片,不支持透明
png:静态图片,不支持透明
gif:动态图片,支持透明

3.4.2 图片和超链接配合使用

<!--在a标签的里面嵌套img标签-->
<a href="http://www.baidu.com">
	<img src="" alt="">
</a>

3.4.3 图片映射


<!--例:-->
<img src="./images/浏览器.jpg" alt="" usemap="#mymap">
<!-- map双标签 area单标签, area标签要嵌套在map标签里面-->
<map name="mymap">
          <area shape="circle" coords="130,114,100" href="https://www.google.cn" title="google" target="_blank">
        <area shape="rect" coords="265,27,491,159" href="https://www.firefox.com" title="Firefox" target="_blank">
        <area shape="poly" coords="138,349,248,157,374,346" href="https://support.microsoft.com/" title="IE" target="_blank">
</map>

四、列表标签

无序列表

   <!-- ul: 无序列表
         li: 列表项
    -->
<ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>Jquery</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
    <!-- 列表的里面还可以嵌套列表 -->
    <h2>行政规划</h2>
    <ul>
        <li>江苏
            <ul>
                <li>南京</li>
                <li>苏州</li>
                <li>镇江</li>
            </ul>
        </li>
        <li>浙江</li>
        <li>安徽</li>
    </ul>

有序列表

     <!-- ol: 有序列表
          li: 列表项
    -->
    <h1>有序列表</h1>
    <hr>
    <h2>前端要学习的内容</h2>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>Jquery</li>
        <li>Vue</li>
        <li>React</li>
    </ol>

**注意 : **无序列表在页面中非常常见 , 如导航新闻列表商品列表

一组具有相关性的内容放在一起 , 一般选择使用无序列表

定义列表

   <!-- dl: 定义列表
          dt: define title       定义列表标题
          dd: define description 定义列表描述
    -->
    <h1>定义列表</h1>
    <hr>
    <h2>商品分类</h2>
    <dl>
        <dt>家用电器</dt>
        <dd>电视</dd>
        <dd>空调</dd>
        <dd>洗衣机</dd>
        <dd>电冰箱</dd>

        <dt>电脑/办公</dt>
        <dd>电脑整机</dd>
        <dd>电脑配件</dd>
        <dd>外部设备</dd>
    </dl>

列表标签总结

标签名语义和功能属性单标签/双标签
ul 无序列表双
ol 有序列表双
li 列表项–嵌套在ul和ol里面双
dl 定义列表双
dt 定义列表标题双
dd 定义列表描述双

标签名	语义和功能	单标签/双标签
ul	无序列表	双
ol	有序列表	双
li	列表项–嵌套在ul和ol里面	双
dl	定义列表	双
dt	定义列表标题	双
dd	定义列表描述	双

五、表格标签

  <!-- 表格 -->
<table>
    <caption>表格标题</caption>
    <!-- 表头 -->
    <thead>
        <!-- table row 表示一行 -->
        <tr>
            <!-- 表头单元格 -->
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
            <th>地址</th>

        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <!-- 普通单元格 -->
            <td>1</td>
            <td>tiffy</td>
            <td>1</td>
            <td>cat</td>
            <td>zzz</td>
        </tr>
        
        <tr>
            <td>2</td>
            <td>qwe</td>
            <td>2</td>
            <td>dog</td>
            <td>asd</td>
        </tr>
        
        <tr>
            <td>3</td>
            <td>rty</td>
            <td>3</td>
            <td>bird</td>
            <td>vbn</td>
        </tr>
    </tbody>
    <!-- 表格注脚 -->
    <tfoot></tfoot>
</table>

单元格设置内容对齐方式

使用 align 属性设置水平对齐方式, 值可以选择为 left, right, center
	可以给 thead, tbody, tfoot 进行设置

设置单元格宽高
```
td{
	width: ??px;
    height: ??px;
}
```

设置表格中的对齐方式

<!---->

tr,td{<!--设置居中,左对齐,右对齐-->
	text-align: center/left/right;
}

合并单元格

给 td 或者 th 设置 colspan 用于跨列

给 td 或者 th 设置 rowspan 用于跨行

表格标签总结

标签名	语义和功能	属性	单标签/双标签
table	表格	cellspacing属性: 设置单元格之间的宽度 cellpadding属性: 设置单元格的内边距	双
caption	表格标题		双
thead	表头	align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式	双
th	表头单元格	align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 rowspan属性: 设置该单元格跨越的行数 colspan属性: 设置该单元格跨越的列数	双
tbody	表格主题	align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式	双
tr	行	align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式	双
td	普通单元格	align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 rowspan属性: 设置该单元格跨越的行数 colspan属性: 设置该单元格跨越的列数	双
tfoot	注脚	align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式	双

六、表单标签

6.1 表单form标签

form是表单的包裹标签,表单中所有的东西都要写在 form 标签里面
具有以下属性:
	action: 表单提交的地址
	method: 指定提交方式
	target: 指定新打开页面的方式

6.2 表单控件

① 文本输入框

<!-- 1.文本输入框 -->
<!-- 属性: 
		type: text
		name: 提交给服务器的信息
		value: 文本框在页面显示的值
		maxlength: 文本框可输入符号数的最大值
	-->
<input type="text" name="" value="显示在页面的值" maxlength="12">

② 密码输入框

<!-- 2.密码输入框 -->
<!-- 属性: 
		type: password
		name: 提交给服务器的信息
		value: 文本框在页面显示的值-----暗文无意义
		maxlength: 文本框可输入符号数的最大值
	-->
        <input type="password" name="" value="显示在页面的值" maxlength="12">

③ 单选框

<!-- 3.单选框 -->
<!-- 属性:
		type: radio
		name: 提交给服务器的信息, 相同name的radio同属一个单选框
		checked: 单选框的默认值
		value: 属性指定真正向后端提交的数据
	-->
        性别:
        <input type="radio" name="sex" value="male" >男
        <input type="radio" name="sex" value="female"  checked>女
        <input type="radio" name="sex" value="unknown" >??

④ 复选框

<!-- 3.复选框 -->
<!-- 属性:
		type: checkbox
		name: 属性指定名字（向后端提交数据的时候使用）
		value: 属性指定真正向后端提交的数据
		checked: 默认选中值
	-->
        兴趣:
        <input type="checkbox" name="hobby" value="basket">篮球
        <input type="checkbox" name="hobby" value="soccer" checked>足球
        <input type="checkbox" name="hobby" value="volley">排球

⑤ 下拉菜单

<!-- 5.下拉菜单 -->
<!-- 属性:
		name: 属性的名字,提交给服务器的值
		value: 提交给服务器的具体值
		selected:下拉菜单的默认选项
		-->
        <select name="education" id="">
            <option value="primary">小学</option>
            <option value="junior" selected>初中</option>
            <option value="senior">高中</option>
        </select>

⑥ 提交按钮

<!-- 6.提交按钮 -->
<!--提交按钮有两种实现形式
	1): input -- type值为submit(默认值) 
				value值为提交按钮上的文字
	2): button -- button的type属性的默认值就是submit, 可以实现提交功能
	-->
        <input type="submit" value="提 交">
        <button>提交</button>

⑦ 重置按钮

<!-- 7.重置按钮--重置form表单中所有的内容 -->
<!--重置按钮有两种实现形式
	1): input -- type值为reset 
				 value值为重置按钮上的文字
	2): button -- type属性值为reset
			
	-->
        <input type="reset" value="重 置">
        <button type="reset">重置</button>

⑧ 普通按钮

<!-- 8.普通按钮-->
<!--重置按钮:
		type属性值为button,实现普通按钮,没有效果
	-->
		 <input type="button" value="按 钮">
        <button type="button">普通</button>

⑨ 文本区域

<!-- 9.文本区域 -->
<!-- 属性: 
		name: 提交给服务器的信息
		cols: 控制文本域的列数, 影响宽度
		rows: 控制文本域的行数, 影响高度
-->
        <textarea name="smg" id="" cols="30" rows="10"></textarea>

⑩ 隐藏域

<!-- 9.隐藏域--向服务器提交隐藏内容 -->
<!-- 属性：
		type 设置为 hidden
		name 属性指定名字（向后端提交数据的时候使用）
		value 属性指定向后端提交的数据
-->
<input type="hidden" name="hid" value="隐藏数据">

七、表单label , fieldset , legend 标签

7.1 label标签

label标签用于和表单控件做关联 , label中的通常包含表单控件的说明文字

好处:

有利于SEO , 让文字和表单控件关联
点击与表单控件关联的文字可以让表单控件获取焦点

<!--用法-->
<!--label的for属性要和关联的id属性的值相同,通过这样确定关系-->
    <label for="txt">
        <input type="text" id="txt">
    </label>

    <label for="pwd">
        <input type="password" id="pwd">
    </label>
<!--label用于单选框,复选框 将input嵌套在label标签中-->
    <label>
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="famale">女
        <input type="radio" name="sex" value="unknown">??
    </label>
    <label>
        <input type="checkbox" name="hobby" value="basket">篮球
        <input type="checkbox" name="hobby" value="soccer" checked>足球
        <input type="checkbox" name="hobby" value="volley">排球
    </label>

7.2 fieldset和legend标签

fieldset 可以在表单控件的周围加一个边框
legend 指定表单的标题，出现在边框的上面

<form>
	<fieldset>
        <legend>表单标题</legend>
       	表单控件...
    </fieldset>
</form>

八、disabled属性

<!-- disabled属性: disabled标签让input标签变为不可用状态-->
<input type="password" name="" value="显示在页面的值" maxlength="12" disabled>

九、表单标签总结

标签名	语义及功能	属性	单标签/双标签
form	表单 , 可以提交给服务器	action:提交到服务器的地址 target: 表单提交方式 method: 表单打包提交方式	双
input	输入框	type: 表单的控件,值有`text` , `password` , `radio` , `checkbox` , `reset` , `button` ,`submit` name: 提交给服务器的值 checked: 为 radio 和 checkbox设置默认选项。 length: 设置输入框的最大输入长度（text 和 password） size：设置输入框尺寸（text 和 password）	单
select	下拉菜单栏	name: 提交给服务器的值 value: 真正提交给服务器的值	双
option	select的选项	name: 提交给服务器的值 value: 真正提交给服务器的值 selected: 默认选中	双
textarea	文本域	name: 标识该输入框，后端用改标识获取数据（暂时不用） rows：文本域行数，能决定文本域的高度 cols：文本域列数，能决定文本域的宽度	双
label	关联表单控件	for：指定其他要关联的表单控件的ID	双
fieldset	表单边框		双
legend	表单边框标题		双

十、框架标签

<!--框架就是把另一个网页引入到当前网页-->
<iframe src="http://www.baidu.com" frameborder="0"></iframe>

十一、字符实体

常用的

&nbsp;		空格
&lt;		小于
&gt;		大于
&amp;		&符号
&yen;		¥
&times;		×
&divide;	÷
&copy;		©

Ponsine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1 - HTML标签

HTML一、HTML基本语法1.1 标签(元素)不同标签不同的语义,决定了标签的功能标签分为单标签和双标签内容<hr><hr/>标签名不区分大小写标签具有属性,通过属性可以设置标签的相关属性zzzz<!--- c
复制链接

扫一扫