HTML在开发中的基本操作小结

文章目录
  1. 1. HTML文档结构
  2. 2. 标题、段落与换行符
  3. 3. 样式和语义标签
    1. 3.1. html标签块
    2. 3.2. 包含样式和语义的标签
    3. 3.3. 列表标签
      1. 3.3.1. 有序列表
      2. 3.3.2. 无序列表
      3. 3.3.3. 定义列表
    4. 3.4. html表格
  4. 4. HTML表单
  5. 5. HTML选项框

本篇主要基于HTML在开发中的常用操作进行小结。

HTML文档结构

HTML的声明内容很多,但是不需要一行一行自己写。
只需要声明了一个.html文件后,第一行输入一个 ! ,再按一下tab键就行。

本节主要讲两个标签:

  1. <head> 用于撰写网页的标题和设置
  2. <body> 网页主体,即在页面上需要展示的内容。

网页中使用语言的设置在开头的html中进行设置:
<html lang="zh-CN">

标题、段落与换行符

1、标题:h标签

1
2
3
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2、段落:p标签

1
2
3
<p>
假装这里有一段很长的文字,但是我也不知道写什么所以就这么乱写一顿吧。
</p>

3、空格符号:&nbsp,两个&nbsp写在一起相当于半个空格

4、换行:<br>

样式和语义标签

html标签块

1、<div> 表示一块内容,没有具体语义
2、<span> 行内元素,表示一行中的一小段内容,没有具体语义
3、<img> 图像标签,常用属性包括src和alt:
src:定义图片的引用地址
alt:定义图片加载失败时显示的文字
4、<a>用于定义链接

1
<a href="https://blablabla.com">blablabla</a>

e.g. 使用图片做链接:

1
2
3
<a href="https://blablabla.com">
<img src="图片地址" alt="pic">
</a>

e.g. 返回本页顶部

1
<a href="#">回到顶部</a>

e.g. 页面打开说明:a标签中有一个参数,叫target:

1
2
target="_self"  在原来页面的基础上打开
target="blank" 打开一个新页面

包含样式和语义的标签

(1) <em>标签行内元素,表示语气中的强调词;
(2) <i>标签 行内元素,表示专业词汇;
(3) <b>标签 行内元素,表示文档中的关键字或者产品名;
(4) <strong>标签 行内元素,表示非常重要的内容。

1
2
3
4
<em>Mia San Mia</em>
<i>Mia San Mia</i>
<b>Mia San Mia</b>
<strong>Mia San Mia</strong>

效果如下:

列表标签

有序列表

在网页上定义一个有编号的列表可以用<ol><li>来配合实现。
ol搭配多个li的快捷写法:ol>li*n,n表示需要多少个li标签的具体数量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表标签</title>
</head>
<body>
<ol>
<li>列表文字1</li>
<li>列表文字2</li>
<li>列表文字3</li>
<li>列表文字4</li>
</ol>
</body>
</html>

无序列表

在网页上定义一个无序列表可以用<ul><li>配合使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表标签</title>
</head>
<body>
<ul>
<li>列表文字1</li>
<li>列表文字2</li>
<li>列表文字3</li>
<li>列表文字4</li>
</ul>
</body>
</html>

定义列表

(1) <dl> 标签表示列表的整体;
(2) <dt> 标签定义属于的题目;
(3) <dd> 标签是术语的解释;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义列表</title>
</head>
<body>
<h1>页面标题</h1>
<dl>
<dt>html</dt>
<dd>负责页面结构</dd>

<dt>css</dt>
<dd>负责页面的表现</dd>

<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
</body>
</html>

html表格

1、<table>标签:声明一个表格,它的常用属性如下:
border属性 定义表格的边框,设置值是数值
cellpadding属性 定义单元格内容与边框的距离,设置值是数值
cellspacing属性 定义单元格与单元格之间的距离,设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left | center | right
2、<tr>标签:定义表格中的一行
3、<td><th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格,它们的常用属性如下:
align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并,设置值是数值
rowspan 设置单元格垂直合并,设置值是数值

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>html表格</title>
</head>
<body>
<h1 style="text-align: center;">表格</h1>
<table border="1" width="300" height="50" align="center">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td valign="top" align="center">4</td>
<td valign="top">5</td>
<td valign="top">6</td>
</tr>
<tr>
<td valign="top">4</td>
<td valign="top">5</td>
<td valign="top">6</td>
</tr>
</table>
</body>
</html>

HTML表单

html表单通过form标签来生成:

1
<form></form>

提交表单通过action进行设置,后面跟的是表单提交的地址。
提交表单的方式通过method参数来进行定义,一般有get和post两种操作。

1
<form action="地址" method="get"></form>

HTML选项框

type:radio,小圆点单选项

1
2
3
4
5
<div>
<label>性&nbsp;&nbsp;&nbsp;别:</label>
<input type="radio" name="gender" />
<input type="radio" name="gender" />
</div>

为提交的内容标明属性值:value

1
2
3
4
5
<div>
<label>性&nbsp;&nbsp;&nbsp;别:</label>
<input type="radio" name="gender" value="male"/>
<input type="radio" name="gender" value="female"/>
</div>