前端HTML基础
1 标签语法
HTML 超文本标记语言——HyperText Markup Language。
- 超文本：链接
- 标记：标签，带尖括号的文本
标签结构：
- 标签要成对出现，中间包裹内容
- <>里面放英文字母（标签名）
- 结束标签比开始标签多 /
- 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>
2 html 骨架
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键
3 标题标签
一般使用在新闻标题、文章标题等地
标题标签的特点：
- 文字加粗
- 字号逐渐减小
- 独占一行
- h1 标签只能使用一次，h2-h6没有使用次数
<!-- 这里是标题标签 -->
<h1> h1 是一级标题，一般一个网页只用一次</h1>
<h2> h2 - h6 可以无限使用，字号逐渐减小</h2>
<h3> 三级 </h3>
<h4>四级</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
4 注释
在 vscode 中添加注释的快捷键的方式是：
<!-- 我是 HTML 注释 -->
- windows 中 Ctrl + /
- Mac 中 command + /
5 常用的一些标签
<p>段落</p>
<!-- 换行标签 -->
<br>
<!-- 水平线 -->
<hr>
无语义布局标签
<div> div 标签 独占一行</div>
<span> span 标签 不换行</span>
6 文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
<!-- 上面都是常用的 strong em ins del 这几个标签自带强调含义-->
<strong> strong 加粗</strong>
<b> b 加粗</b>
<br>
<em> em 倾斜</em>
<i> i 倾斜</i>
<br>
<ins> ins 下划线 </ins>
<u> u 下划线</u>
<br>
<del> del 删除线</del>
<s> s 删除线</s>
7 路径问题
相对路径：从当前文件位置出发查找目标文件
/ 表示进入某个文件夹里面 → 文件夹名 /
./ 表示当前文件所在文件夹 → ./
../表示当前文件的上一级文件夹 →../
绝对路径：从盘符出发查找目标文件
- C:\images\mao.jpg
8 图像标签
作用：在页面中插入图片
<img src="图片的 URL">
9 超链接标签
作用： 跳转到其他页面
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./test01.html" target="_blank">跳转到test01.html</a>
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>
10 音视频标签
书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词
比如 ： loop = “loop” 可以简写为 loop
<!-- 音频标签
controls : 音频按钮
loop ： 循环播放
autoplay ： 浏览器一般禁用 -->
<audio src="../music.mp3" controls loop autoplay></audio>
<!--视频标签
controls : 控制按钮
loop ： 循环播放
muted: 静音播放
autoplay ： 只有在静音状态下才会自动播放
-->
<video src="../html.mp4" controls loop muted autoplay></video>
11 列表
列表分类：无序列表、有序列表、定义列表。
无序列表
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
...
</ul>
有序列表
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述
<!-- 定义列表 -->
<dl>
<dt>列表标题</dt>
<dd>列表描述</dd>
<dd>列表描述2</dd>
<dt>列表详情</dt>
<dd>列表11</dd>
<dd>列表12</dd>
</dl>
12 表格
标签：table 嵌套 tr，tr 嵌套 td / th。
<!--
table : 表示表格标签
tr : 表示行
th : 表头单元格
td : 内容单元格 -->
<!-- 使用border 属性可以为表格添加边框线 -->
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
</table>
合并表格
合并单元格的步骤：
- 明确合并的目标
- 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
13 表单
作用：收集用户信息。
<form action=""></form>
使用场景：
- 登录页面
- 注册页面
- 搜索区域
input标签
1. type 属性
文本框 ：<input type="text" >
密码框 ：<input type="password">
单选框 ：<input type="radio">
多选框 ：<input type="checkbox">
上传文件：<input type="password">
2 .其他属性
标签占位文本 ： placeholder
<input type="..." placeholder="提示信息">
<!-- 如果不添加 multiple 默认只能选中一个文件，添加这个属性可以选择多个文件 -->
上传文件：<input type="file" multiple>
在单选框中常用的属性
name: 控件名称，对控件进行分组，同组只能选中一个（单选功能）
checked：默认选中
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<!-- 默认显示第一项，selected 属性实现默认选中功能。 -->
<option selected>武汉</option>
</select>
文本域
作用：多行输入文本的表单控件。
注意点：
- 实际开发中，使用 CSS 设置 文本域的尺寸
- 实际开发中，一般禁用右下角的拖拽功能
<textarea>默认提示文字</textarea>
label 标签
作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
- 写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man">
<label for="man">男</label>
- 写法二：使用 label 标签包裹文字和表单控件，不需要属性
<label><input type="radio"> 女</label>
提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。
<button type="...">按钮</button>
type = submit : 提交按钮，点击可以提交到后台（默认功能）
type = submit : 重置按钮，点击表单后讲内容恢复默认值
type = submit : 普通按钮，没有功能，一般配合js使用
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是 提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
字符实体
注意是 & 开头 ；结尾
<!-- 空格字符： -->
你我都是牛 马
<!--
小于< : <
大于> : > -->
< p >
实例
<h1>注册信息</h1>
<form action="">
<!-- 个人信息 -->
<h2>个人信息</h2>
<label>姓名:</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码:</label><input type="password" placeholder="请输入密码">
<br><br>
<label>密码确认:</label><input type="password" placeholder="请输入密码">
<br><br>
<label>姓别:</label>
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>
<br><br>
<label>居住城市:</label>
<select>
<option>北京</option>
<option>天津</option>
<option>武汉</option>
<option>深圳</option>
<option>南京</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>最高学历:</label>
<select>
<option>大专</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select>
<br><br>
<label>学校名称:</label><input type="text"><br><br>
<label>所学专业:</label><input type="text"><br><br>
<label>在校时间:</label>
<select>
<option>2022</option>
<option>2023</option>
<option>2024</option>
</select>
----
<select>
<option>2025</option>
<option>2026</option>
<option>2027</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称:</label><input type="text"><br><br>
<label>工作描述:</label><br><textarea></textarea><br><br>
<input type="checkbox"><label>已阅读并同意以下协议:</label>
<ul>
<li> <a href="#">《用户服务协议》</a></li>
<li> <a href="#">《隐私政策》</a> </li>
</ul>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
原文地址：https://blog.csdn.net/XUN__MLF/article/details/140446637
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！