html（超文本标记语言）
标签
<开始标签>标签体(内容)</结束标签> //标签可以嵌套。
html的骨架：
<html>
<head></head>
<body>
</body>
</html>
-
快速生成框架：
shift + ! + Enter
属性名与属性值
<marquee loop="1">Hello!<input></marquee>
- loop：属性名=“属性值”。
- 若属性名与属性值相同，则可以只写属性名
<input disabled>
<input disabled ="disabled">
语言与编码
<html lang="en"> //表明该网页使用英文
<meta charset="UTF-8"> //使用编码为UTF-8
-
UTF-8：通用的万国码
-
注：编码与解码使用的字符集必须一致。
注释：
<!--注释-->
快速生成注释：
ctrl + /
示例：
<!DOCTYPE html>
<!--声明文档 html5-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
Hello world!
</body>
</html>
标签
常用标签
<h1>我是标题</h1> //标题标签，h1 ~ h6字体大小逐渐递减
<h3>我是标题</h3>
<p>jiosjfsiojf</p> //段落标签
jiosjfsiojf<br/> //换行标签
<hr/> //水平线标签
文本格式化标签
无语义标签
<div></div> //容器，独占一行，多用于布局
<span></span> //容量较小
图像标签
<img src="./img/a.jpg"> //src指向图片位置
<img src="./img/a.jpg" alt="error!"> //alt意思是当出现错误时显示的信息
<img src="./img/a.jpg" title="abc"> //title意思是当光标在图片上时，显示的内容
width=""
heigth="" //设置宽与高
border="" //设置图片边框
- 图片的路径可以是相对路径、绝对路径以及网络路径。
视频标签与音频标签
<video src="" controls autoplay loop> //视频循环播放
controls //控件
autoplay //自动播放（默认点击播放键后才播放）
loop //循环播放
muted //静音播放
poster //等待加载时显示的图片（后接图片路径）
<video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video> //打开后自动播放且静音，加载时显示指定图片
<audio src="./images/music.mp3" controls muted loop></audio>
//打开后点击播放音频，没有声音。
超链接
<a href="E:\C\web前端\a.jpg" target=""></a>
target:打开方式。
_self //默认不保留源界面
_brank //保留源界面
<a href="https://www.baidu.com" target="_blank" >baidu</a>
<a href="https://www.baidu.com"><img src="E:\C\web前端\a.jpg"> target="_blank"</a>
锚链接
<a href="#iden">个人经历</a> //点击后直接跳转至同一网页的对应专题
...
...
...
<div id="#iden">个人经历</div>
列表
有序列表
<body>
喜欢的食物
<ol type="A"> //可以指定序号（默认为数字）
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
</ol>
</body>
无序列表
你喜欢的明星是？
<ul>
<li>丁真</li>
<li>法外狂徒张三</li>
<li>华晨宇</li>
<li>罗翔</li>
</ul>
<ul type="circle"> //指定表项前为圆圈
自定义列表
<body>
<dl>
<dt>
你喜欢的明星是？
</dt>
<dd>张三</dd>
<dd>里斯</dd>
<dd>张三</dd>
</dl>
</body>
iframe框架
<iframe src="https://www.baidu.com" width="900px" height="600px"></iframe>
//在当前网页嵌套百度的网页并设置大小
<a href="https://www.taobao.com" target="nn">去淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>
//制作链接，链接到淘宝，目标是当前网页
特殊字符
元素显示模式：
- 块元素：独占一行（可以设置宽、高、内外边距）
<div>
</div>
<ul>
<li>
</li>
</ul>
- 行内元素：不可以设置
<span>
</span>
- 行内块元素：一行内
表格
一个表格由标题、区域、表头、表项以及脚注组成。
<tr></tr> //表头(trable head)
<th></th> //h:加粗
<td></td> //d:数据
<table border=""> //设置边框（只能修改外边框）
cellspacing="0" //设置单元格边框间隙为0
width="900px" height="300px" //设置表格大小
<thead height="200px" > //改变表头单元格的大小
align="left" //改变表头单元格内容的对齐方式
<td rowspan="2">张三</td> //合并列单元格
<details></details> //详情标签
<div tabindex="1">我是第一个</div> //获取焦点
表单
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>
<form action="https://www.baidu.com/s">
<input type="text" name="wd"> //指定将输入框的内容提交到百度的搜索框
<form action="#" > //输出到当前界面
<form action="https://www.baidu.com/s" method="get">
post
<input type="text" name="user" value="gouxin"> //文本框默认内容为gouxin
<input type="radio" name="gander" value="nan">男
<input type="radio" name="gander" value="nu">女<br>
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="li">梨
<input type="checkbox" name="fruit" value="taozi">桃子<br>
<input type="checkbox" name="fruit" value="apple" id="苹果"><label for="苹果">苹果</label>
//扩大选择识别范围
<input type="hidden" name="hid" value="doifjf"> //隐藏域
<button>提交</button>
<input type="submit"> //提交按钮
<input type="button"> //普通按钮（无其它作用）
<textarea cols="20" rows="10">
</textarea> //文本域
<select name="籍贯" id="">
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="淮安">淮安</option>
</select>
<input type="radio" name="gander" value="nu" checked>女<br>
<option value="淮安" selected>淮安</option>
//默认选中
<textarea cols="20" rows="10" maxlength="200">
//最大宽度
全局属性
唯一标识
<div id="one"></div> //在同一个文件中只能出现一次
<div class="pink"> //可以出现多次
用户名：<input type="text" name="user" value="" placeholder="请输入用户名"><br>
出现一次
```html
<div class="pink"> //可以出现多次
用户名：<input type="text" name="user" value="" placeholder="请输入用户名"><br>
作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>欢迎您来到登录页</h1>
<div>
<a href="E:\C\web前端\images\76cb-hxyuaph1206941.jpg" target="nn">首页</a>
<a href="E:\C\web前端\images\屏幕截图 2023-07-05 215956.png" target="nn">列表页</a>
<a href="E:\C\web前端\images\屏幕截图 2023-07-05 220307.png" target="nn">详情页</a>
<a href="E:\C\web前端\images\屏幕截图 2023-07-05 212344.png" target="nn">登录页</a>
</div>
<div>
<iframe name="nn" frameborder="0" width="800px" height="800"></iframe>
</div>
</body>
</html>
效果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
