HTML（HyperText Mark-up Language）超文本标签语言
<!DOCTYPE html> <!--声明这是一个html文档--> <html> <!--最外层标签，界定标签的范围--> <head> <!--头标签，用来引入外部文件，指定编码格式，设定标题（浏览器标签页标题）名称--> <meta charset="UTF-8"> <!--指定编码格式--> <title></title> <!--标题标签--> </head> <body> <!--内容标签（主体）--> <h1><!--标题标签，从大到小h1-h6--></h1> <br/> <!--换行标签--> <pre> <!--格式化标签（可以识别内容中的换行符号-回车）--> </pre> <p><!--段落标签--></p> <!-- 图片标签：img src:图片路径 alt:属性作用 ①当图片不能正常显示，会提示alt中的文本内容，利于用户体验 ②爬取图片数据，对图片进行分析（将属性值作为爬取的条件） --> <img src="" alt="" /> <!-- 链接标签：a 用来跳转网页页面，也可以跳转HTML文件页面 href属性值是地址，如果没有默认#，点击后没有效果 target属性：_blank会重新弹出一个窗口 _self在当前页面进行显示，默认就是self --> <a href="http://www.baidu.com"></a> <div id=""> 块标签 <span id=""> 修饰一段文字中的一小段文字 </span> </div> </body> </html>
CSS（cascading style sheets）层叠样式表
作用：给标签设置样式
外观样式：文本，字体，大小，网页背景色，图片
CSS书写方式：
1、行内式（容易写过多的重复代码）
<div style=" 800px;height: 600px;font-size: 14px;"> ....... </div>
2、嵌入式（容易造成相同标签修饰同一种样式问题）
<html> <head> <meta charset="UTF-8"> <title>css边框属性</title> <style type="text/css"> div{ width: 200px;设置div宽度 height: 200px;设置div高度 border: 3px solid gold;设置边框属性 border-top: 4px dotted blue ;设置上边线属性 border-left: 5px solid green;设置左边线属性 border-bottom: solid #FF0000;设置底部边线属性 border-right: solid aqua;设置右边线属性 } </style> </head> <body> <div> <h3>边框展示</h3> aa bb </div> </body> </html>
3、外链式（降低代码的耦合性，高内聚，低耦合）
要先创建一个css文件（内容如下）link.css
div{
background-color: green;
color: red;
height: 300px;
300px;
}
div p{
color: aqua;
font-family: serif;
fon
}
再在原HTML文件中引用css文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css外链式</title> <link rel="stylesheet" type="text/css" href="../css/link.css"/> </head> <body> <div id=""> 超文本标记语言(Hyper Text Markup Language) <p> "超文本"就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 </p> </div> </body> </html>
列表标签：
分类：
1、无序列表：ul
ul>li*5 tab同时生成ul标签下5个li标签
ul标签里还可以添加type属性（相当于编号）：circle空心圆，square实心方块，disc实心圆（默认）
2、有序列表：ol
默认为数字编号（type)
还可指定start属性，从哪个编号开始算
type：1，2，3，4
a,b,c
A,B,C
i,ii,iii,
I,II,III
3、自定义列表：dl
dt标题
dd列表项
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--无序列表--> <ul type="square"> <li>2</li> <li>3</li> <li>4</li> </ul> <!--有序列表--> <ol start="3" type="i"> <li>山水有相逢</li> <li>搏一搏</li> <li>单车变摩托</li> </ol> <!--自定义列表--> <dl> <dt>日常</dt> <dd>学习</dd> <dd>睡觉</dd> </dl> </body> </html>