Web标准
构成：1.结构：对于网页元素的整理和分类 HTML 类似身体（最重要）
2.表现：设置网页元素的排版 颜色 大小和外观 CSS 类似外观装饰
3. 行为：交互行为 JS 类似动作 飞翔
结构 样式 行为 相互分离
HTML
一.语法规范
1.基本语法概述：
尖括号中放关键词 标签成对出现：
也有一些标签是单个标签(单标签):
2.标签关系：
包含关系
并列关系
二.基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签 --根标签 | |
| 文档的头部 | 在head标签必须设置title标签 | |
| 文档的标题 | 让页面有一个网页标题 | |
| 文档的主体 | 元素包含文档的所有内容 页面内容 基本都是放在body中的 |
通过浏览器打开 .html 后缀
三.常用标签
<!DOCTYPE html>
<!-- 使用html5显示网页 不是html标签 是一个文档类型的声明标签 -->
<!-- 英语显示 zh-CN:中文网页 -->
<html lang="en">
<head>
<!-- 万国码 不写会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vscode创建的第一个网页</title>
</head>
<body>
<!-- 标题一共六级 依次减小 从重到轻 -->
<h1 id="top">标题标签</h1>
<!--
<p>段落标签 把文字分成不同段落 想换行必须使用段落标签 自动换行快捷键 Alt + Z
换行标签<br /> 代码遇到这个 就会直接换行
-->
<p>段落标签</p>
<p id="dlrb">迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，<br />中国内地影视女演员。2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。2014年，主演奇幻剧《逆光之恋》。2015年，凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖。2016年，主演现代剧《麻辣变形计》；同年，主演都市爱情励志喜剧《漂亮的李慧珍》，还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖。</p>
<p>2018年，迪丽热巴成为了金鹰电视艺术节的第七位“金鹰女神” ，并获得了第29届中国电视金鹰奖观众喜爱的女演员、第12届中国金鹰电视艺术节最具人气女演员两项殊荣 。2020年，主演的玄幻剧《三生三世枕上书》播出。2021年3月，主演古装传奇剧《长歌行》 。2022年，主演的古装玄幻剧《与君初相识》 、《恰似故人归》相继播出 。</p>
<!--加粗有两个标签 建议使用Strong标签-->
<strong>加粗标签</strong>
<b>加粗标签</b>
<br />
<!--倾斜有两个标签 建议使用em标签-->
我是<em>倾斜标签</em>
我是<i>倾斜标签</i>
<br />
<!--删除线有两个标签 建议使用del标签-->
我是<del>删除线标签</del>
我是<s>删除线标签</s>
<br />
<!--下划线有两个标签 建议使用ins标签-->
我是<ins>下划线标签</ins>
我是<u>下划线标签</u>
<br />
<!--
div表示分割 分区 独占一行 （大盒子）
span表示 跨度 跨距 （小盒子）
这两个都是用来布局的
-->
<div>div表示分割 分区 独占一行</div>其实我和div在一行
<div>div表示分割 分区 独占一行</div>其实我和div在一行
<span>搜狐</span>
<span>新浪</span>
<span>百度</span>
<!-- 图像标签 img 单标签
src="" 必须属性
alt="" 当图片显示不出来的时候 会显示文字
title="李思雨" 提示文本当鼠标放到图片上的时候会显示 （文字-李思雨）
width="" 图像宽度
height="" 图像高度 （一般来说修改一个 图片就会等比例缩放）
border="15" 图片边框 css来做 不用了解
总结：
1.图像标签可以有多个属性 必须写在标签名的后面
2.属性之间不分先后顺序 标签名和属性 属性和属性之间用空格隔开
3.属性采用键值对的格式 ，属性=“属性值”
-->
<h4>这是个图像标签</h4>
<img src="img/2.JPG" alt="这是李思雨的一张图片" title="李思雨" height="400" />
<!--
相对路径：引用位置所在位置为参考基础 而建立的目录路径
../: 上一级目录
./: 下一级目录
绝对路径：从盘符开始的 很少不要使用
网络上的绝对路径：
-->
<img src="https://www.apple.com.cn/v/ipad-10.9/b/images/overview/hero/hero__ecv967jz1y82_large.jpg" height="400"/>
<!--
超链接标签 a
href="" 必要属性 去往那个页面
target="" 以什么方式打开 _self(默认值):当前网页直接替换打开点击的网页， _blank:另起一个网页
分类：
外部链接:必须以http(s)开头
内部链接:网站内部之间的链接
空链接:不会跳转 不用加target=""
下载链接:地址是一个文件或者安装包点击就会下载 不用加target=""
网页元素链接:在网页中各个网页元素 都可以添加<a>超链接标签
锚点链接:快速的定位到页面中的目标标签 得有#号！！！
在目标标签中添加一个id属性
在超链接中添加一个属性href="#id名"
-->
<h4>1.外部链接</h4>
<a href="https://www.apple.com.cn/" target="_blank">苹果</a>
<h4>2.内部链接</h4>
<a href="test.html" target="_self">勇士不敌太阳 客场8连败</a>
<h4>3.空链接</h4>
<a href="#">勇士与凯尔特人圣诞大战</a>
<h4>4.下载链接</h4>
<a href="img/2.JPG">下载图片(李思雨)</a>
<h4>5.网页元素链接</h4>
<a href="https://www.apple.com.cn/" target="_blank">
<img src="img/2.JPG" height="400"/>
</a>
<h4>6.1.锚点链接</h4>
<a href="#dlrb">在本页中跳转到迪丽热巴的介绍</a>
<h4>6.2.锚点链接</h4>
<a href="#top">返回网页顶部</a>
</body>
</html>
四.HTML中的注释和特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格( ) | 空格符 |   |
| < | 小于号 | < |
| > | 大于号 | > |
| 注释符 | 快捷键Ctrl+/ |
HTML标签
一.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML标签</title>
</head>
<body>
<h4>表格标签</h4>
<!--
表格--用来展示数据
<table>:总单元表格 设置属性通常用css来显示
align="center(left/right)":居中显示
border=""：设置边框像素值 默认是0 没有边框
cellpadding="1"：文字和边线框之间的像素值 默认是1
cellspacing="2"：单元格边线之间的距离 默认是2
width="500"：表格的宽
height="300"：表格的高
<thead>:表头区域 内部必须有tr标签 放在table中
<tbady>:表体区域 放在table中
<tr>:行
<td>:行中的单元格
colspan="个数n":跨列合并 找最左侧的作为目标单元格 n为向右合并的单元格个数 并且删除右 边多余的n个<td>
colsrow="个数n":跨行合并 找到最上面的作为目标单元格 n为向下合并的单元格个数 并且删除 下边多余的n个<td>
<th>:表头单元格 表头单元格中文字 会居中 加粗 强调显示
-->
<table align="center" border="1" cellspacing="0" width="500" height="300">
<tr><td>姓名</td> <td>年龄</td></tr>
<tr><th>姓名</th> <th>年龄</th></tr>
<tr><td>梨花</td> <td>22</td></tr>
</table>
</body>
</html>
二.列表标签
1.无序列表(重点)
<body>
<h4>无序列表</h4>
<!--
无序列表：整齐 有序 用来布局界面
<ul> ：里面只能有 <li>标签 不能放其他的标签 文字也不行
<li>苹果</li> ：里面放什么都可以 (前面有个小点 css可以去掉)
</ul>
-->
<h4>喜欢的食物：</h4>
<ul>
<li>苹果</li>
<li>草莓</li>
<li>葡萄</li>
</ul>
</body>
2.有序列表(次次重点)
<body>
<h4>有序列表</h4>
<!--
有序列表：排序对象有一定顺序的时候 用有序列表
<ol>：不能放其他的标签 文字也不行
<li></li> 里面放什么都可以 (前面有个由小到大序号排列 css可以去掉)
</ol>
-->
<h4>粉丝排行</h4>
<ol>
<li>迪丽热巴 1000</li>
<li>白鹿 522</li>
<li>李沁 200</li>
</ol>
</body>
3.自定义列表(次重点)
<body>
<h4>自定义列表</h4>
<!--
自定义列表：对于术语或者名词进行解释和描述 定义列表的列表项前没有任何项目符号
<dl>：里面只能有<dt>标签和<dd>标签 不能放其他的标签 文字也不行
<dt></dt> 名词 一个对应多个
<dd></dd> 解释<dt>中的名词 (前面有空格 css可以去掉)
</dl>
-->
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>微信公众号</dd>
<dd>抖音</dd>
</dl>
</body>
三.表单标签
表单：由 表单域 表单控件(表单元素) 和 提示信息 组成
使用场景：注册网页 收集信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<h4>这是一共表单</h4>
<!--
<form>:表单域 里面写一下标签
action="":提交给哪一个页面处理
method="":get/post提交
name="":唯一指定名
<input>:输入表单元素
type="属性": 必要属性！ 并给属性赋值 形成不同的效果
text:文本框
password:密码框
radio:单选框 可以实现多选一
checkbox:多选框 实现多选的效果
submit:提交按钮 点击之后提交到后台
reset:重新填写 把表单元素还原到初始状态
button:普通按钮 结合js搭配使用 不会提交到后台 （发送验证码 图片验证码）
file:文件域 上传文件的时候用到
name="":表单元素的名字 ！！实现单选框和多选框的时候!! 名字必须一样
value="请输入用户名":表单元素的值 在界面中显示的提示信息 只有在文本框才有显示效果
checked:单选按钮和复选框可是设置这个 打开时默认打勾✔
maxlength="n":最大长度字符n 大于n输入不进去
id：绑定lable标签的
<select>:下拉列表 至少包含一个option
<option>请选择</option>
selected：默认选择
<textarea>:文本域标签 可以输入很多信息 （留言版 评论区）
<lable>:绑定一个表单元素（实现点击文字 自动选中 提升用户体验）
for="id"：必须和input标签中的id值一样 才能绑定
-->
<form action="xxx.php" method="get" name="name">
<label for="text">用户名：</label>
<input id="text" type="text" name="username" value="请输入用户名" maxlength="6"> <br />
密码：<input type="password" name="password"> <br />
性别：男 <input type="radio" name="sex" checked> 女 <input type="radio" name="sex"> <br />
爱好：唱<input type="checkbox" name="hobby" checked>
跳<input type="checkbox" name="hobby">
rap<input type="checkbox" name="hobby">
篮球<input type="checkbox" name="hobby" checked> <br />
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取验证码"> <br />
上传头像：<input type="file"> <br />
<label for="adress">籍贯：</label>
<select id="adress">
<option selected>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
<option>天津</option>
</select> <br />
<label for="comment">评论：</label>
<textarea id="comment"></textarea>
</form>
</body>
</html>
扫一扫
5840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
