1. HTML基本结构
在 VSCode 中,输入 !即可生成一个基本的HTML结构:
<!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>
</body>
</html>
观察可以发现,一个HTML文件内容由 html 标签包裹,里面主要分为两部分 head 和 body;
head 标签里面的 title 标签内容表示网页的标题;
我们主要写 body 标签里面的内容;
2. 标题标签
标题标签用 h1 到 h6 表示,其中 h1 为一级标题,h6 为六级标题;
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
网页显示效果:
3. 段落标签
段落标签用 p 表示,和标题标签类似,只不过默认没有加粗;
段落里面的文本有一些样式:加粗、斜体、删除线、下划线;
<p>这是一个段落标签</p>
<p>更改文本样式:<b>字体加粗</b></p>
<p>更改文本样式:<strong>字体加粗</strong></p>
<p>
更改文本样式:<i>斜体</i> | <u>下划线</u> | <s>删除线</s>
</p>
网页效果图:
4. 无序列表
无序列表先使用一个 ul 标签包裹,然后里面的每一条内容用 li 包裹;
<ul>
<li>无序列表元素 1</li>
<li>无序列表元素 2</li>
<li>无序列表元素 3</li>
</ul>
网页效果图:
5. 有序列表
无序列表先使用一个 ol 标签包裹,然后里面的每一条内容用 li 包裹;
<ol>
<li>有序列表元素 1</li>
<li>有序列表元素 2</li>
<li>有序列表元素 3</li>
</ol>
网页效果图:
6. 表格标签
表格标签的组成:
tr – table row – 表格行
td – table data – 列数据
th – table head – 列标题
在使用表格标签的时候,首先使用一个 table 标签包裹,这里可以添加表格属性,例如分隔线宽度;
然后里面使用 tr 标签表示表格的每一行;
tr 标签里面使用 th 或者 td 表示每一行中的各列数据或者标题;
<table border="1">
<tr>
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
<tr>
<td>数据 1</td>
<td>数据 2</td>
<td>数据 3</td>
</tr>
<tr>
<td>数据 4</td>
<td>数据 5</td>
<td>数据 6</td>
</tr>
<tr>
<td>数据 7</td>
<td>数据 8</td>
<td>数据 9</td>
</tr>
</table>
网页效果图:
8. 注释
直接使用快捷键 Ctrl + / 进行注释;
<!-- 表格标签 -->
<h3>表格标签的组成:</h3>
<p>tr -- table row -- 表格行</p>
<p>td -- table data -- 列数据</p>
<p>th -- table head -- 列标题</p>
9. 换行和水平分割线
换行使用 br 标签,注意这是一个单标签;
水平分割线使用 hr 标签,这也是一个单标签;
<h1>HTML 属性练习</h1>
<hr>
<a href="https://countingstars.com.cn">点击进入我的网站</a>
<br>
<br>
<a href="https://countingstars.com.cn" target="_blank">点击进入我的网站</a>
10. HTML属性
使用格式:<开始标签 属性名 = ‘属性值’>
属性名称不区分大小写,但是属性值对大小写敏感;
适用于大多数 HTML 元素的属性:
属性 | 描述 |
---|---|
class | 为 HTML 元素定义一个或多个类名(类名从 CSS 样式文件引入) |
id | 定义元素唯一的 id |
style | 规定元素的行内样式 |
10.1 a 标签
常用于链接到其他的网页或者位置,有一个很重要的属性 href,可以是其他网页的 URL、文件路径、电子邮箱的地址、手机号等等;
如果 href 属性写一个 #,表示不跳转,但是显示链接效果,有点像函数里面的 pass;
a 标签还有一个 target 属性,表示新网页链接的打开方式;
<a href="https://countingstars.com.cn">点击进入我的网站</a>
<a href="#">点击进入我的网站</a>
<a href="https://countingstars.com.cn" target="_blank">点击进入我的网站</a>
10.2 img 标签
使用 img 标签可以在网页中嵌入图片,默认属性有 src 和 alt;
src 属性表示图片的路径或者 URL,如果图片在当前目录下,可以直接使用相对路径(图片的文件名);
alt 属性表示图片的替代文本,如果图片无法加载,浏览器就会显示 alt 指定的文本;
width 属性可以设置图片宽度,height 属性可以设置图片高度;
<h2>img 标签练习</h2>
<img src="pic1.jpg" alt="该图片无法显示" width="450" height="300">
<br>
<img src="pic2.jpg" alt="该图片无法显示" width="450" height="300">
<br>
<img src="pic2.png" alt="该图片无法显示" width="450" height="300">
<br>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.59bb747cef8837a58465b80950b2dbcf?rik=pxuVNa6jykSM%2fg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn10121%2f156%2fw1024h1532%2f20181216%2fadc8-hqhtqsp0422526.jpg&ehk=zrMFzKEh%2fjtqPJhry78cI69ZPVgARECR0cB1n3uduS8%3d&risl=&pid=ImgRaw&r=0" alt="该图片无法显示" width="450" height="700">
网页显示效果:
11. HTML区块
11.1 块元素 block
块级元素通常用于组织和布局页面的主要结构和内容;
例如:段落、标题、列表、表格等
它们用于创建页面的主要部分,将内容分隔为逻辑块;
常见的块级元素标签:
- div
- p
- h1至h6
- ul
- ol
- li
- table
- form
11.2 行内元素 inline
行内元素通常用于添加文本样式或为文本中的一部分应用样式;
它们通常可以在文本中插入小的元素,例如超链接等等;
特点:
- 行内元素通常在同一行内呈现,不会独占一行;
- 它们只占据其内容所需的宽度,而不是整行的宽度;
- 行内元素不能包含块级元素,但是可以包含其他行内元素;
- 常见的行内元素标签:
- span
- a
- strong
- em
- img
- br
- input
11.3 示例
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 区块</title>
</head>
<body>
<!-- 导航栏 -->
<!-- 输入 div.nav 快速生成 -->
<div class="nav">
<h3>导航栏</h3>
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
<a href="#">链接 4</a>
<a href="#">链接 5</a>
<a href="#">链接 6</a>
<hr>
</div>
<!-- 主要内容 -->
<!-- 输入 div.content 快速生成 -->
<div class="content">
<h3>文章标题</h3>
<p>文章内容 1</p>
<p>文章内容 2</p>
<p>文章内容 3</p>
<p>图片内容 1</p>
<img src="pic4.jpeg" alt="图片无法加载" width="450" height="320">
<p>图片内容 2</p>
<img src="草神.jpg" alt="图片无法加载" width="450" height="300">
<hr>
</div>
<span>这是第一个span标签</span>
<br>
<span>这是第二个span标签</span>
<br>
<span>这是第三个span标签</span>
<br>
<span>点击跳转 <a href="#">链接</a></span>
<hr>
<!-- 页尾 -->
<div class="end">
<span>点击进入我的网站 <a href="http://www.countingstars.com.cn/">链接</a></span>
<h4>By CountingStars</h4>
</div>
</body>
</html>
网页显示效果:
12. HTML表单
表单的标签:
form 标签,表单的容器,类似于有序列表的容器为 ol 标签,表格的容器为 table 标签;
input 标签,表单里面的输入,他有一个很重要的属性 type,表示输入内容的类型;
12.1 type=“text”
input 标签还可以设置输入框提示,当未输入时,输入框有浅色提示,使用 placeholder 属性;
<form action="">
<input type="text" placeholder="请输入内容">
<input type="text" placeholder="请输入数字">
<br>
<span>密码: <input type="text" placeholder="请输入密码"></span>
</form>
input 标签还有一个属性 value,表示输入框默认填写好的值;
<form action="">
<span>用户名:</span>
<input type="text" value="Jarvis"><br><br>
<span>账号:</span>
<input type="text" placeholder="account"><br><br>
<span>密码:</span>
<input type="text" placeholder="password"><br><br>
</form>
这里的 span 标签也可以使用 label 标签替换,需要注意的是, label 标签只能和 input 标签绑定使用;
12.2 type=“radio”
input 标签也可以实现选择框的效果:
<form action="">
<span>用户名:</span>
<input type="text" value="Jarvis"><br><br>
<span>账号:</span>
<input type="text" placeholder="account"><br><br>
<span>密码:</span>
<input type="text" placeholder="password"><br><br>
<label for="">性别:</label>
<input type="radio">男
<input type="radio">女
<input type="radio">其他
</form>
但是,这样的效果其实是,每个选项都可以选择;
如果想要实现单选框,需要给每一个选项的 input 标签增加一个相同的 name 属性:
<form action="">
<span>用户名:</span>
<input type="text" value="Jarvis"><br><br>
<span>账号:</span>
<input type="text" placeholder="account"><br><br>
<span>密码:</span>
<input type="text" placeholder="password"><br><br>
<label for="">性别:</label>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</form>
可以发现,当我们使用 label 标签时,会默认有一个 for 属性,这个属性是用来和对应的输入框 id 绑定的;
每个 label 只能绑定一个输入框 id,所以对于这种多选框、单选框肯定不适用,但是适用于用户名、密码这些输入;
12.3 type=“password”
如果想要输入的密码是黑点点显示,可以将 input 标签中的 type 属性设置为 password 类型;
<form action="">
<label for="username">Username:</label>
<input type="text" value="Jarvis" id="username"><br><br>
<label for="account">Account:</label>
<input type="text" placeholder="account" id="account"><br><br>
<label for="password">Password:</label>
<input type="password" placeholder="password" id="password"><br><br>
<label for="">Gender:</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other
</form>
12.4 type=“checkbox”
input 标签也有专门的多选框,只需要将每个选项的 type 属性设置为 checkbox,同时每个选项都要有一个相同的属性;
<form action="">
<label for="username">Username:</label>
<input type="text" value="Jarvis" id="username"><br><br>
<label for="account">Account:</label>
<input type="text" placeholder="account" id="account"><br><br>
<label for="password">Password:</label>
<input type="password" placeholder="password" id="password"><br><br>
<label for="">Gender:</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other
<br><br>
<label for="">Hobby:</label>
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 跳舞
<input type="checkbox" name="hobby"> 说唱
<input type="checkbox" name="hobby"> 打篮球
</form>
12.5 type=“submit”
用于提交表单填写的数据,提交到的位置取决于 form 自带的属性 action 的值;
action 的值是一个 URL,表示服务器或者后端提供的一个 API,如果我们没有,可以暂时用一个 # 占位;
提交按钮的默认名称是提交,如果我们想修改,可以使用 value 属性自己指定;
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表单</title>
</head>
<body>
<form action="#">
<label for="username">Username:</label>
<input type="text" value="Jarvis" id="username"><br><br>
<label for="account">Account:</label>
<input type="text" placeholder="account" id="account"><br><br>
<label for="password">Password:</label>
<input type="password" placeholder="password" id="password"><br><br>
<label for="">Gender:</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other
<br><br>
<label for="">Hobby:</label>
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 跳舞
<input type="checkbox" name="hobby"> 说唱
<input type="checkbox" name="hobby"> 打篮球
<br><br>
<input type="submit">
<input type="submit" value="确认">
</form>
</body>
</html>
最终显示效果: