HTML简介
HTML 是网页的标准标记语言。
所有 HTML 文档都必须以文档类型声明开头：<!DOCTYPE html>。
HTML 文档本身以 <html> 开始，以 </html> 结束。
HTML 文档的可见部分位于 <body> 和 </body> 之间。
文件保存以.html为后缀命名
使用文本编辑工具输入以下内容，将文件保存为hello.html文件
<!DOCTYPE html>
<html>
<body>
<header>
<title>这是一个标题</title>
</header>
<p>
这是一个文本，书写你的内容...
</p>
</body>
</html>
如何查看，hello.html文件绝对路径复制到浏览器并回车即可查看，效果如下：
HTML快速开始
一般代码编辑工具有快速生成html骨架的快捷键
在.html文件中！enter/tab 感叹号+回车键或tab键
在pycharm里面使用： ! + tab键，效果如下
可以编辑你的内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>快捷键自动生成</title>
</head>
<body>
这是使用快捷键自动生成的html文件骨架
</body>
</html>
查看效果如下
html文本的注释
ctrl + / 添加/删除 注释；
效果如下
<!-- 备注 -->
<!--</html>-->
标签
标签的关系
如下html标签
<html>
<head></head>
<body>
</body>
</html>
html 与head，body都是嵌套关系
head，body 并列关系
标题标签
标签名：h1 ~ h6
文字加粗，字号逐渐减小，独占一行
<body>
<h1> 一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
</body>
效果如下
换行和水平线
<br> 换行
注意：直接enter换行是无效的
br可以多个
<hr> 水平线
第一行
<br>
第二行
<br>
使用回车键换行
回车键换行无效
使用<br> 换行
<br> 换行效果
<hr> 水平线
<hr> 水平线效果
我发现将之前换行<br> 位置改成水平线<hr> 也能起到换行效果，但实际项目中不知此写法是否存在
文本格式化标签
一般使用左边
<body>
<strong>
stong 加粗
</strong>
<b> b 加粗</b>
<em> em 倾斜</em>
<i> i 倾斜</i>
<ins> ins 下划线 </ins>
<u> u 下划线</u>
<del> del 删除线</del>
<s> s 删除线 </s>
</body>
效果如下
图像标签
图像标签格式 <img src=" ">
<img src="F:\前端学习\插图\image-20240825154003261.png" >
<body>
<!-- 正常显示 -->
<img src="F:\前端学习\插图\image-20240825154003261.png" >
<!-- 图像显示加载不出来时， 网速等影响时 ，图片位置显示的-->
<img src="F:\前端学习\插图\image-20240825150858000.png" alt="图片加载缓慢稍等">
<!-- 正常显示 ，鼠标 悬停 图片上会显示的 提示文字-->
<img src="F:\前端学习\插图\image-20240825145938347.png" title="图片点击跳转" >
<!-- 正常显示 ，浏览器缩放图片，会等比例缩放-->
<img src="F:\前端学习\插图\image-20240825154003261.png" width="100" >
<!-- 正常显示 ，浏览器缩放图片，会等比例缩放-->
<img src="F:\前端学习\插图\image-20240825154003261.png" height="300" >
</body>
路径
相对路径（从当前目录找本目标文件）
当前文件夹 .
当前文件上一级文件夹 …
进入文件夹 /
绝对路径（用于友情链接等场景）
盘符路径
在线网站路径
超链接
跳转到其他页面
<body>
<!-- 跳转到网页链接 -->
<a href="http://www.baidu.com">跳转到百度 </a>
<!-- 跳转到本地文件 -->
<a href="../../插图/">跳转截图 </a>
<!-- 跳转到本地文件， target="_blank" 新窗口打开 -->
<a href="../../插图/" target="_blank"> 新窗口打开跳转截图 </a>
<!-- 开发初期，不知道超链接的跳转地址，href="#" 表示空链接，不会发生跳转 -->
<a href="#" > 空链接 </a>
多媒体/音频和视频标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音效</title>
</head>
<body>
<!-- 在html5 里面 ，如果属性名和属性值完全一样，可以简写为一个单词controls="content" -->
<audio src="E:/山止川行/寻常歌.mp3" controls loop autoplay></audio>
</body>
</html>
查看如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>视频</title>
</head>
<body>
<!-- 在浏览器中，要想自动播放，必须要有muted属性 -->
<video src="G:\python数据分析\Python3网络爬虫实战\1-Python3+Pip环境配置.mp4" controls loop muted autoplay>
</video>
</body>
</html>
列表表格表单
列表
作用：布局内容排列整齐的区域
注意：
父标签不可以包裹其他标签，子标签可以包裹任何东西
ul里面只能包裹li标签，li标签里面可以包裹任何内容
无序列表
<ul>包裹<li>，<ul>是无序列表，<li>是列表条目
<body>
<ul>
<li>列表条目1</li>
<li>列表条目2</li>
<li>列表条目3</li>
</ul>
</body>
有序列表
<ol>包裹<li>，<ol>是有序列表，<li>是列表条目
<ol>
<li>有序列表条目1 </li>
<li>有序列表条目2 </li>
<li>有序列表条目3 </li>
</ol>
定义列表
<dl>包裹<dt>和<dd>，<dt>是定义列表的标题，<dd>是详情/描述
<dl>
<dt> 服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
<dd>售后流程</dd>
<dt>vip客户中心</dt>
<dd>vip申请</dd>
<dd>vip售后</dd>
<dd>vip服务</dd>
</dl>
查看效果如下
表格
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<th>张三</th>
<th>100</th>
<th>100</th>
<th>200</th>
</tr>
<tr>
<th>李四</th>
<th>98</th>
<th>100</th>
<th>198</th>
</tr>
<tr>
<th>总结</th>
<th>全市第一</th>
<th>全市第一</th>
<th>全市第一</th>
</tr>
</table>
</body>
查看如下
表格结构
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<th>张三</th>
<th>100</th>
<th>100</th>
<th>200</th>
</tr>
<tr>
<th>李四</th>
<th>98</th>
<th>100</th>
<th>198</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>总结</th>
<th>全市第一</th>
<th>全市第一</th>
<th>全市第一</th>
</tr>
</tfoot>
</table>
</body>
</html>
表格合并
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<th>张三</th>
<th>100</th>
<th rowspan="2">100</th>
<th>200</th>
</tr>
<tr>
<th>李四</th>
<th>98</th>
<!-- <th>100</th> -->
<th>198</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>总结</th>
<th colspan="3">全市第一</th>
<!-- <th>全市第一</th> -->
<!-- <th>全市第一</th> -->
</tr>
</tfoot>
</table>
</body>
表单input标签
input标签
<body>
<!-- 文本框，输入什么就会显示什么 -->
文本框<input type="text">
<br>
<!-- 密码框：输入什么都会以*显示 -->
密码框<input type="password">
<br>
单选框<input type="radio">
<br>
多选框<input type="checkbox">
<br>
文件上传<input type="file">
</body>
查看如下
占位文本
<body>
<!-- 文本框，输入什么就会显示什么 -->
文本框<input type="text" placeholder="请输入用户名">
<br>
<!-- 密码框：输入什么都会以*显示 -->
密码框<input type="password" placeholder="请输入密码">
<br>
单选框<input type="radio">
<br>
多选框<input type="checkbox">
<br>
文件上传<input type="file">
</body>
查看如下
单选框radio
<!-- 注意，单选功能实现 name="gander" name取值需要一致；加checked，给默认选中项-->
性别:
<input type="radio" name="gander">男
<input type="radio" name="gander" checked>女
查看如下
上传文件file
多文件上传：<input type="file" multiple>
多选框checkbox
兴趣爱好：
<input type="checkbox">敲代码
<input type="checkbox">敲前端代码
<input type="checkbox" checked>敲HTML前端代码
查看如下
下拉菜单
<body>
城市：
<!-- name，id 发送数据时才需要 -->
<select>
<!-- 默认显示 最上面一个 北京 -->
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<!-- 设置默认显示的城市 selected -->
<option selected>武汉</option>
</select>
</body>
查看如下
文本域
<!-- 右下角有拖拽功能，未来都会禁用；未来用css设置尺寸 -->
<textarea>请输入评论</textarea>
label
性别：
<input type="radio" name="gander" id="man"><label for="man">男</label>
<label><input type="radio" name="gander">女</label>
按钮button
<!-- 表单区域 -->
<!-- action 未来发送数据的地址-->
<form action="">
<!-- 文本框，输入什么就会显示什么 -->
用户名：<input type="text" placeholder="请输入用户名">
<br>
<!-- 密码框：输入什么都会以*显示 -->
密码：<input type="password" placeholder="请输入密码">
<br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
<br>
</form>
布局标签
<body>
<!-- 大盒子 -->
<div>这是div标签</div>
<div>这是div标签</div>
<!-- 小盒子 -->
<span>这是span标签</span>
<span>这是span标签</span>
</body>
字符实体
<body>
<!-- 在代码中直接敲键盘空格，网页只识别一个 -->
昨夜西风凋碧树，独上 高楼，望尽 天涯路！
<p>
</body>
扫一扫
2977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
