基本：
<html> </html>表示一整个网页
<body> </body>表示整个网页的内容
<h> </h>表示标题
<p> </p>表示一个段落
<hr/>是空行，需要换行的时候可以使用，因为html会自动把代码中自己输入的空格空行省略，所以设定格式、排版则需要专门输入。
超链接：
<a href=" ">引号之间可以是网址、id、本地地址，可以跳转到其它网页，也可以跳转到目前网页的某个位置（后边再来完善）
eg.
1、点击页面中“查看历史朝代表”即可跳转到这一链接，target="_blank"则为在新页面打开这一链接，如果没有添加这一项，会在原页面跳转新链接
<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9B%BD%E6%9C%9D%E4%BB%A3" target="_blank">查看历史朝代表</a>
2、这里要用到name这个属性，第一步将“第三章”记为标签，第二步，在距离该页面很远的地方输入第二行代码，则当在页面中点击跳转到第三章时，可以返回第三章的位置。
<a name="lala">第三章</a>
<a href="#lala">跳转到第三章</a>
3、点击文字，跳转到另一个文件。（疑惑：所以是否需要先设置一个标签才能跳转？）
<a href="file:///D:/%E5%89%8D%E7%AB%AF/2%E5%88%98%E7%89%9B%E7%89%9B%E4%B9%8B%E5%AE%B6.html#lala">跳转到2文件lala标签对应的地方</a>
4、点击图像跳转网页。这是一个宽和长均为50的图像，点击则能跳转到另一个网页。
<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9B%BD%E6%9C%9D%E4%BB%A3">
<img src="D:\前端\v2-bd5b2f0b3ad3d9777493758f414d0b35_r.jpg" width="50" length="50">
</a>
引用：
1、<q> </q>为短引用，引用的信息会自动加引号。
eg.<p>现在是什么时间？<q>现在是北京时间16：30</q> </p>
显示为：现在是什么时间？“现在是北京时间16：30”
2、<blockquote> </blockquote>是长引用，在页面显示为缩进处理。
3、<cite> </cite>可用于引用书名，显示为斜体。
eg.<p><cite>Gone with the Wind</cite> by Margaret Mitchell in 1936.</p>
显示为：Gone with the Wind by Margaret Mitchell in 1936.
插入图片：
<img src="" ...> 引号之间可以是文件地址，最好前面加上file://
...部分可以填：
1、align
align="bottom"图片向下对齐，图片下端与字的下端在一条线上，这是默认格式
align="middle"图片在中间
align="top"图片向上对其，图片上端与字的上端在一条线上
align="left"图片在最左端
align="right"图片在最右端
eg.
<p>这是段落1，这是一张向下对齐（默认）<img src="D:\前端\v2-bd5b2f0b3ad3d9777493758f414d0b35_r.jpg" align="bottom" width="50" height="50">的图片</p>
2、width、length、height
如字面意思，用法为width="50"，但是这个length和height具体用谁有待探究
3、通过定位，点击图片中的一部分显示细化的图
eg.点击中国地图中的福建省，出现福建的详细地图
<img src="file://加入路径" width=" " length=" " usemap="#需引用的map的名字" ismap/>
<a>
<map name="需引用的map的名字" id="需引用的map的名字">
<area shape="形状" coords="数字1,数字2,数字3,数字4"(如果是方形，需要四个数字，分别对应两个点的坐标，框中的部分即是可点击跳转图片的区域 href="file://跳转后的图片路径" target="_blank>
</map>
</a>
样式：
用style来设置每个部分的样式：
解释：body是对整个页面样式进行设置，p是对段落样式进行设置，td是对表格样式进行设置
<style type="text/css">
body {background-color:颜色名} p {font-family:字体名;font-size:20px即字号大小;color:字体颜色} td {font-family:字体名;font-size:字号大小;color:颜色}
</style>
表格：
1、设置表格，border是围绕表格的边框宽度，width是表格的整体宽度
<table border="数字" width="数字">
2、设置表的标题
<caption>表的标题</caption>
3、设置表头，即表格的属性，th--table headline，align设置的是表头字体处于表格的位置
<th align="left/right/center">阶段</th>
4、表格换行用tr，<tr>和</tr>之间的内容构成表格的一行
5、td是数据单元格，即表格里的一个格子，td中可以存放文本、图片、表格各种各样的数据
eg. <td align="left/right/center"> </td>
注：这里的 是空格的意思
eg. <td>小学</td>
6、综合以上五点，写一个表格：
<table border="3" width="600">
<caption>学历信息</caption>
<th align="center">学历阶段</th>
<th align="center">学校名称</th>
<tr>
<td align="center">本科</td>
<td align="center">swufe</td>
</tr>
</table>
7、<th colspan="2">学校</th> 解释：如图所示，将学校这一属性所对应的数据单元格划分为两列
8、<th rowspan="2">学校</th> 解释：如图所示，将学校这一属性对应的数据单元格划分为两行
9、表格中嵌套段落、表格、列表
<table border="3">
<caption>标题一</caption>
<tr>
#嵌套段落
<td><p>段落一</p>
<p>段落二</p></td>
#嵌套表格
<td><table border="1">
<caption>这也是一个标题</caption>
<tr><td>这是表格中的第一格</td>
<td>这是表格中的第二格</td></tr>
<tr><td>这是表格中的第三格</td>
<td>这是表格中的第四格</td></tr>
</table></td>
</tr>
#嵌套列表
<tr>
<td><ul><li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
</ul></td>
</tr>
</table>
10、cellpadding定义的是单元格中内容和边框的距离，cellspacing定义单元格与单元格间的距离
eg.<table border="3" cellpadding="10" background="可以加图片路径">
...</table>
eg.<table border="3" cellspacing="10" bgcolor="yellow">
...</table>
11、设置全包、上包、下包、上下方、左右方框架
#全包框架
<table frame="box">...</table>
#上方框架
<table frame="above">...</table>
#下方框架
<table frame="below">...</table>
#上下方框架
<table frame="hsides">...</table>
#左右方框架
<table frame="vsides">...</table>
列表：
1、创建无序列表，ul为无序列表，li为列表的每行，type为每行前面的图形，disc对应实心圆圈，circle对应空心圆圈，square对应正方形
<ul type="disc/circle/square">
<li>书包</li>
<li>雨伞</li>
</ul>
2、创建有序列表，用ol，type默认为1、2、3，输入A则为A、B、C，以此类推
<ol type="A/a/Ⅰ/ⅰ">
<li>98分</li>
<li>96分</li>
<li>92分</li>
</ol>
3、列表里可以嵌套列表，在里边输就可以了
4、自定义列表，dl是自定义列表，dt是自定义列表项标签，dd是自定义列表项的定义
<dl>
<dt>love</dt>
<dd>with the feeling of warmth</dd>
<dt>family</dt>
<dd>the origin of sense of safety</dd>
</dl>
块元素、行内元素
1、<div>...</div>使用这一元素会自起一行
定义一个块的类别
eg.将外套归类为衣服
<div class="衣服">
<h2>外套</h2>
<p>人们用外套来防风保暖</p>
</div>
2、<span>...</span>使用这一元素不会换行
定义一个行内分类元素
eg.这里给span中间的字归类为绿色
<p>
我<span class="green">不</span>知道为什么好意会被误解
</p>
3、添加样式
同样用style
<style type="text/css">
.衣物{background-color:yellow;color:black;font-size:20px;padding:30px;margin:10px}
span.green{color:green}
</style>
标识id、class
1、id对大小写敏感且不能含有空字符，与class的区别在于：一个class分类名称可以由多个元素使用，可以在表格里、段落里、标题中、块元素里；但一个id名称只能在同一网页其中一个元素中使用，一个元素用了，其它元素就无法使用。
eg.
<p id="学生姓名">李华</p>
<p id="学生姓名">李明</p>
在段落使用后就不能在其它元素里（单元格、标题、块元素）使用学生姓名这个id，class则可以，比如<p class="城市">...</p>和<h2 class="城市">...</h2>可以并存
2、id可用于制作超链接书签
eg.在第6页写：
<p id="跳转">第六章</p>
在第1页目录里写：
<a href="#跳转">第六章</a>
这样点击第1页的第六章即可跳转到第6页第六章的位置
网页嵌套网页
<iframe src="网页网址" width="数字" height="数字" frameborder="数字，指边框的宽度" name="取个名字"></iframe>
这一在一个网页里面就会出现一个框，里面显示另一个网页的内容
扫一扫
2864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
