一、了解

超文本标记语言

W3C 万维网联盟（http://www.w3.org）

  • 结构化标准（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）js

二、网页基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 告诉浏览器，我们要使用什么规范 -->
<!DCOTYPE html>
<html lang="en">
    <!-- 网页头部 -->
    <head>
       <!-- 描述性标签， 描述网站的一些信息-->
       <!-- 一般用来做SEO-->
       <meta charset="UTF-8"> 
       <meta name="keywords" content="练习"> 
       <meta name="description" content="这个地方用来练习"> 
       <!-- 标题 -->
       <title></title>
    </head>
    <!-- 主体部分 -->
    <body>
        
    </body>
</html>

常用标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 标题标签-->
<h1></h1>

<!-- 段落标签-->
<p></p> 

<!-- 换行标签-->
<br/>

<!-- 水平线标签-->
<hr/>

<!-- 粗体、斜体标签-->
<strong>粗体</strong>
<em>斜体</em>

<!-- 特殊符号 -->
空&nbsp;格
&gt; 大于号
&lt; 小于
&copy;版权

图像标签

1
<img src="" alt="text" title="" width="" hight=""/>地址、图像的代替位置、鼠标悬停提示文字,宽，高

链接标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="path" target="目标窗口位置"></a>链接路径(必填)、链接在哪个窗口打开（_self、_blank新标签）
图片超链接
<a><img/></a>

锚链接
	1.需要一个锚标记
	2.跳转到标记
<a name="top"></a> 标记
<a herf="#top">回到顶部</a>

功能性链接
	邮件链接：mailto
	QQ链接
<a href="mailto:1426768270@qq.com">点击练习我</a>

行内元素和块元素

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
有序列表 有序号的
应用：试卷，问答
<ol>
    <li></li>
    <li></li>
</ol>
无序列表
应用：导航，侧边栏
<ul>
    <li></li>
    <li></li>
</ul>
自定义列表
公司网站底部
<dl> 标签
    <dt></dt> 列表名称
    <dd></dd> 列表内容
    <dd></dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
行 tr
列 td
colspan 跨列
rowspan 跨行
<table border="1px">
    <tr>
    	<td colspan="4"></td>
        <td></td>
    </tr>
</table>

视频和音频

1
2
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>

页面结构分析

  • header 标记头部区域的内容
  • footer: 脚部区域
  • section web页面中一块独立区域
  • article 独立的文章内容
  • aside:相关内容或应用，侧边栏
  • nav:导航类辅助内容

iframe内联框架

1
2
3
4
<iframe src="引用的地址" 
    	name="框架标识名"
        >
</iframe>

表单语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<form method="post" action="result.html">
    <p>
        名字<input name="name" type="text">
    </p>

    
    <!--单选框的name必须一样，这样才能成为一个组 -->
    <p>
        <input type="radio" value="boy" name="sex">
    </p>
    <!--
	button: 普通按钮
	image: 	图像按钮
	submit:	提交按钮
	reset:	重置
	-->
     <p>
        <input type="button" name="btm1" value="点击变长">
        <input type="image" src="地址"> 图片按钮自动提交的
        <input type="submit">
        <input type="reset">
    </p>
    
    <!--下拉框-->
    <select name="列表名称">
        <option value="选项的值" selected>1</option>
    </select>
    
    <!--文本-->
    <p>
        <textarea name="textarea" cols="10" rows="10"></textarea>
    </p>
    
    <!--文件域-->
    <p>
        <input type="file" name="files">
    </p>
    
    <!--验证-->
    <p>
        <input type="email" name="email">
        <input type="url" name="url">
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    
    <!--滑块-->
    <p>
        <input type="range" name="volume" max="100" min="0" step="1" >
    </p>
    
    <!--增强鼠标可用性-->
    <lable for="mark">你点我试试</lable>
    <input type="text" id="mark">
    
    <!--表单初级验证
	placeholder:	提示
	required:		必填
	pattern:		正则表达式
	-->
    <input type="text" name="diymail" pattren=""/>
</form>