WEB开发掌握这些HTML标签就够了超文本标记语言，Hypertext Markup Language 日常开发常用HT

HTML超文本标记语言

1、HTML:Hypertext Markup Language 超文本标记语言

2、DOCTYPE：不是标签，文档类型声明：告诉浏览器按当前标准解析代码

（：HTML5的文档类型声明）

H5的标准：HTML标签不区分大小写，双标记的结束标记可以省略，单标记的/可以省略（不推荐）

Html4 三个版本：严格、过渡、框架集 Xhtml 严格的HTML，区分大小写

不加文档类型声明：浏览器为混杂模式加文档类型声明：浏览器为标准模式

DTD文档 = doctype

3、html根标签

<html></html>

4、head、body标签

<head></head>>设置浏览器，优化SEO**，视觉看不到
<body></body>展示给用户看的内容

5、这就是一个属性：属性=“属性值“

属性名不用加双引号，属性值必须加双引号

<meta charset = "uft-8">一般填写utf-8

编码字符集：gb2312国家编码字符集（简体），亚裔字符集
gbk：gb2312+繁体
unicode万国码，包含了所有国家的语言
UTF-8是Unicode的一种实现方式

6、title页标

<title>淘宝网，淘</title>页标

在这里插入图片描述

7、<html lang = “en">

告诉搜索引擎爬虫，我们的网站是关于什么内容的

en 代表是英文，zh 是中文，德语是 de
关键词
<meta content = “服饰” name = “keywords”> 
描述
<meta content = “时装” name = “description”> 
作者
<meta name="author" content="123@163.com"/>

8、p段落标签，让内容成段展示

<p>as客服哈数据库的内存卡上大家克服发送到发送到了·1</p>
<p>as客服哈数据库的内存卡上大家克服发送到发送到了·1</p>

标题标签，成段展示，独占一行，加粗字体，更改字体大小(从1到6依次减小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

10、strong加粗 em斜体

<strong>加粗</strong>
<em>斜体</em>
例：
<strong>
	<em>加粗又斜体</em>
</strong>

11、 del 中划线

<del>中划线</del>

12、address 地址标签

<address>地址标签：斜体+成段展示</address>

13、div、span 容器

<div>独占一行</div>
<span>不独占一行</span>

div和span成块展示，容器，功能如下：

功能1：分块明确，让整个页面更加结构化

功能2：捆绑操作的作用(盒子)

<div style="color: red;">
    <del>中划线</del>
    <address>地址标签：斜体+成段展示</address>
</div>

14、如果是一个单词，溢出是不管的

空格的含义是英文单词分隔符，不代表文本的空格，作为分隔符，打多少个都只显

示一个空格；回车也是文字分割符，也是打多少个都只显示一个空格

<p>真          漂亮</p>

效果：在这里插入图片描述

英文不会自动分割

<div style="width:100px;height:100px;backgroundcolor:red">
    fhasdjklfhajksdhfkjadhfjkasdhlkfadsjklfsdkfjlkasdfkjsd
</div>

效果： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBhfivRN-1653661521979)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653652826730.png)]$

根据空格进行分割英文单词

<div style="width: 100px;height:100px;background-color: red">
    fhasd jklfh ajksd hfkjad slhfjk asdhl kfadsjk lfsdkf jlkasdf kjsd
</div>

效果： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m77dVxU6-1653661521979)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653652917483.png)]$

汉字自动分割

<div style="width: 100px;height:100px;background-color: red">
    看来是的房间爱丽丝的积分卡上档次蒙娜丽莎的咖啡机
</div>

效果：在这里插入图片描述

html编码格式&；常用的有以下三个

1）空格文本，写多少个就空几格&nbsp；

2）<左尖括号，小于的意思，less than，html编码是&lt；

3）>右尖括号，小于的意思，great than，html编码是&gt；

15、br换行符 hr水平线

大部分的标签的作用是把它包裹的文本作用成它设置的样子，所以成对出现，有的标签自己就代表功能，就是单标签

16、有序列表

<ol>
	<li>fadsf</li>
	<li>发生的</li>
	<li>fadfa</li>
	<li>法式蛋糕</li>
</ol>

如果写成：<ol type = “1”> 就以 ABC 排序， type=" a"，就以 abc 排序 type 值只有五个：数字，大写英文 A，小写英文 b，罗马数字大写 I，罗马数字小写 i A 可以 27 进制写成<ol type = “1” reversed = “reversed”> 就是倒序如果想从第 2 个开始排序，就写<ol type = “1” start = “2”> 如果想从第 117 个开始排序，就写<ol type = “i” start = “117”> 想从第几个开始拍，start 里面写数字几

17、无序列表

<ul type="disc">
	<li>苹果</li>
	<li>草莓</li>
	<li>橙子</li>
</ul>

type值：

disc：（discircle）实心圆

square：（square），实心方块

circle：（circle），圈（空心圆）

ul 和 li 是一个很好的天生父子结构(柜子与抽屉)，可以做导航栏

html:
<ul type="circle">
    <li>天猫</li>
    <li>聚划算</li>
    <li>天猫超市</li>
</ul>

css:
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    li{
        margin: 0 10px;
        float: left;
        color: #f40;
        font-weight: bold;
        font-size: 14px;
        height: 25px;
        line-height: 25px;
        padding: 0 5px;

    }
    li:hover{
        background-color:#f40;
        border-radius: 15px;
        color: #fff;
    }
</style>

效果：在这里插入图片描述

18、图片img

src是source的缩写，img的地址：

1）网址url

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202109%2F17%2F20210917215327_c46ce.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656247749&t=51605076b3fa25705e91ac9c81570c75" alt="白鹿" style="width: 100px">

2)本地的绝对路径

<img src="E:\Studey\练习\imgs\bailu.jpeg" alt="" style="width: 100px">

3）本地的相对路径

<img src="imgs/bailu.jpeg" alt="白鹿" style="width: 100px">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jQDw6pjJ-1653661521980)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653656117209.png)]$ alt：图片占位符，地址出错，展示这个信息；图片没问题就不展示 title：图片提示符，鼠标放上去，显示这个这个信息

<img src="E:\Studey\练习\img\bailu.jpeg" alt="这是白鹿女神" style="width: 100px">
<img src="imgs/bailu.jpeg" alt="白鹿" style="width: 100px" title="白鹿女神">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckgnAv8v-1653661521980)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653656480894.png)]$

19、超链接

<a href="https://www.baidu.com" target="_blank">百度一下</a>

href：hyperText reference 超文本引用，这个地址是浏览器解析的地址；

百度一下：展示给用户显示；

target="_blank":在新标签中打开这个地址

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SZ1AcMus-1653661521980)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653657184378.png)]$

a标签可以包裹图片

a标签是anchor-->锚，定在某个点(常用于置顶)

a标签的功能

1）超链接

2）锚点

<div id="demo1" style="width: 100px;height: 100px;background-color: green;">demo1</div>
<br>*100
<div id="demo2" style="width: 100px;height: 100px;background-color: red;">demo2</div>
<br>*100
<a href="#demo1">find demo1</a><!--id和href配合实现锚点 -->
<a href="#demo2">dind demo2</a>
<br>
<!--跳转到指定位置 -->
<a href="#demo1" style="display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;">find demo1</a>
<br>
<a href="#demo2" style="display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;">find demo2</a>

3）打电话，发邮件

<a href="tel:18848882296">打电话</a>
<a href="mailto:XXXX@163.com">发邮件</a>

4）协议限定符

写一个<a href = “javascript:">你点我试试写了 JavaScript 就可以在里面写 js 了

<!-- 没事别玩，无限循环 -->
<a href="javascript:while(1){alert('让你手欠')}">你点我试试</a>

20、form表单，能发送数据，非常重要

<form action="" name="form1"></form>

from method="get/post这是form发送数据的两种方式 get和post的区别： 1）get提交数据不安全，数据会在地址栏中显示；post安全 2）get提交数据大小有限制；post理论上没有限制 action="地址"：发送给谁，提交的地址； form表单里面还需要配合input来写，input里面需要type type值：

单行文本框  <input type="text"/>
密码框     <input type="password"/>
单选按钮   <input type="radio"/>  注意：必须加name属性
多选按钮   <input type="checkbox"/>
提交按钮   <input type="submit"/>
重置按钮   <input type="reset"/>
没有功能的按钮   <input type="button"/>
提交按钮   <button></button>  默认type="submit"
重置按钮   <button type="reset"></button>
没有功能的按钮   <button type="button"></button>

<form action="" name="form1">
    <!-- 要注意语义化，所以用 p 标签更好，p 标签天生的功能就是换行 -->
    <p>
    	姓名：<input type="text" name="userName" value="李白"/>
    </p>
    <p>
    	密码：<input type="password" name="password" value="请输入您的密码"/>
    </p>
     <p>
		性别：
        <input type="radio" name="sex" value="man"/>男
        <input type="radio" name="sex" value="woman"/>女
        <input type="radio" name="sex" value="renyao"/>人妖
    </p>
	<p>
    	爱好：
        <input type="checkbox" name="hobby" value="game"/>打游戏
        <input type="checkbox" name="hobby" value="play"/>打球
        <input type="checkbox" name="hobby" value="sleep"/>睡觉
        <input type="checkbox" name="hobby" value="eat"/>吃饭
    </p>
    爱好：
        <input type="checkbox" name="hobby" value="game"/>打游戏
        <input type="checkbox" name="hobby" value="play"/>打球
        <input type="checkbox" name="hobby" value="sleep"/>睡觉
        <input type="checkbox" name="hobby" value="eat"/>吃饭
    
   	<p>
        <input type="submit" value="登录"/>
      	<input type="reset" value="取消"/>
      	<input type="button" value="没有任何功能的按钮"/>
    </p>
    
    <p>
    	<button>提交</button>
    	<button type="reset">重置</button>
    	<button type="button">没有功能的按钮</button>
    </p>
</form>

效果： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16v5GEz6-1653661521980)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653658743726.png)]$

发送数据要注重数据的主题（数据名）和数据的内容（数据值），缺一不可，没有这个就发送不了数据

<!-- 无法发送数据 -->  
<form action="" method=“get”>
		<p>
			username:<input type="text">
		</p>
    	<p>
			password<input type="password">
		</p>
    	<input type="submit" value="登录"/>
</form>

<!-- 可以发送数据，name：数据名，输入的值：数据值 -->  
<form action="" method=“get”>
    <p>
        username:<input type="text" name="username">
    </p>
    <p>
        password<input type="password" name="password">
    </p>
    <input type="submit" value="登录"/>
</form>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CF4mqv80-1653661521981)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653659723678.png)]$

input type="password"：密码用暗文显示，仅对自己不可见，受王安局监管的公司，一般用md5加密，不可逆的加密方式

<input type = “radio" name = “sex">是单选框，此处的 name 里面的值一样的，是告诉

浏览器你们是一道题，那么这个时候就没有填数据值的地方了，可以写个 value = “” 来储存数据值

默认选中 checked = “checked”

<!-- 写在form表单中 -->
性别：
<input type="radio" name="sex" value="man" checked=“checked”/>男
<input type="radio" name="sex" value="woman"/>女
<input type="radio" name="sex" value="renyao"/>人妖

优化：提升用户体验度： for属性和表单元素的id属性一致 ,点击文字同样选中

性别：
<input type="radio" name="sex" id="man"/>
<label for="man">男</label>
<input type="radio" name="sex" id="woman"/>
<label for="woman">女</label>

select下拉菜单，可以选值

<form action="" name="form1">
    城市：
	<select name="city" id="city">
        <option value="bj">北京</option>
        <option value="hb">河北</option>
        <option value="sd">山东</option>
        <option value="hlj">黑龙江</option>
        <option value="ah">安徽</option>
	</select>
</form>

显示效果： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrV4oS7B-1653661521981)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\1653660554034.png)]$ 表单元素的属性 type 类型 name 表单元素的名称 value 当前值 checked 默认被选中，配合单选按钮和多选按钮去使用 checked="checked" selected 默认显示，配合option使用 selected="selected" disabled 禁用 disabled="disabled" readonly 只读 readonly="readonly" size 显示的数量，配合select使用,取值为number

<form action="" name="form">
    <p>
        用户名：<input type="text" name="userName" disabled/>
    </p>
    <p>
        密码：<input type="password" name="password" readonly/>
    </p>
    <p>
        性别：
        <input type="radio" name="sex" id="man" value="man"/>
        <label for="man">男</label>
        <input type="radio" name="sex" id="woman" value="woman" checked/>
        <label for="woman">女</label>
    </p>
    <p>
        城市：
        <select name="city" id="city" size="3">
            <option value="bj">北京</option>
            <option value="hb">河北</option>
            <option value="sd">山东</option>
            <option value="sx" selected>山西</option>
        </select>
    </p>
    <p>
        <input type="submit" value="注册"/>
    </p>

</form>

显示效果：在这里插入图片描述

20、浏览器认识 主流浏览器和内核，主流浏览器是有一定市场份额，并且有自己独立研发的内核浏览器分 shell+内核在这里插入图片描述