一、行内元素和块级元素：
行内元素：不可以设施宽高，不会换行
<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>
块级元素：可以设置宽高，会换行
<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
二、标签的学习：
1、注释：
格式：<!-- -->
添加注释的快捷键：ctrl + ？
2、链接标签 a： （Hypertext Reference:超链接目标的url）
格式： <a href="链接">连接的文字</a>
特性：行内标签，有自己默认的颜色与下划线
属性：
- target：_self (在自己的窗口打开） _blank（新的窗口打开）
- download:下载，属性值会作为下载后的文件名，没有属性值就用以前的名
- href：链接的目标地址/链接
- 外部链接【网络路径】需要添加http://的域名 ，如http://www.baidu.com
- 内部链接【磁盘、相对路径】 ，如
- 空链接：
<!-- 点击时，会重新加载页面，并回到页面顶部 --> <a href="">空连接1</a> <!-- 点击时，会回到顶部，但不重新加载页面 --> <a href="#">空连接1</a> <!-- 点击时，不会重新加载也不会回到顶部 --> <a href="JavaScript:;">空标签3</a>
- 下载链接：链接到浏览器无法识别的地方，如果具备解析文件格式的能力，就直接读取预览文件
如：<a href="./01.zip">下载</a>
- 真实的下载：（需要启动服务，open with live server)
<a href="./01.zip" download>下载2</a>
<a href="./01.zip" download="名字'>下载2</a>
- 网页元素链接：
<a href="http://www.baidu.com">下载
<img src="../img/go.jpg" alt="">
</a>
a标签的锚点：
1、用a标签的#去锁定id
<a href="#html">html</a> <br>*30 <h1 id="html">html</h1> <p>是是对但是v速度处理和是对但是v还是v哦i和 速度处理和对但是v还是v哦i和 速度处理和</p> <a href="#">回到顶部</a>2、用a标签的#去锁定另一个a标签的name
<a href="#html2">html2</a> <br>*30 <a name="html2"></a> <h1>html2</h1> <p>度处理和</p> <a href="#">回到顶部</a>
3、base标签：
属性：
1、target属性
a标签跳转网页，会打开新窗口还是就是本窗口的设置
格式：<base targrt="_blank"> 放在head里面
2、href属性：（用的较少）
由 base 制定了一个 URL 地址，接下来你所要调用的文件或图片等就无须再填写完整的地址，只需上该文件名或图片名即可。设置基础的链接，页面上的所有的 相对路径都会链接地址前面拼接基础。格式：<base href="http://www" >
4、实体特殊字符：
Tips：
≪活着≫ = 《活着》 但这个是远远大于 远远小于
<；< > >
«活着» = 《活着》
没有2的4次方：2&sup4；是错的
5、列表标签：
无序列表 ul ：（un order list)
格式：
<ul type="circlr">
<li></li>
</ul>
ul：块级标签，不去嵌套其他的，就嵌套li
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
属性type： disc:默认值，实心圆 square:方形 circle:空心圆
改变这个小圆点的颜色：
li::marker {color:pink;}
有序列表 ol ： （order list)
格式：
<ol type=“A”>
<li></li>
</ol>
ol:块级标签，只嵌套li
属性type：可以写A，B，d，2等等，默认为1
<li> <dd> 标签可以嵌套任何元素<li><ul><li><./li></ul></li>
<li></li>相当于一个容器，可以容纳所有元素
自定义列表： dl dt dd 组合而成
dl：最外层的父元素
dt：名词
dd:对名词的解释，一个名词可多个解释
<dl> <dt>html</dt> <dd>超文本标记语言</dd> <dd>网页的结构</dd> <dt>css</dt> <dd>层叠样式表</dd> <dd>网页的修饰</dd> </dl> dt和dd是兄弟关系，没有嵌套的关系
6、表格标签： thead th tbody tfoot table tr td caption
1、table: 用于定义一个表格
2、tr :用于定义表格中的一行，必须嵌套在table标签中，在table标签内有几对tr，就有几行表格。tr的属性有 ： 当前行所有单元格内容的水平排列方式。align=“left” right centervalign：“top” middle bottom3、td :用于定义表格中单元格，必须嵌套在<tr></tr>标签中，在tr标签内有几对td，就有几个单元格（列）。td的属性有 ：align=“left” right centervalign：“top” middle bottomtd的align valign的属性优先级比tr的aliggn valign更高4、表格的标题使用<caption> 标签来定义，必须直接定义在<table>标签之后，并且每个表格只能定义一个标题。通常这 个标题会被居中于表格之上。注意：
- <tr></tr>中只能嵌套<td></td>，而<td></td>标签就像一个容器，可以容纳所有的元素。
- 没有thead的时候，th会和其他行一样平分高度
<table border="1" cellspacing="0" height="150" width="100"> <caption>题目</caption> <thead> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> </thead> <tbody> <tr align="left" valign="bottom" > <td>1</td> <td align="center">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> <tfoot> <tr> <td>表尾</td> <td>表尾</td> <td>表尾</td> </tr> </tfoot> </table>
跨行跨行合并：跨行合并： rowspan=" 数字 " （ row span ）跨列合并： colspan = " 数字" （ column span ）数字：几个格子相合并就写几合并单元格：将多个内容合并时，多余的单元格需要删除。例如：将 3 个 td 合并成 1 个，那么需要将多余的 2 个删除。 公式：删除的个数 = 合并的个数 - 1<table border="1" cellspacing="0" cellpadding="0" width="300" height="300"> <caption>购物车</caption> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td rowspan="3">第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td colspan="2">第二行第二列</td> </tr> <tr> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </tbody> </table>
<table border="1" cellspacing="0" cellpadding="0" width="300" height="300"> <caption>购物车</caption> <thead> <tr> <th rowspan="2">名称</th> <th colspan="2">日期</th> <th rowspan="2">小计</th> </tr> <tr> <th>重量</th> <th>差价</th> </tr> </thead> <tbody> <tr> <td>单元</td> <td>单元</td> <td>单元</td> <td>单元</td> </tr> <tr> <td>单元</td> <td>单元</td> <td>单元</td> <td>单元</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价</td> <td>价格</td> </tr> </tfoot> </table>
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
