Fork me on GitHub

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
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
<!--(!DOCTYPE)：标准通用标记语言的文档类型声明-->
<!DOCTYPE html>
<!--语言-->
<html lang="en">
<head>
    <!--编码-->
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--html网页书签栏icon-->
    <link rel="icon" type="image/x-icon" href="../images/favicon.ico">

    <!--
    META元素
    通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
    元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
    -->
    <!--适配手机-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--为搜索引擎定义关键词:-->
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <!--为网页定义描述内容:-->
    <meta name="description" content="Free Web tutorials on HTML and CSS">
    <!--定义网页作者:-->
    <meta name="author" content="jason">
    <!--网页重定向-->
    <meta http-equiv="refresh" content="3; https://www.baidu.com/">
    <!--每30秒中刷新当前页面:-->
    <meta http-equiv="refresh" content="3">

    <!--默认链接打开方式-->
    <base target='_blank'>
    <!--默认链接地址-->
    <base href="http://liusong.site/" target="_blank">

    <!--js语法-->
    <script type="text/javascript">
        //...
    </script>
    <!--不支持脚本js的提示-->
    <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
    <!--引用外部的js-->
    <script src="myScript.js"></script>

    <!--css样式-->
    <style type="text/css">
        /*...*/
    </style>
    <!--外部样式表-->
    <link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>

</body>
</html>

常见单标签

1
2
3
注释：<!---->
换行：<br />
水平线：<hr/>

文字标签(双标签)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
● 段落标签：<p>文本内容</p>
● 标题标签：
  <h1></h1> 权重比较大，不利于seo，一个页面最好只出现一次；
  <h2></h2>......<h6></h6> 文字大小依次递减； 
● 文本标签：<font size="6" color="red">内容</font>
● 加粗标签：
  <strong></strong> 推荐使用(有语气强调意思)
  <b></b>
● 文字倾斜标签：
  <em>content</em> 推荐使用(有语气强调意思)
  <i>content</i>
● 删除线标签：
  <del>content</del> 推荐使用(有语气强调意思)
  <s>content</s>
● 下划线(插入)标签：
  <ins>content</ins> 推荐使用(有语气强调意思)
  <u>content</u>
● <sup>上标</sup> <sub>下标</sub>

图片

属性：

  • alt：图片不显示时的替换文本；
  • title：提示文本，鼠标放上去的提示文字；
1
2
3
<img src="android.jpg"
     alt="hello" title="安卓" 
     width="200" height="200" border="5">

超链接

属性：

  • href：目标地址；
  • title：提示文字；
  • target：打开方式（_self：当前页面打开；_blank：在新的页面中打开）
1
2
3
4
<a href="https://www.baidu.cn" 
   title="提示" target="_blank">
   超链接
</a>

超链接锚点

在当前页面通过设置id锚点，点击超链接滑动到锚点处；

1
2
3
4
// 1. 设置锚点;
<p id='aim'>锚点</p>
// 2. 超链接到锚点；
<a href='#aim'>去锚点</a>

空链接

1
<a href="#">空链接,无效链接</a>
1
<a href="">未设置链接地址，自动跳转到base设置的标签</a>

发邮件链接

1
<a href="mailto:webmaster@example.com">点击发送e-mail</a>

超链接优化写法

在head中设置超链接的打开方式

1
2
3
<head>
    <base target='_blank'>
</head>

特殊字符

常用特殊字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号
 空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

音标符

1
2
3
4
5
6
7
8
9
音标符 字符 Construct 输出结果
̀ a a&#768; à
́ a a&#769; á
̂ a a&#770; â
̃ a a&#771; ã
̀ O O&#768; Ò
́ O O&#769; Ó
̂ O O&#770; Ô
̃ O O&#771; Õ

列表

无序列表

无序类型（type）:

  • disc: 默认实心圆点；
  • square: 实心方块；
  • circle: 空心圆点；
1
2
3
4
5
6
7
8
9
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

<ul type='square'>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

有序列表

属性

type:（无序类型）

  • ‘1’: 默认按1、2、3、…排序；
  • ‘a’: 按a、b、c、…排序；
  • ‘A’: 按A、B、C、…排序；
  • ‘i’: 按i、ii、…排序；
  • ‘I’: 按I、II、…排序；

start:（开始的位置）

1
2
3
4
5
6
7
8
9
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<ol type='1' start='3'>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

自定义列表

1
2
3
4
<dl>
    <dt>小标题</dt>
    <dd>- 解释标题</dd>
</dl>

音乐标签

1
2
// embed很丑，所以用hidden隐藏，音乐仍然播放；
<embed src='xx.mp3' hidden='true'>

滚动

behavior(滚动方式)

  • alternate: 两端之间来回滚；
  • scroll: 一端到另一端重复滚；
  • slide: 一端滚到另一端，不重复；

direction(滚动方向)

  • down
  • up
  • left
  • right

loop(滚动次数)

  • -1： 一直滚；

bgcolor: 设置背景色

1
2
3
4
<marquee behavior='slide' direction='down'
height='500' width='30' bgcolor='#ff0'>
文字或图片
</marquee>

表格

表格标签属性：

  • cellspacing: 单元格之间的距离；
  • cellpadding: 单元格内容距边框距离；
  • align=”center”：表格居中
  • bordercolor=”red”: 边框颜色

表格标签css样式：

  • border-collapse: collapse 内外边框折叠样式；

行列属性

  • colspan=”3”：跨列；
  • rowspan=”4”: 跨行；
  • align=”center”：内容居中
  • valign=”top|middle|bottom”: 垂直对齐方式；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table border="1" width='200' height='500' border="1" cellspacing="2"
    cellpadding="2" bgcolor="#ff0" align="center">
    <caption>表格标题</caption>
    <!--表格列的组：根据组标记设置同组样式-->
    <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
    </colgroup>
    <tr align="center">
        <th colspan="2">表格的表头</th>
        <th>表格的表头</th>
    </tr>
    <tr>
        <td>表格单元</td>
        <td>表格单元</td>
        <td>表格单元</td>
    </tr>
    <tr>
        <td>表格单元</td>
        <td>表格单元</td>
        <td>表格单元</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--table标准结构：有利于seo搜索引擎优化-->
<!--thead/tbody/tfoot只是标记不能设置属性-->
<table>
    <thead>
        <tr><td>头部</td></tr>
    </thead>
    <tbody>
        <tr><td>内容</td></tr>
    </tbody>
    <tfoot>
        <tr><td>底部</td></tr>
    </tfoot>
</table>
1
2
3
4
5
6
<!--细线表格-->
<table width="300" height="300" bgcolor="green" cellspacing="1">
    <tr bgcolor="white">
        <td></td>
    </tr>
</table>

表单

表单

1
<form action="xxx.php" method="get"></form>
  • action=”xx.php”: 表单的信息处理；
  • method=”get|post”: 提交方式；

按钮

1
2
3
4
5
6
7
8
9
10
11
<input type="submit" value="提交按钮">
<input type="button" value="按钮">

文件上传
<input type="file">
图片按钮
<input type="image" src="xxx.jpg">
重置按钮
<input type="reset">
滑块
<input type="range">

文本输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form>
    <input type="text" readonly="readonly"
           name="username" maxlength="6"
           disabled="disabled" value="默认值">

    <input type="password">
    <textarea name="text" rows="10" cols="30">文本域,30字符，10行</textarea>
    
    网址输入（空也能提交！！！）
    <input type="url">
    日期
    <input type="date">
    时间
    <input type="time">
    邮件
    <input type="email">
    数字控件(step：递增步长)
    <input type="number" step="2">
</form>

单选框

1
2
3
4
5
6
<form>
    <input type="radio" name="sex" value="male" checked="checked">男
    <input type="radio" name="sex" value="female">女
    <input type="radio" name="sex" value="other" id="other">
    <label for="other">label</label>
</form>

复选框

1
2
3
4
5
<form>
    <input type="checkbox" name="vehicle" value="Bike" checked="checked">Bike
    <input type="checkbox" name="vehicle" value="Car">Car
    <input type="checkbox" name="vehicle" value="Train" checked="checked">Train<br/>
</form>

下拉列表

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
<form>
    简单的下拉列表:
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <br/>
    支持多选
    <select name="cars" multiple="multiple">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <br/>
    预选下拉列表:
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <br/>
    <p>下拉列表-选项分组</p>
    <select>
        <optgroup label="Swedish Cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </optgroup>
    </select>
</form>

表单分组

1
2
3
4
5
6
<fieldset>
    <legend>标题</legend>
    姓名: <input type="text"><br>
    邮箱: <input type="text"><br>
    生日: <input type="text">
</fieldset>

预选列表

1
2
3
4
5
6
7
8
9
10
11
12
13
<form name="input" action="html_form_action" method="get">
    <p>一个预先定义的输入控件选项列表</p>
    <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <br/>
</form>

发送电子邮件

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
<!-- enctype="text/plain"
表示不对特殊字符进行编码，只会将空格转为加号
form的enctype属性规定在发送表单数据之前如何对其进行编码。
默认地，表单数据会编码为 "application/x-www-form-urlencoded"。
就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
-->
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    <fieldset>
        <legend>表单发送电子邮件</legend>
        Name:<br>
        <input type="text" name="name" value="your name"><br>
        E-mail:<br>
        <input type="text" name="mail" value="your email"><br>
        Comment:<br>
        <input type="text" name="comment" value="your comment" size="50"><br><br>
        send time:<br>
        <select name=time>
            <option value="2015">2015</option>
            </br>
            <option value="2016">2016</option>
            </br>
            <option value="2017">2017</option>
            </br>
        </select></br>
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
    </fieldset>
</form>

表单计算(IE不支持)

1
2
3
4
5
6
7
8
9
10
<p>output:定义一个计算结果(IE不支持)</p>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range" id="a" value="50">
    100
    +
    <input type="number" id="b" value="50">
    =
    <output name="x" for="a b"></output>
</form>

iframe内联框

  • 标签规定一个内联框架。
  • 一个内联框架被用来在当前 HTML 文档中嵌入另一个HTML文档。
  • 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
1
2
3
4
5
6
7
8
9
<!--iframe简单使用-->
<iframe id="aim" src="https://www.baidu.com" width="300" height="300"></iframe>

<!--iframe去除边框-->
<iframe src="https://www.baidu.com" frameborder="0" width="300" height="300"></iframe>

使用iframe来显示外部的链接页面
<iframe src="https://www.baidu.com" name="iframe_a"></iframe>
<p><a href="http://www.taobao.com" target="iframe_a">去淘宝</a></p>

标签元素分类

块级元素

概念

块元素指的是占据全部可用宽度的元素，可以容纳内联元素和其他块元素，并且在其前后都会换行。

块元素概览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

内联(行内)元素

概念

内联(行内)元素指可以共处一行之内，宽高即是内容的宽高，
只能容纳文本或者其他内联元素。

内联元素概览：
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
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体（不推荐）
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码（在引用源码的时候需要）
dfn - 定义字段
em - 强调
font - 字体设定（不推荐）
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线（不推荐）
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

行内块元素

行内块元素常见的有： img input td

CSS中块和内联元素转换

1.display

块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;

1
2
3
4
a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
b.display:block;转换为块级元素。
c.display:inline;转换为行内元素。
d.display:inline-block;转换为行内块级元素。

2.float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。

3.position

当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多