myHtml

Html 常用代码

在HTML页面的头部申明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。


xxxxxxxxxx
4
1
<head>
2
    <meta charset="UTF-8">
3
    <title>页面标题</title>
4
</head>

HTML 标题：通过 <h1> - <h6> 标签来定义。


xxxxxxxxxx
4
1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
...
4
<h6>三级标题</h6>

HTML 段落：通过 <p> 标签来定义。


xxxxxxxxxx
2
1
<p>这是一个段落。</p>
2
<p>这是另一个段落。</p>

HTML 链接：可以跳转到外部链接地址，也可以链接到当前页面的某部分实现内部导航功能。


xxxxxxxxxx
4
1
<a href="#">空连接</a>
2
<a href="https://www.w3cschool.cn">w3cschool</a>      //链接到外部地址
3
<div id="ct1">词条1</div>           //跳转到页面内部，用 #id 链接
4
<a href="#ct1">跳转到词条1</a>

HTML 图像：通过 <img> 标签来定义。


xxxxxxxxxx
1
1
<img src="https://www.your-image-source.com/your-image.jpg">    //img是自关闭元素，不需要结束标记

HTML 格式化：

文本格式化


xxxxxxxxxx
8
1
<b>这个文本是加粗的</b>         //加粗
2
<strong>这个文本也是加粗的</strong>      //加粗，并表示文本重要
3
<i>这个文本是斜体的</i>         //斜体
4
<em>这个文本是斜体的</em>       //斜体，并表示文本重要
5
<big>这个文本字体放大</big>       //字体放大
6
<small>这个文本是缩小的</small>       //字体缩小
7
这个文本包含<sup>上标</sup>       //上标
8
这个文本包含<sub>下标</sub>       //下标

预文本格式化


xxxxxxxxxx
5
1
<pre>             //pre标签保存文本中的空行和空格
2
此例样式如何使用 pre 标签   
3
对 空行 和    空格
4
进行控制
5
</pre>

"计算机输出"标签


xxxxxxxxxx
6
1
//这些标签常用语显示 计算机/编程 代码
2
<code>计算机输出</code>          //计算机输出
3
<kbd>键盘输入</kbd>         //键盘输入
4
<tt>打字机文本</tt>          //打字机文本
5
<samp>计算机代码样本</samp>        //计算机代码样本
6
<var>计算机变量</var>          //计算机变量

地址


xxxxxxxxxx
4
1
<address>           //表示地址
2
Written by XXXX
3
yyyyy
4
</address>

缩写和首字母缩写


xxxxxxxxxx
2
1
<abbr title="etcetera">etc</abbr>       //缩略词，用title表示
2
<acronym title="World Wide Web">WWW</acronym>

文字方向


xxxxxxxxxx
5
1
<p>该段文字从左到右显示</p>         //默认从左到右
2
<p>               //用bdo+dir从右到左显示
3
    <bdo dir="rtl">该段文字从右到左显示</bdo>     //ltr左，rtl右 
4
</p>
5
<p dir="rtl">从左到右靠右端对其显示</p>        //从左到右，靠右侧对其显示

块引用


xxxxxxxxxx
7
1
<p>               //用<q>来定义短的引用语
2
    WWF's goal is to:
3
    <q>AAAAA</q>,
4
    <q>BBBBB</q>,
5
    <q>CCCCC</q>
6
    We hope they succeed.
7
</p>

删除字效果和插入字效果


xxxxxxxxxx
2
1
<del>删除字</del>          //删除字
2
<ins>插入字</ins>          //插入字

HTML 头部

title：定义了HTML文档的标题


xxxxxxxxxx
3
1
<head>
2
    <title>页面标题</title>
3
</head>

base：定义了所有链接的URL


xxxxxxxxxx
6
1
<head>
2
    <base href="https://www.w3cschool.cn/statics/images/w3c/" target="_blank">
3
</head>
4
<body>
5
    <img src="logo.png">
6
</body>

meta：提供了HTML文档的meta标记


xxxxxxxxxx
7
1
<head>
2
<title>W3Cschool(w3cschool.cn)</title> 
3
<meta name="description" content="免费web教程">
4
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
5
<meta name="author" content="W3Cschool">
6
<meta charset="UTF-8">
7
</head>

HTML CSS

内联样式 - 在HTML元素中使用"style"属性。


xxxxxxxxxx
3
1
<p style="color:blue;margin-left:20px">
2
    This is a garagraph.
3
</p>

内部样式表 - 在HTML文档头部 <head>区域使用 <style>元素来包含 CSS 。


xxxxxxxxxx
6
1
<head>
2
    <style type="text/css">
3
        body {background-color: yellow;}
4
        p {color: blue;}
5
    </style>
6
</head>

外部引用 - 使用外部 CSS 文件。


xxxxxxxxxx
3
1
<head>
2
    <link rel="stylesheet" type="text/css" href="mystyle.css">
3
</head>

HTML 表格


xxxxxxxxxx
6
1
<table border="0">      //定义表格+无边框
2
    <tr>        //定义表格的行
3
        <th>这是表头</th>   //定义表格的表头
4
        <td>这是单元格</td>    //定义表格单元
5
    </tr>
6
</table>


xxxxxxxxxx
4
1
<td colspan="2">AAA</td>    //跨2列的单元格
2
<tr rowspan="3">      //跨3行的单元格
3
  <td>BBB</td>
4
</tr>


xxxxxxxxxx
3
1
<table border="1" >...</table>    //单元格间距
2
<table cellpadding="0">...</table>  //单元格边距
3
<table cellspacing="0">...</table>  //单元格间距(0时单元格边框为一条细线)

HTML 列表

无序列表


xxxxxxxxxx
6
1
<ul>
2
    <li>coffee</li>
3
    <li>milk</li>
4
    <li>...</li>
5
</ul>
6
// css样式可修改:list-style-type:disc,circle,square

有序列表


xxxxxxxxxx
7
1
<ol>
2
    <li>coffee</li>
3
    <li>milk</li>
4
    <li>...</li>
5
</ol>
6
// ol 可加属性 type="A,a,I,i"
7
// ol 可加属性 start="number"，只能是数字，H5不推荐

自定义列表


xxxxxxxxxx
6
1
<dl>              //自定义列表开始
2
    <dt>Coffee</dt>         //自定义列表项
3
    <dd> - black hot drink</dd>       //自定义列表项定义
4
    <dt>Milk</dt>
5
    <dd> - white cold drink</dd>
6
</dl>

HTML 区块


xxxxxxxxxx
2
1
区块元素：自动换行，可设定宽度，<h1>，<p>，<ul>，<table>，<div>等
2
内联元素：不自动换行，不可设定宽度，<b>，<td>，<a>，<img>，<span>等

HTML 布局


xxxxxxxxxx
8
1
<div>
2
    <div style="float:left">
3
        <b>我在左边</b>
4
    </div>
5
    <div>
6
        <b>我在右边</b>
7
    </div>
8
</div>

HTML 表单


xxxxxxxxxx
33
1
<form action="xxx" method="post">     //定义表单
2
    <fieldset>            //定义带边框的表单，非必须
3
        <legend>          //和fieldset一起使用，表示边框标题
4
            表单边框标题
5
        </legend>
6
        //表单控件
7
        user:<input type="text" name="user">
8
        password:<input type="password" name="password">
9
        //单选
10
        <input type"radio" name="sex" value="male">Male<br>
11
        <input type="radio" name="sex" value="female">Female<br>
12
        //多选
13
        <input type="checkbox" name="vehicle" value="Bike">I have a bike <br>
14
        <input type="checkbox" name="vehicle" value="Car">I have a car<br>
15
        //简单下拉框
16
        <select name="cars">
17
            <optgroup label="Swedish Cars">         //选项分组1
18
              <option value="volvo">Volvo</option>
19
              <option value="saab">Saab</option>
20
            </optgroup>
21
            <optgroup label="German Cars">          //选项分组2
22
                <option value="mercedes">Mercedes</option>
23
              <option value="audi" selected>Audi</option>     //默认选中值
24
            </optgroup>
25
        </select>
26
        //文本域
27
        <textarea rows="10" cols="50">    
28
          我是一个文本框。
29
        </textarea>
30
        //提交按钮(url在form上配置)
31
        <input type="submit" value="提交">
32
    </fieldset>
33
</form>


xxxxxxxxxx
5
1
//label 元素的使用，点击label元素，等同于点击对应的表单控件
2
<form action="xxx" method="post">
3
    <label for="ma">Male</label><input type="radio" name="sex" value="male" id="ma"><br>
4
    <label for="fe">Female</label><input type="radio" name="sex" value="female" id="fe">
5
</form>

HTML 框架


xxxxxxxxxx
4
1
<iframe src="demo_iframe.html" name="iframe_a"></iframe>      //定义iframe
2
<p>
3
    <a href="https://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a> //target表示链接在iframe框架中打开
4
</p>

HTML 字符实体


xxxxxxxxxx
3
1
<  等同于 &lt;
2
>  等同于 &gt;
3
©  等同于 &copy;

HTML URL
- ```
xxxxxxxxxx
1
1
scheme://host.domain:port/path/filename
```
- 说明
  - scheme - 定义因特网服务的类型。最常见的是 http 。
  - host - 定义域主机（http 的默认主机是 www）。
  - domain - 定义因特网域名，比如 w3cschool.cn 。
  - :post - 定义主机上的端口号（http 默认的端口号是 80）。
  - path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  - filename - 定义文档/资源的名称。

HTML 媒体

插件可以使用 <object> 和 <embed> 标签来显示，两者效果都是类似，可用于插入对象(音频，视频，HTML页面，Java小程序，PDF 阅读器，Flash 播放器等)，区别是：

object ：HTML4 的标准标签， <param> 配合使用。
embed：HTML5 的新标签，在HTML4 中是非法的。

所以，两者一般一起使用，确保能兼容新旧浏览器。


xxxxxxxxxx
11
1
<body>
2
    <object width="550" height="400" data="heartbeats.mp3"></object>
3
    <embed width="550" height="400" src="heartbeats.mp3">
4
    //合并使用
5
    <object width="550" height="400" src="headerbeats.mp3">
6
        <param name=moive value="myflashmovie.swf">
7
        <param name=quality value="high">
8
        <param name=bgcolor value="#ffffff">
9
        <embed src="heartbeats.mp3">
10
    </object>
11
</body>

Audio：音频文件

使用 <audio> 和 <source> 标签来定义音频。
<audio> 是一个 HTML5 元素，在 HTML4 中是非法的，但在所有浏览器中都有效。
一般和 <embed> 一起使用，保证兼容性。


xxxxxxxxxx
5
1
<audio controls height="100" width="100">
2
    <source src="horse.mp3" type="audio/mpeg">
3
    <source src="horse.mp3" type="audio/ogg">
4
    <embed height="50" width="100" src="horse.mp3">
5
</audio>

Videos：视频文件

使用 <video> 和 <source> 标签来定义视频。
<video> 是一个 HTML5 元素，在 HTML4 中是非法的，但在所有浏览器中都有效。
一般和 <object> ， <embed> 一起使用，保证兼容性。


xxxxxxxxxx
8
1
<video width="320" height="240" controls>
2
    <source src="moive.mp4" type="video/mp4">
3
    <source src="moive.ogg" type="video/ogg">
4
    <source src="moive.webm" type="video/webm">
5
    <object data="moive.mp4" width="320" height="240" >
6
        <embed src="moive.swf" width="320" height="240">
7
    </object>
8
</video>

HTML 拓展阅读

常用代码


xxxxxxxxxx
8
1
//超链接设置
2
text-decoration:参数
3
参数取值范围
4
underline:为文字加下划线
5
overline:为文字加上划线
6
line-through:为文字加删除线
7
blink:使文字闪烁
8
none:不显示上述任何效果

常用标签：见 CSS.md 文档。