Post

前端三件套学习

Posted Updated
By Kurisu 9 min read

HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

本贴主要通过代码框来简要整理常用标签用法，先从最基本的开始。

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

<!-- 通用声明，指定HTML版本，有助于浏览器中正确显示网页 -->
<!DOCTYPE html>
<!-- <html>元素定义了整个HTML文档 -->
<html>
    <!-- <body>元素定义了HTML文档的主体 -->
    <body>
        <!-- <p>元素定义了HTML文档中的一个段落 -->
        <p>
            这是一个段落
        </p>
    </body>

    <!-- 通过属性指定超链接和被链接的文档在何处显示，id属性可以一个HTML文档书签标记，属性值应始终被包含在引号中 -->
    <a href="https://baidu.com" target="_blank" id="tips">这是一个超链接</a>
    <!-- 一个链接跳转到当前或其他页面tips处 -->
    <a href="#tips">访问有用的提示部分</a>
    <a href="/html/html-links.html#tips"> 访问有用的提示部分</a>

    <!-- h1-6定义多级标题 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>

    <!-- <hr>或<hr />标签在HTML页面中创建水平线，可用于分隔内容 -->
    <hr>
    <hr />

    <!-- <br>或<br />标签进行换行 -->
    <br>
    <br />
</html>

在这里需要注意，我们无法确定HTML被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于HTML，我们无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。

这部分主要整理的是文本格式化相关的内容。

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

<!-- 尽量使用<strong>,<em>替换<i>和<b>标签 -->
<strong>文字加粗(cainiaojc.com)</strong>

<em>斜体文字,nhooo基础教程</em>
<i>也是斜体文字</i>

<code>Code自动输出</code>

这是元素X<sub>下标</sub>和X<sup>上标</sup>

化学分子式：<b>C<sub>7</sub>H<sub>7</sub>F<sub>2</sub>N</b>

<ins>插入字</ins>

<del>删除字</del>

<q>定义短的引用语</q>
<blockquote>定义长的引用</blockquote>
<cite>定义引用、引证</cite>

<!-- 定义文字方向 -->
<bdo dir="rtl">该段落文字从右到左显示。</bdo>

<!-- 定义缩写 -->
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>

<address>定义地址</address>

<pre>定义预格式文本，使获得对空行和空格进行控制的能力</pre>

接下来是HTML的头部元素，head元素包含了所有的头部标签元素。在 head元素中可以插入脚本（scripts），样式文件（CSS），及各种meta信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- <title>标签定义了不同文档的标题，定义了浏览器工具栏的标题、显示在收藏夹中的标题以及显示在搜索引擎结果页面的标题 -->
<title>HTML文档标题</title>

<!-- <base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接 -->
<base href="/images/" target="_blank">

<!-- <link>标签定义了文档与外部资源之间的关系，通常用于链接到样式表 -->
<link rel="stylesheet" type="text/css" href="style.css">

<!-- <style>标签定义了HTML文档的样式文件引用地址 -->
<style type="text/css">
/*定义网页背景颜色*/
body {background-color:red}
p {color:green}

CSS可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用”style” 属性
  • 内部样式表 -在HTML文档头部head区域使用style元素来包含CSS
  • 外部引用 - 使用外部CSS文件

最推荐使用外部引用CSS文件，详细内容留到CSS学习部分。

表格是做前端中非常重要的一部分，详细内容如下

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

<!-- 表格由<table>标签来定义，行由<tr>标签定义，每行被分割为若干单元格由<td>标签定义 -->
<table border="1">
    <tr>
        <td>行 1, 列 1</td>
        <td>行 1, 列 2</td>
    </tr>
    <tr>
        <td>行 2, 列 1</td>
        <td>行 2, 列 2</td>
    </tr>
</table>

<!-- 表格的表头使用<th>标签进行定义 -->
<tr>
    <th>表头一</th>
    <th>表头二</th>
</tr>

<!-- 单元格跨列与跨行 -->
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>

<!-- 单元格边距以及间距 -->
<table border="1" cellpadding="10" cellspacing="10">
...
</table>

HTML区块是一个存放标签的盒子，对标签进行分组。通过div标签和span标签将元素组合起来，块级元素在浏览器显示时，通常会以新行来开始和结束。
div元素是块级元素，没有特定的含义，是用于组合其他HTML元素的容器。如果与CSS一同使用，div元素可用于对大的内容块设置样式属性。其常见的用途是文档布局，它取代了使用表格定义布局的老式方法。
span元素是内联元素，可用作文本的容器，当与CSS一同使用时，span元素可用于为部分文本设置样式属性。
以下为一个使用div元素进行布局的例子。

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

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>基础教程(cainiaojc.com)</title> 
    </head>
    <body>
        <div id="container" style="width:520px">
            <div id="header" style="background-color:#FFA300;">
            <h1 style="margin-bottom:0;">主要的网页H1标题</h1></div>
    
            <div id="menu" style="background-color:#FF9a00;height:200px;width:120px;float:left;">
                <b>菜单</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </div>
    
            <div id="content" style="background-color:#dddddd;height:200px;width:400px;float:left;">
                内容在这里
            </div>
    
            <div id="footer" style="background-color:#FFA300;clear:both;text-align:center;">
                版权 © 基础教程(cainiaojc.com)
            </div>
        </div>
    </body>
</html>

HTML表单用于收集不同类型的用户输入,所有浏览器都支持form标签，表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form>
<!-- 文本域，也就是输入框 -->
<input type="text" name="firstname" size="20"/>

<!-- 密码字段，也就是不会铭文显示 -->
<input type="password" name="pwd"/>

<!-- 单选按钮 -->
<input type="radio" name="sex" value="male"/>

<!-- 复选框 -->
<input type="checkbox" name="vehicle" value="Bike"/>

<!-- 提交按钮 -->
<input type="submit" value="Submit">
</form>

还需一些其他的标签，需要用的时候再查。

CSS

学习, 技术
技术
This post is licensed under CC BY 4.0 by the author.

Trending Tags

算法 技术 生活 ACG 小记