（小细节决定成败）
hyperText markup language——html
超文本标记语言
<html lang="en,zh">//根标签//属性=“属性值”，lang（属于SEO技术的一部分）告诉搜索引擎爬虫，我们的网站是干什么的。比如百度关键字搜索结果的显示按照所付出的多少而先后显示（关键字协议），价格——点击量，转化率，百度智能筛选
<head>
<meta charset="utf-8">//相当于给字符添加一个字典。 gb2312（国家标准2312 ），gbk（国家标准扩展版本——繁体等），unicode（万国码），utf-8（unicode升级版）
<title>网页角标显示内容</title>
<meta content="服装" name="keywords">//关键字
<meta content="这是一件可以让你爱不释手的衣服" name="description">//描述
</head>
<body>
<p>段落标签</p>
<h1>标题标签1～6：字体依次减小</h1>
<strong>加粗字体</strong>
<em>斜体</em>//加粗斜体可嵌套使用
<del>删除线</h1>
<address>地址标签，独占一行</address>
<div>块标签</div>
<span>行标签</span>
//空格，换行——文字分隔符
// 空格，<<，>>
<br>//换行
<hr>//线条
//有序列表
<ol type="1" reversed="reversed" start="2">
//type属性：默认数字排序，a，A。
//reversed倒序排列
//start属性：使列表从2开始排列
<li>banana</li>
<li>orange</li>
<li>per</li>
</ol>
//无序列表（有个大的功能，里面由很多类似的子项组成时，用ul）
<ul type="disc">
//type属性值：circle空心圆，disc实心圆，square实心方块
<li>香蕉</li>
<li>橘子</li>
<li>里</li>
</ul>
</body>
</html>
练习
1.gif
练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>呀！看这里</title>
<style type="text/css">
ul{
margin: 10px 0;
}
</style>
</head>
<body>
<p>这里所<strong>展示</strong>的是一段<em>文字</em></p>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<strong><em>嵌套使用</em></strong>
<del>删除线</del>
<address>安徽省宣城市 地址标签</address>
<hr>
<span>文字</span>
<span><书法></span><br>
<span>绘 画</span>
<div style="background-color: green;width: 300px;">
<ol type="I" start="2">
<li>《幽灵公主》</li>
<li>《追求繁星的孩子》</li>
<li>《哪吒之魔童降世》</li>
</ol>
</div>
<div style="width: 300px; background-color: orange">
<ul type="circle" style="background-color: yellow">
<li>《泰梨院Class》</li>
<li>《昆池岩》</li>
<li>《三生三世枕上书》</li>
</ul>
<ul type="square" style="background-color: aqua">
<li>《泰梨院Class》</li>
<li>《昆池岩》</li>
<li>《三生三世枕上书》</li>
</ul>
<ul type="disc" style="background-color: red; color: white; ">
<li>《泰梨院Class》</li>
<li>《昆池岩》</li>
<li>《三生三世枕上书》</li>
</ul>
</div>
</body>
</html>
网友评论