一HTML
1什么是HTML
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。HTML文档也叫做 web 页面。<div>这是成对出现的标签</div>
2基本结构
<!DOCTYPE html> 文档声明类型,声明帮助浏览器正确地显示网页
<html> html文档的根标签
<head> 网页头部信息,用来做网页的基本配置
<meta charset="utf-8"> 网页字符编码
<title>html的基本结构</title> 网页在浏览器窗口中显示的标题
</head>
<body>此标签中写网页中显示的内容</body>
</html>
3常用标签
<h1~h6> 标题
a标签 链接
img 图片标签 scr alt title
p 标签
br 换行
div 块标签
span 圈住一块文字
< <
> >
空格
& &
二CSS
1 层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,为了解决内容与表现分离的问题
三代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08-今日头条</title>
<style>
/* 1.最外边的大框设置样式 */
.box{
width: 285px;
height: 310px;
border-top: 1px solid #c8dcf2;
border-bottom: 1px solid #c8dcf2;
/* 元素水平方向居中 */
margin: 0px auto;
/* red green blue */
}
/* 头部 */
.head{
height: 40px;
}
/* 今日头条文字 */
.head h3{
margin: 0px;
font-size: 16px;
font-family: "Microsoft Yahei";
color: #172c45;
/* 浮动 用了浮动后所有的元素都能排在一行 */
float: left;
line-height: 40px;
/* 设置下划线 */
/* text-decoration: underline; */
}
/* 更多 */
.head a{
font-size: 12px;
font-family: "Microsoft Yahei";
color: #172c45;
/* 右浮动 */
float: right;
/* 行高 设置文字垂直居中 */
line-height: 40px;
/* 清除下划线 */
text-decoration: none;
}
/* 人工智能段落 */
.box p{
font-size: 12px;
font-family: "Microsoft Yahei";
color: #737373;
line-height: 20px;
}
</style>
</head>
<body>
<!-- 大div表示整个内容 -->
<div class="box">
<!-- 1 头部div -->
<div class="head">
<!-- 1.2 今日头条标签 -->
<h3>今日头条</h3>
<!-- 1.3 更多 a标签 -->
<a href="#">更多>></a>
</div>
<!-- 2.图片 -->
<img src="banner.jpg" alt="人工智能">
<!-- 3.段落 -->
<p> 人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 人工智能是计算机科学的一个分支,它企图了解智能的实质,并生产出一种新的能以人类智能相似的方式做出反应的智能机器,该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等.</p>
</div>
</body>
</html>