HTML
- 超文本标记语言 Hyper Text Markup Language
< >标签狂魔...
注释
注释是代码之母
在搭建页面时, 通常会利用注释来划分区域
<!--导航条开始--> <!--导航条结束--> <!--侧边栏开始--> <!--侧边栏结束-->
- 单行注释
<!--单行注释-->
- 多行注释
<!-- 多行注释1 多行注释2 多行注释3 -->
HTML文档结构
- head 不是给人看的, 是给浏览器看的
- body 内的代码才是给人看的
<html>
<head></head>
<body></body>
</html>
标签的分类
- 双标签, 既有头有尾
<h1>This is the first html page I made!</h1>
- 自闭合标签, 既有头无尾
<img src="test.jpg"/>
head内常用标签
- title 定义网页标题
<title>Welcome to MrBigB's Website</title> - style 内部支持写css代码
<style>
h1 {
color: darkred;
}
</style>
- link 引入外部css样式文件
<link rel="stylesheet" type="text/css" href="test.css"/>
/* test.css */
h2 {
color: darkgreen;
}
- script 内部可以直接写js代码, 也可以引入外部js文档
<script>alert="Hello world!"</script><script src="test.js"></script>
- meta 定义网页源信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to MrBigB's Website</title>
<style>
h1 {
color: darkred;
}
</style>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script src="test.js"></script>
</head>
<body>
<h1>This is the first html page I made!</h1>
<h2>HTML is fucking awesome!</h2>
<img src="https://images.cnblogs.com/cnblogs_com/bigb/1551224/o_%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA.jpg"/>
</body>
</html>
body内常用标签
- h1-h6 标题标签
- p 段落标签, 一个p就是一行内容
- s 删除线
- b 加粗
- u 下划线
- i 斜体
- br 换行
- hr 一条分割线
body内特殊符号
空格&¥¥>><<©©®®
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to MrBigB's website!</title>
</head>
<body>
<h1>h1标签效果测试</h1>
<h2>h2标签效果测试</h2>
<h3>h3标签效果测试</h3>
<s>s标签效果测试</s>
<b>b标签效果测试</b>
<u>u标签效果测试</u>
<i>i标签效果测试</i>
<p>p标签效果测试</p>
<br>
我是无标签文本1上面测试的br标签效果
<hr>
我是无标签文本2上面测试的是hr标签的效果
<p>p标签效果测试</p>
<p>a > b</p>
<p>a < b</p>
<p>&</p>
<p>¥</p>
<p>©</p>
<p>®</p>
</body>
</html>
块级标签和行内标签
- 行内标签, 内部文本有多大就占多大: s, i, u, b, span
- 行内标签不能嵌套行内标签和块级标签
- 块级标签独占一行: h1-h6, p, br, hr, div
- 块级标签内可以嵌套其他块级标签和行内标签
- 注意: p标签虽然也是块级标签, 但只能嵌套行内标签, 不能嵌套块级标签
标签的两个属性
- id 标签的编号, 每一个标签都应该都一个id, 且同一个文档中, 标签的id是唯一的
- class 类属性, 有点类似于面向对象的继承
class = "c1, c2, c3"则当前标签就会拥有c1, c2, c3的所有样式
body内重要的几个标签
div
- 是一个块标签
- 相当于一块区域, 可以往区域内填写任何内容
span
- 是一个行内标签
a 连接标签
- 跳转功能, href参数控制跳转的地址 , target参数控制是在当前页面跳转还是新打开页面(_self, _blank)
- 锚点功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to MrBigB's Website</title>
</head>
<body>
<a href="" id="a1">start</a>
<a href="http://www.baidu.com" target=_self>click me to search</a>
<div style="background-color: darkred;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkblue;height: 200px"></div>
<a href="" id="a2">middle</a>
<div style="background-color: darkblue;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkred;height: 200px"></div>
<a href="#a1">back to the start</a>
<br>
<a href="#a2">bac to the middle</a>
</body>
</html>
img 图片标签
- src 图片地址
- alt 当图片加载不出来的时候展示的提示信息
- title 鼠标悬浮在图片上后的提示信息
- width和height 设置图片展示大小, 只需设置一个即可, 默认等比缩放
<img src="test.jpg" alt="this is a picture of a dog" title="the dog is playing" height="200"/>
列表标签
- ul无序列表
- disc 实心圆(默认)
- circle 空心圆
- square 实心方块
- none 无样式
- ol有序列表
- 1 数字列表
- A 大写字母
- a 小写字母
- I 大写罗马
- i 小写罗马
- dl标题列表
- dt 小标题
- dd 小章节
表格标签
- 展示数据的时候一般都用到表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1">
<thead> <!--表头-->
<tr> <!--一个tr代表一行-->
<th>name</th>
<th>gender</th>
<th>age</th>
</tr>
</thead>
<tbody> <!--表数据-->
<tr>
<td>bigb</td>
<!--<td rowspan="2">bigb</td>-->
<td>male</td>
<td>18</td>
</tr>
<tr>
<td>blake</td>
<!--<td colspan="2">blake</td>-->
<td>female</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>