HTML基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东</title>
</head>
<body>
<!--
HTML5的核心内容是标签，标签的作用：完成对不同数据的标记，从而实现网页中数据内容更加丰富化
标签按照结构：单标签（只有开始，没有结束）双标签（即有开始也有结尾）
单标签--直接标记数据
双标签--可以标记数据也可以嵌套一个自己结构
body标签代表网页的正文部分，因此网页数据必须要卸载body中
head标签代表网页的头部，一般用来完成对网页个性化设置
meta-utf-8:设置网页中中文的显示
title设置网页的标题部分
-->
</body>
</html>
常用十个标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--超链接标签
href--超链接标签属性，用来设置跳转的页面地址
target--超链接标签属性，用来设置新页面以何种方式打开，默认新页面覆盖原页面
title--可选属性标签，新页面不覆盖原页面。
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--
img标签--图片标签
src--设置图片显示的链接
alt--设置图片不能正常显示时的额外提示文字
title--设置鼠标放在图片上时的额外标题
注意：img显示图片时，默认以图片的原始尺寸进行显示
-->
<img src="./img/1.jpg" alt="图片不存在" title="美女">
<!--
span在开发中没有明确使用场景，是一个无语义标签，再开发中一般适用于标记一段话中的某一句或某一个单词，以特殊格式显示。或者使用span构建特殊的外观结构比如圆点
-->
<span>床前明月光，疑是地上霜</span>
<!--粗体标签-->
<b>京东</b>
<!--斜体标签-->
<i>京东</i>
<!--
行属性标签：标签内容如果能够在一行显示，此时标签被称为行属性标签
行属性标签特点：
1、标签内容可以在一行显示
2、标签的尺寸只能由内容撑开，无法人为调节尺寸
3、行属性标签内部只能嵌套行属性标签
函数行标签：a,span,img,b,i
-->
<!--
h1~h6标题标签，在开发中一般只用前三级
-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<!--
列表：代表一列数据,列表是由若干个列表项构成
ul--无序列表， ol--有序列表, li--列表项
注意：ul,ol通常需要和li配合使用，并且ul，li，ol都属于块属性标签
-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ol>
<!--
段落--用来标记网页中的一段内容
注意：段落标签内部不允许出现其他段落标签，即段落标签不能相互嵌套
-->
<p>中国特色社会主义进入了新时代，我国经济发展也进入了新时代，基本特征就是我国经济已由高速增长阶段转向高质量发展阶段。推动高质量发展，是保持经济持续健康发展的必然要求，是适应我国社会主要矛盾变化和全面建成小康社会、全面建设社会主义现代化国家的必然要求，是遵循经济规律发展的必然要求。推动高质量发展是当前和今后一个时期确定发展思路、制定经济政策、实施宏观调控的根本要求，必须加快形成推动高质量发展的指标体系、政策体系、标准体系、统计体系、绩效评价、政绩考核，创建和完善制度环境，推动我国经济在实现高质量发展上不断取得新进展。</p>
<!--
div标签--无语义标签，一般用来完成对网页中某一个模块数据的包裹，充当网页模块架构部分
-->
<div>静夜思</div>
<!--
块属性标签：标签内容如果不能再一行显示，此时标签称为块属性标签
块属性标签特点：
1、标签标记的内容不能在一行显示
2、标签的尺寸可以人为修改，默认块级标签的宽度和父级标签相同
3、块属性标签内部既可以嵌套其他块属性标签，也可以嵌套行属性标签
-->
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
选择器：用来选择指定的标签，使对应的css样式作用于选择器指代的标签
class选择器：根据标签的class属性对应的属性值获取标签，注意class选择器用来选择一类标签，这类一般情况下对应的样式是相同的
*/
.link {
/*设置标签文字颜色*/
color: red;
}
.link1 {
/*设置标签文字的大小*/
font-size: 30px;
/*设置文字的类型*/
/*font-family: '宋体';*/
/*设置文字的粗细程度*/
font-weight: 100;
/*设置文字下划线位置
overline--下划线在文字的上边界
line-through--下划线在文字中间位置
underline--下划线在文字的下边界位置
none--文字没有下划线
*/
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#" class="link">百度一下</a>
<span class="link link1">静夜思</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
后代选择器：根据标签的后代关系选择指定标签的后代元素
选择器1 选择器2 --作用是选择选择器1的后代元素选择器2
标签名选择器--根据标签的名字选择标签比如下面的li代表选择li标签
*/
.list li{
color: blue;
}
</style>
</head>
<body>
<ul class="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
id选择器：根据标签的id属性值获取标签
*/
#mark {
/*设置块属性标签的宽度*/
width: 500px;
/*设置块属性标签的高度*/
height: 300px;
/*设置标签的背景颜色*/
background-color: red;
color: white;
/*设置标签的边框*/
/*border: 5px solid black;*/
border-right: 5px solid black;
/*设置标签边框拐角*/
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
}
</style>
</head>
<body>
<div id="mark">静夜思</div>
</body>
</html>