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>