对页面进行结构分析，划分好区域块，然后用HTML表示，CSS修饰。
一、先确定结构
<!doctype html> <html> <head> <meta charset ="utf-8"> <title>....</title> </head> <body> .... </body> </html>
二、常用的HTML元素
- h标题元素 h1, h2, h3, h4, h5, h6 6级标题，字体逐层递减
- p 段落元素
该前后标记包含的内容会全部显示在页面。 - a 链接
文本链接或图片链接,用前后标记，常与title属性搭配
<a href ="相对路径或URL" title ="xxxxxx">......</a> - img 图片
常与alt属性搭配
<img src ="相对路径或URL" alt ="xxx">
用缩略图来创建一个链接，点击跳转到另一个页面，可查看原图，需要 a+img
<a href ="原图的相对路径或URL" > <img src ="缩略图相对路径或URL"> </a>
- 引用
q 短引用，内联元素，引用会被放在现有的文字里，作为其中的一部分，即嵌在段落中
<q>........</q>
blockquote 长引用，块元素，该元素的文本会自成一段，有些浏览器还会显示缩进
<blockquote>........</blockquote> - 斜体 em
斜体形式，用于强调文字，强调某个词或某个重点。
<em>........</em> - 加粗 strong
加粗形式，用于强调某个词或重点。
<strong>........</strong> - 换行 br
简单的换行符。 - 列表
列表里的项 li 元素
A. 有序列表
<ol> <li>.......</li> </ol>
B. 无序列表 ul
<ul> <li>.......</li> </ul>
C. 定义列表 dl
<dl> <dt>....</dt> <dd>.....(对dt元素的内容定义)....</dd> </dl> - <div>
div元素用于将相关的元素归组在一起，用来将页面划分为区块，或可以将需要共同样式的元素归组在一起。
<div>.......</div> - <span>
与 <div>元素类似，不过 <div>元素是俄日块级内容创建逻辑划分，而<span>元素是采用类似的方式建立内敛内容的逻辑分组。
<span>.....</span> - <del>
标记某些内容为要删除的内容
<del>....</del> - <ins>
标记某些内容为要插入的内容
<ins>.....</ins> - pre元素
- <header>
表放在页面顶部的内容，或者放在页面某个区块的顶部。
<header> ....... </header> - <nav>导航
所包含的内容将作为页面的导航栏
<nav> <ul> <li>....</li> </ul> </nav> - <setion>
类似于内容分组 - <aside>
包含的内同时hi对页面内容的补充，如插图或边栏。
<aside> ... </aside> - <time>
可能包含一份日期或时间，也可能同时包含日期和时间。
<time datetime ="2016-08-10 14:20"> ....(自己希望的时间写法) </time> - <article>
表页面中一个独立组成的部分，直接删去不影响结构，如一个博客帖子，用户论坛帖子或新闻报道。
<article> ...... <article> - <video>
用于为页面增加视频
常用属性有：
controls 为视频显示增加内置的控件
src 视频位置
autoplay 自动播放
poster "海报"图像
loop 视频结束播放后自动重新开始播放
width，height视频显示区的宽度，高度
preload - <table>表格元素
<tr>表格里的行
<th>表头（默认加粗）
<td>表格数据
第一行为表头：
<table> <tr> <th>....</th> ..... </tr> <tr> <td>....</td> ..... </tr> ..... </table>
或 第一列为表头：
<table> <tr> <th>....</th> <td>....</td> ..... </tr> <tr> <th>....</th> <td>....</td> ..... </tr> ..... </table>
网友评论