1. 基本结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
	<h1>主体</h1>
</body>
</html>

2. 网页基本标签

  1. 标题标签

    1
    2
    3
    4
    5
    <h1>一级标签</h1>
    <h2>一级标签</h2>
    <h3>一级标签</h3>
    <h4>一级标签</h4>
    .......

  2. 段落标签

    1
    2
    3
    <p>
      哈哈哈哈
    </p>

  3. 换行标签

    1
    <br/>

  4. 水平线标签

    1
    <hr/> 就是一条华丽的分割线

  5. 字体样式标签

    1
    2
    <strong>I like cake</strong> 粗体
    <em>I like cake</em> 斜体

  6. 注释和特殊符号(&+..)

    1
    2
    3
    4
    空格: &nbsp;
    大于：&gt;
    小于：&lt;
    ......

3. 图像标签

1
<img src='图片地址' alt='当图片找不到的时候要显示的文字' title='悬停的时候显示的文字' width='填数字，放大放小图片相当于' height='同width'>

4. 链接标签

  1. 超链接
1
<a href='网页，或者一个文件的路径' target='-self 或者 _blank(新页面打开)'>链接文本或图像</a>

可以在把链接文本嵌套成一个图片，就可以用图片打开链接了

  1. 锚链接（定位到页面的某个地方）
1
2
3
4
5
6
<a name='top'>顶部</a>   name属性作为标记
<a href='#top'>回到顶部</a>   #加name属性的值可以实现跳转

高级用法，可以在heref属性后面跟个#xx
<a href='网页#down'></a>
这个”网页“要有down这个name属性
  1. 功能性链接
1
<a href='mailto:qingyun-feng@qq.com'>点击联系我</a>

5. 列表标签

  1. 有序列表

    1
    2
    3
    4
    5
    6
    <ol>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
    </ol>

  2. 无序列表

    1
    2
    3
    4
    5
    6
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
    </ul>

  3. 自定义列表

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <dl>
      <dt>学科</dt>
      <dd>数学</dd>
      <dd>英语</dd>
      <dd>历史</dd>
      <dd>物理</dd>
      <dt>喜好</dt>
      <dd>篮球</dd>
      <dd>编程</dd>
      <dd>吉他</dd>
      <dd>睡觉</dd>
    </dl>

    效果图：👇

    学科
    数学
    英语
    历史
    物理
    喜好
    篮球
    编程
    吉他
    睡觉

6. 表格标签

table 表格

row:

column: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--table
行 tr
列td-->

<table border:'1px'>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
  </tr>
</table>

  • 跨列和跨行

    1
    2
    <td colspan='4'></td>
    <td rowspan='2'></td>

    效果图

    1（跨四列）
    2.1
    3.1
    （跨两行）    		 2.2 2.3 2.4
    3.2 3.3 3.4

7. 媒体元素

  1. 视频

    controls:显示框框条

    1
    <video src='path' controls></video>

  2. 音频

    1
    <audio src='path' controls></audio>

8. 页面结构分析

元素名 描述
header 标题头部区域的内容
footer 标记脚部区域的内容
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

9. Iframe内联框架

iframe相当于嵌套一个页面，然后如果有name属性，用name跳转也是可以的

1
2
<iframe src='path' name='mainFrame'></iframe>
<a href='https://www.baidu.com' target='mainFrame'>Click me</a>

10. 表单

表单元素是允许用户在表单中输入内容,比如：文本域(text area)、下拉列表、单选框(radio-buttons)、复选框(check box)等等。

属性 说明
type 指定元素的类型。text、 password、 checkbox、 radio、 submit、reset、file、 hidden、 image 和button,默认为text
name 指定表单元素的名称
value 元素的初始值。type 为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中

10.1 注册信息表单

  • 文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

  • 密码字段通过标签 来定义

  • 定义了提交按钮

  • 定义了重置按钮

  • 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

1
2
3
4
5
6
7
8
9
10
11
12
<form method='post' action='result.html'>
  <p>
    名字：<input name='name' type='text'>
  </p>
  <p>
    密码：<input name-'pass' type='password'>
  </p>
  <p>
    <input type='submit' name='Button' value='提交'/>
    <input type='reset' name='reset' value='重填'/>
  </p>
</form>

10.2 单选框

标签定义了表单单选框选项

同时要定义他们的==name==值，必须要一样才会变成单选，不然浏览器不知道哪些和哪些是绑定在一起的

1
2
3
4
<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>

10.3 多选框

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

也要定义相同组的name属性

checked表示默认选中此选项，同单选框

1
2
3
4
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked>I have a car
</form>

10.4 按钮

文字按钮

图片按钮（注：图片按钮有自动提交功能，submit）

10.5 下拉框

1
2
3
4
5
6
7
8
<p>
  <select name='List name'>
    <option value='china'>China</option>
    <option value='america'>America</option>
    <option value='germany'>Germany</option>
    <option value='frence'>Frence</option>
  </select>
</p>

效果图：

Choose your country:

selected 表示默认选中这个值

< select>里面包

10.6 文本域

1
2
3
<p>反馈：
  <textarea name='textarea' cols='10' rows='10'>文本内容</textarea>
</p>

反馈：

10.7 文件域

1
2
3
<p>
  <input type='file' name='files'>
</p>

比如说上传一些文件

10.8 验证信息

  • 没啥用↓，太低级了
1
2
3
4
5
6
7
<p>
  <input type='email' name='email'> 验证邮箱
  <input type='url' name='url'> 验证网址
  <input type='number' name='number' max='100' min='10' step='10'> 比如选择你购买多少数量的东西
  <input type='range' max='100' min='0' value='voice' step='2'> 比如说控制音量
  <input type='search' name='search'> 搜索框
</p>

10.9 表单的应用

  • type=’text’的时候，可以指定value=’账户名’, 然后 readonly 属性加上，用户就不能修改了
  • 如不想让用户用某个功能，可以用属性disabled
  • 也可以隐藏某些框：hidden，这叫隐藏域，用来传递默认值

  • label标签：增强鼠标可用性

    1
    2
    3
    4
    5
    <p>
      <label for='username'>点我输入用户名</label>
      <input type='text' id='username'>
    </p>
    id属性和for属性的值一样时，就可以连起来，点到文字就可输入内容

10.10 表单初级验证

  • placeholder 输入框默认显示的东西，比如placeholder=‘请输入账号’
  • required表示这个输入框必须要被填写
  • pattern 正则表达式（比如自己写一个规则，用来验证用户输入内容真伪）
  • pattern=‘/d’