br换行标签(熟记)
单词缩写： break 打断 ,换行
<br />
div span标签(重点)
- div span 是没有语义的
- div ： division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。
- span：跨度，跨距；范围
<div> 这是div标签 </div> <span>这是span标签</span>
文本格式化标签(熟记)
- b i s u 只有使用 ，没有 强调（语意）的意思
- strong em del ins 语义更强烈，推荐使用后者
语法
<标签名 属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取 键值对 的格式 ，key=“value” 的格式如： width=“400”
<hr width="400" />
提倡： 尽量不使用 样式属性。
常用的全局属性
- id 属性：用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复 id，一般配合 css 和 js 来选择元素；
- class 属性：用于指定元素的类别名称，可以使用 class 元素给同一个文档中的多个元素进行归类，css 可以通过 class 给同一个类的元素设置样式；
- stlye 属性：用于给元素设定样式（内联样式或内部样式）；
- title 属性：用于显示省略的内容（或补充、提示说明内容），当光标移动到元素内容上时显示title里面的内容；
- dir 属性：用于设定元素标签内容的文字方向，比如 div 元素的属性、p 元素的属性，可选值 ltr 和 rtl。
02.html骨架格式.html
<html>
<head>
<title>���DZ���</title>
</head>
<body>
����ӱ
</body>
</html>
03.hbuider.html
<!--
标题标签是h1-h6
h1最重要 依次降序
h标签没有h7 只有1-6
-->
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
<!--段落标签：<p></p>-->
<!--游览器会将多个空格渲染成一个空格-->
<!--br标签是换行的-->
<!--hr水平线-->
<p>6月1日17时许，眉山市公安局东坡分局紫竹派岀所接到报警，眉山一小区有一男子坠楼身亡，并砸中楼下正在行走的一名儿童和一位老人，儿童当场死亡，老人受伤，已送往市人民医院抢救。<br />目前警方正在开展调查，请大家切勿信谣传谣。</p>
<hr />
04.新闻.html
<h3 id="here">跳到在这里</h3>
05.基本标签.html
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--
只有div是独占一行，
span、b和strong、i和em、s和del，和其他元素在一行显示
-->
<div>div1</div>
<div>div2</div>
<span>span1dddddd</span>
<span>span2</span>
<!--
b和strong都有个加粗的效果
b是没有语义化的，strong是有语义化的，更有利于搜索引擎来搜索
-->
<b>加粗</b>
<strong>加粗</strong>
<!--i是没有语义化的 em是有语义化的-->
<i>斜体</i>
<em>斜体</em>
<!--s是没有语义的 del是有语义的-->
<s>删除线</s>
<del>删除线</del>
<u>下划线</u>
<ins>下划线</ins>
</body>
06.图像标签img (重点).html
<!--
src:图片的地址,可以是本地的地址也可以是网络的地址
alt：图片加载不出来时，显示的文字
title:鼠标移动进去时显示的文字
width:就是图片的宽度，不写高度时，会自动按宽高比计算
height:图片的高度
width和height不是很常用，css来控制样式
border：边框 css来
-->
<img src="01.jpg" width="200" height="200" border="10"/>
<img src="https://img.alicdn.com/tps/i4/TB1YUBVbf1H3KVjSZFHSuvKppXa.jpg_240x240q90.jpg" alt="这是鸡腿" title="鸡腿好吃" />
<img src="0.jpg" alt="这是小姐姐" />
07.超链接标签.html
<!--
超链接：
href:跳转到哪个网页
-->
<!--跳转到网络地址-->
<!--默认是在当前页面上打开target="_self"-->
<!--在新标签页打开 target="_blank"-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<!--跳转到站内页面-->
<a href="04.新闻.html">跳到新闻</a>
<!--没有确定地址 空链接-->
<a href="#">没有确定网络地址</a>
<!--可以给图片添加超链接-->
<a href="https://www.baidu.com/">
<img src="01.jpg"/>
</a>
08.锚点：a链接标签(重点).html
单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的
<!--href="#对应的id号"-->
<a href="#expre">1.早年经历</a>//标题
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<h3 id="expre">早年经历</h3>//t跳转位置，同一个id
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus facilis nemo temporibus repudiandae reprehenderit excepturi incidunt quisquam beatae quidem blanditiis labore ad ducimus tempora similique aliquam quo nostrum deserunt assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus facilis nemo temporibus repudiandae reprehenderit excepturi incidunt quisquam beatae quidem blanditiis labore ad ducimus tempora similique aliquam quo nostrum deserunt assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus facilis nemo temporibus repudiandae reprehenderit excepturi incidunt quisquam beatae quidem blanditiis labore ad ducimus tempora similique aliquam quo nostrum deserunt assumenda.</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
09.base标签.html
<head>
<meta charset="UTF-8">
<title>base标签</title>
<!--给所有的超链接加上一个属性 target="_blank" -->
<base target="_blank" />
</head>
<body>
<!--<a href="https://www.sina.com.cn/" target="_blank">新浪</a>
<a href="https://www.baidu.com" target="_blank">百度</a>-->
<a href="https://www.sina.com.cn/" >新浪</a>
<a href="https://www.baidu.com" >百度</a>
<!--p{p$}*40 按tab键-->
<a href="04.新闻.html#here">跳到新闻页面</a>
</body>
10.特殊字符（理解）.html
<!--<b>游览器给我们解析成一个标签 -->
<!--注释快捷键 ctrl+/-->
我要在页面上输出<b>这是b元素 赵 丽颖
11.路径(重点、难点).html
- 相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径
- 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=“logo.gif” /或者img src="./logo.gif" /。
- 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=“img/img01/logo.gif” /。
- 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如img src="…/logo.gif" /。
- 绝对路径：Web站点根目录，唯一。
“D:\web\img\logo.gif”，或完整的网络地址，例如“https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=4152598231,1037344495&fm=173&app=25&f=JPEG?w=218&h=146&s=5807D810BD00EACE342B64C6030070BD”。
<img src="img/01.jpg"/>
<img src="img/img1/u02.jpg"/>
<!--相对路径;如果是同级目录 src="01.jpg"
上一级 ../
下一级：文件名/文件名/文件名称
-->
<img src="https://img.alicdn.com/bao/uploaded/i4/203684591/TB2NQNUn3FkpuFjSspnXXb4qFXa_!!203684591.jpg_200x200q90.jpg_.webp"/>
<img src="C:/Users/wl/Desktop/day1/img/01.jpg" />
列表标签：
12.无序列表.html
各个列表项之间没有顺序级别之分，用排队，先到先得，后发布先显示。
<!--
注意：ul里面的子元素必须是li
li里面可以放任何元素 div span a img
-->
<ul>
<li>li1
<a href="#">百度</a>
</li>
<li>li2</li>
<li>li3</li>
</ul>
13.有序列表.html（了解）
<ol>
<li>美国</li>
<li>英国</li>
<li>中国</li>
</ol>
14.西游记.html
<ul>
<li>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2806694902,2033173021&fm=58&bpow=1339&bpoh=1657"/>
<!--<h2>《红楼梦》</h2>-->
<strong>《红楼梦》</strong>
<p>《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度...</p>
</li>
<li>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2806694902,2033173021&fm=58&bpow=1339&bpoh=1657"/>
<!--<h2>《红楼梦》</h2>-->
<strong>《红楼梦》</strong>
<p>《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度...</p>
</li>
<li>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2806694902,2033173021&fm=58&bpow=1339&bpoh=1657"/>
<!--<h2>《红楼梦》</h2>-->
<strong>《红楼梦》</strong>
<p>《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度...</p>
</li>
</ul>
15.自定义列表.html
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>德阳</dd>
<dd>绵阳</dd>
<dt>重庆</dt>
<dd>渝北</dd>
<dd>南岸</dd>
</dl>
扫一扫
1399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
