2020-05-20

开发

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

文章目录

1. HTML文档结构
2. 标题、段落与换行符
3. 样式和语义标签
4. HTML表单
5. HTML选项框

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

HTML文档结构

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

本节主要讲两个标签：

<head> 用于撰写网页的标题和设置
<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>标签行内元素，表示非常重要的内容。

<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标签的具体数量。

<!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>配合使用。

<!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> 标签是术语的解释；

<!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 设置单元格垂直合并，设置值是数值

<!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，小圆点单选项

<div>
    <label>性&nbsp;&nbsp;&nbsp;别:</label>
    <input type="radio" name="gender" /> 男
    <input type="radio" name="gender" /> 女
</div>

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

<div>
    <label>性&nbsp;&nbsp;&nbsp;别:</label>
    <input type="radio" name="gender" value="male"/> 男
    <input type="radio" name="gender" value="female"/> 女
</div>

Klaus's Blog

MIA SAN MIA