一、简介
HTML 指的是超文本标记语言，使用标记标签来描述网页，标签是由尖括号包括关键词组成，并且是成对出现。例如<html></html>
二、一个完整的html网页
<!DOCTYPE html> <!-- 有助于浏览器中正确显示网页 --> <html> <!-- html页面开始标签 --> <head> <meta charset="UTF-8"> <!-- UTF-8编码 --> <title>周杰伦</title> <!-- 标签页显示的内容 --> </head> <body> <img src="1.jpg"> <!-- 插入一张图片 --> <h1>《说好不哭》</h1> <h3>词：方文山 曲：周杰伦</h3> <h3>演唱：周杰伦/五月天阿信<h3><!-- h1-h5不同大小字体 --> <hr> <!-- 水平线 --> 没有了联络 后来的生活 我都是听别人说<br><!-- 换行标签 --> 说你怎么了 说你怎么过 放不下的人是我<br> 人多的时候 就待在角落 就怕别人问起我<br> </body> </html> <!-- html页面结束标签 -->
效果如下：
三、标签介绍
1、div和span标签
div是一个块级元素，它包含的元素会自动换行。
span是行内元素，在它的前后不会换行
<div style="color:#0000FF">你们怎么了 你低着头</div> 护着我连抱怨都没有 <span style="color:#0000FF">电话开始躲 从不对我说</span> 不习惯一个人生活
2、a标签，超链接
href：指定要跳转的地址
target：指定方式打开新地址，默认当前页面打开，_blank在新页面打开
<a href="https://www.baidu.com" target="_blank">百度一下</a>
3、<img>标签，插入图片
./：本级目录
../：父级目录
也可以直接添加网络上的一张图片
<img src="./1.jpg"> <!-- 插入一张图片 --> <img src="../1.jpg"> <!-- 插入一张图片 --> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590819401582&di=55b578406cd4b1649ab0ec90d49e5b98&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg"><!-- 插入一张图片 -->
四、CSS样式， 用于渲染HTML元素标签的样式
1、内联样式
span，将所有span标签内的文字都统一样式
<style type="text/css"> span{ background-color:#000000; <!-- 黑底 --> color:#00FF00;<!-- 绿字 --> } </style> <span>离开我以后 要我好好过 怕打扰想自由的我</span> <span>都这个时候 你还在意着 别人是怎么怎么看我的</span> <span>拼命解释着 不是我的错 是你要走</span>
id选择器，为一个样式起个别名，通过id引用
<style type="text/css"> #TS{ background-color:#000000; <!-- 黑底 --> color:#FF00FF; <!-- 粉字 --> } </style> <span>离开我以后 要我好好过 怕打扰想自由的我</span> <span id="TS">都这个时候 你还在意着 别人是怎么怎么看我的</span> <span>拼命解释着 不是我的错 是你要走</span>
类选择器，为一个样式起个别名，通过class引用
<style type="text/css"> #TS{ background-color:#000000;<!-- 黑底 --> color:#FF00FF;<!-- 绿字 --> } .ST{ background-color:#000000;<!-- 黑底 --> color:#00FFFF; <!-- 蓝字 --> } </style> <span id="TS">离开我以后 要我好好过 怕打扰想自由的我</span> <span id="TS">都这个时候 你还在意着 别人是怎么怎么看我的</span> <span>拼命解释着 <span class="ST">不是我的错</span> 是你要走</span>
2、外引样式
新建一个aiyou.css文件，内容为
#TS{ background-color:#000000; color:#FF00FF; } .ST{ background-color:#000000; color:#00FFFF; } 在html源码中引用 <link rel="stylesheet" type="text/css" href="aiyou.css"> <span id="TS">离开我以后 要我好好过 怕打扰想自由的我</span> <span id="TS">都这个时候 你还在意着 别人是怎么怎么看我的</span> <span>拼命解释着 <span class="ST">不是我的错</span> 是你要走</span>
禁止非法，后果自负
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)