HTML概述
- HTML表示网页结构的“骨”
决定网页有几段文字、几个编辑框、几个按钮… - HTML代码是由“标签”构成的
- HTML的代码是跑在浏览器上的
- 推荐编辑器VScode
- HTML的语法相对宽松，浏览器的鲁棒性强，一个错误的HTML代码有时也可以运行
标签简介
<boby> 内容 </boby>
<boby>是开始标签，</boby>是结束标签<br />是单标签- 开始标签和结束标签中写标签的内容
<boby id = "nice"> </boby>开始标签中可以带有属性，如id属性相当于一个唯一标识符- 属性之间空格隔开
- id 是属性名，“nice” 是属性名，属性名不用双引号，属性值要用双引号，= 连接
<html>
<head>
页面
</head>
<boby>
hello
</boby>
</html>
- 一个html文件都应该有一个
<html> </html>标签，此标签是“顶级标签”，其余标签都是它的子标签 - html的标签可以嵌套，外层的标签称父标签，内层的标签称子标签
- 一个子标签只能有一个父标签，一个父标签可以有多个子标签
- HTML的标签之间的结构关系就构成了一个DOM树 （DOM–文档对象模型）
<!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>Document</title>
</head>
<body>
</body>
</html>
- VScode中 ！+ Tab建 快速生成代码的主题框架
<!DOCTYPE html>定义文件类型，方便服务器识别，值是html，表示当前文件是一个HTML5版本的文件<meta charset="UTF-8">定义字符编码方式，没有就可能出现乱码
常见简单标签
- 注释标签
选中文字 Ctrl+w生成
<!--注释-->
- 标题标签
一共六个
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
....
- 段落标签
每一个p标签就是一个段落，没有缩进
html中的中文文字间输入多个空格相当于一个空格
html中的换行符("/n")无效，只相当于一个空格
<p>
根据国家有关法律法规和政策文件，近期审计署审计发现，中国石油天然气
集团有限公司下属燃料油公司（以下简称燃料油公司）存在倒卖进口原油问
题。
按照党中央、国务院部署，国务院联合调查组依法依规、客观公正、实
事求是开展了
核查调查。
</p>
- 换行标签
<br/>
- 格式化标签
<strong>加粗</strong>
<b> </b>
<em>倾斜</em>
<i> <i>
<del>删除线</del>
<s> </s>
<ins>下划线</ins>
<u> </u>
图片标签
<img src = "图片的相对路径/绝对路径/网络路径">
- 路径是就是一系列目录组合在一起，目录和目录之间用分隔符
/
Windows的分隔符默认是\，也支持/
字符串中的\要用\\表示 - 路径分为相对路径和绝对路径（磁盘路径和网络路径）
- 相对路径
相对路径需要一个基准目录。在HTML场景中，html所处的目录就是“基准目录”，./表示当前路径，../表示当前路径的上级路径
如 在html1文件中插入1.jpg图片
<img src = "../image/1.jpg">
<img src = "./image/1.jpg">或
<img src = "image/1.jpg">
- 磁盘路径
<img src = "C:/Users/86188/Documents/前端三剑客/image/1.jpg">
无论在那个目录下都能找到，不建议，代码的可移植性不强
- 网络路径
<img src = "https://img-s-msn-
com.akamaized.net/tenant/amp/entityid/AATbzvL.img?
h=1080&w=1920&m=6&q=60&o=f&l=f&x=283&y=248">
- scr 属性必须存在
- 可以添加其他的属性
| 属性名 | 作用 |
|---|---|
| title | 鼠标放在图片上显示说明 |
| height | 高度 |
| width | 宽度 |
| alt | 如果图片加载不出来，就显示文字；如果图片加载出来了，对显示效果没有影响 |
超链接标签
<a href = "路径">显示名字</a>
- 外部路径
<a href = "https://blog.csdn.net/gjwloveforever?type=blog"
target = "_blank"> 我的博客 </a>
- 内部链接
网站内部的链接，写相对路径
<a href = "./1-18.html" target = "_blank"> 内部链接 </a>
- 空链接
<a href = "#"> 空链接 </a>
- 下载链接
点击直接下载文件
<a href = "./image/test.zip">下载链接</a>
- 给照片添加链接
<a href="https://blog.csdn.net/gjwloveforever?type=blog">
<img src="./image/1.jpg"></a>
- 锚点链接
快速定位到页面的某个位置
输入lorem生成随机数字
<style>
p{
height: 1000px;
}
</style>
<a href = "#one"> 济南 </a>
<a href = "#two"> 青岛 </a>
<a href = "#three"> 淄博 </a>
<p id = "one">
济南 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cum nam ipsum voluptatibus repellat. Aspernatur, ullam
possimus consequuntur soluta et aut vero magnam? Aut,
beatae ad sequi facere ipsa dolor magnam?
</p>
<p id = "two">
青岛 <br/>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Unde, cum et totam quas explicabo vero. Exercitationem
rerum suscipit nesciunt odit ipsa, perferendis vero harum
officiis neque minus animi magnam aliquam?
</p>
<p id = "three">
淄博 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ea eaque deleniti provident veniam nam laudantium tempora
atque voluptatum consectetur cumque! Cumque laboriosam
molestias veritatis qui sequi hic rerum labore eum.
</p>
表格标签
<table width = "500px" height = "200px" border = "1px" cellspacing = "0">
<tr>
<th> 城市名 </th>
<th> 位置 </th>
<th> GDP(亿) </th>
</tr>
<tr>
<td> 鹤岗 </td>
<td rowspan = "2"> 黑龙江 </td>
<td> 1200 </td>
</tr>
<tr>
<td>大庆</td>
<td> 1600 </td>
</tr>
<tr>
<td> 三亚 </td>
<td> 海南 </td>
<td> 2600 </td>
</tr>
<tr>
<td> 南通 </td>
<td> 江苏 </td>
<td> 10600 </td>
</tr>
</table>
| 标签 | |
|---|---|
| table | 表示整个表格 |
| tr | 表示表格的一行 |
| td | 表示表格的一个单元格 |
| th | 表示表头单元格，会加粗 |
- 合并单元格
| rowspan = “n” | 跨行合并 |
| colspan = “n” | 跨列合并 |
列表标签
- 无序列表
<h3>无序列表</h3>
<ul>
<li>白山</li>
<li>四平</li>
<li>公主岭</li>
<li>延庆</li>
</ul>
- 有序列表
<h3>有序列表</h3>
<ol>
<li>白山</li>
<li>四平</li>
<li>公主岭</li>
<li>延庆</li>
</ol>
- 自定义列表
<dl>
<dt>辽宁</dt> <!--小标题-->
<dd> 铁岭</dd>
<dd> 沈阳</dd>
<dd> 辽阳</dd>
<dd> 营口</dd>
</dl>
表单标签
input标签
| 属性 | |
|---|---|
| type | 控制表单控件的类型 |
| name | 主要用于单选按钮 |
| checked | 默认被选中 checked = “checked” 被选中 checked = true 没被选中 checked = false |
| value | input中的默认值 |
- 文本框
<input type="text"> 一般用于用户名，输入内容可见
- 密码框
<input type="password"> 用于密码，输入内容不可见
- 单选框
选项之间必须有相同的name属性，才能实现多选一效果
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
- 复选框
<input type="checkbox">石家庄
<input type="checkbox">邯郸
<input type="checkbox">唐山
- 按钮
<input type="button" value="我是按钮">
- 选择文件
<input type="file">
label标签
点击文字也可以选中 选框
input标签中的id属性值和label标签中的for属性值一致
<input type="radio" name="sex" checked="checked" id="male"> <label for="male">男</label>
<input type="radio" name="sex" id="female"> <label for="female">女</label>
select标签
下拉菜单
搭配option标签使用，option标签中的select属性表示默认选中，若select属性没有复制，默认选中第一个
<select>
<option> 保定</option>
<option> 廊坊</option>
<option> 邢台</option>
<option selected = "selected"> 秦皇岛</option>
<option> 张家口</option>
</select>
textarea标签
文本框
<textarea>文本框的初始内容</textarea>
无语义标签
- div 独占一行
相当于是大盒子 - span 不独占一行
相当于是小盒子
<div>
<span> 鹤壁 </span>
<span> 濮阳 </span>
<span> 平顶山 </span>
</div>
<div>
<span> 安阳 </span>
<span> 商丘 </span>
<span> 洛阳 </span>
</div>
推荐一个网站
mdnHTML
5207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
