Html 常用代码
- 在HTML页面的头部申明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
- HTML 标题：通过 <h1> - <h6> 标签来定义。
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>三级标题</h6>
- HTML 段落：通过 <p> 标签来定义。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
- HTML 链接：可以跳转到外部链接地址，也可以链接到当前页面的某部分实现内部导航功能。
<a href="#">空连接</a>
<a href="https://www.w3cschool.cn">w3cschool</a> //链接到外部地址
<div id="ct1">词条1</div> //跳转到页面内部，用 #id 链接
<a href="#ct1">跳转到词条1</a>
- HTML 图像：通过 <img> 标签来定义。
<img src="https://www.your-image-source.com/your-image.jpg"> //img是自关闭元素，不需要结束标记
HTML 格式化：
- 文本格式化
<b>这个文本是加粗的</b> //加粗 <strong>这个文本也是加粗的</strong> //加粗，并表示文本重要 <i>这个文本是斜体的</i> //斜体 <em>这个文本是斜体的</em> //斜体，并表示文本重要 <big>这个文本字体放大</big> //字体放大 <small>这个文本是缩小的</small> //字体缩小 这个文本包含<sup>上标</sup> //上标 这个文本包含<sub>下标</sub> //下标
- 预文本格式化
<pre> //pre标签保存文本中的空行和空格 此例样式如何使用 pre 标签 对 空行 和 空格 进行控制 </pre>
- "计算机输出"标签
//这些标签常用语显示 计算机/编程 代码 <code>计算机输出</code> //计算机输出 <kbd>键盘输入</kbd> //键盘输入 <tt>打字机文本</tt> //打字机文本 <samp>计算机代码样本</samp> //计算机代码样本 <var>计算机变量</var> //计算机变量
- 地址
<address> //表示地址 Written by XXXX yyyyy </address>
- 缩写和首字母缩写
<abbr title="etcetera">etc</abbr> //缩略词，用title表示 <acronym title="World Wide Web">WWW</acronym>
- 文字方向
<p>该段文字从左到右显示</p> //默认从左到右 <p> //用bdo+dir从右到左显示 <bdo dir="rtl">该段文字从右到左显示</bdo> //ltr左，rtl右 </p> <p dir="rtl">从左到右靠右端对其显示</p> //从左到右，靠右侧对其显示
- 块引用
<p> //用<q>来定义短的引用语 WWF's goal is to: <q>AAAAA</q>, <q>BBBBB</q>, <q>CCCCC</q> We hope they succeed. </p>
- 删除字效果和插入字效果
<del>删除字</del> //删除字 <ins>插入字</ins> //插入字
HTML 头部
- title：定义了HTML文档的标题
<head> <title>页面标题</title> </head>
- base：定义了所有链接的URL
<head> <base href="https://www.w3cschool.cn/statics/images/w3c/" target="_blank"> </head> <body> <img src="logo.png"> </body>
- meta：提供了HTML文档的meta标记
<head> <title>W3Cschool(w3cschool.cn)</title> <meta name="description" content="免费web教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="W3Cschool"> <meta charset="UTF-8"> </head>
HTML CSS
- 内联样式 - 在HTML元素中使用"style"属性。
<p style="color:blue;margin-left:20px"> This is a garagraph. </p>
- 内部样式表 - 在HTML文档头部 <head>区域使用 <style>元素来包含 CSS 。
<head> <style type="text/css"> body {background-color: yellow;} p {color: blue;} </style> </head>
- 外部引用 - 使用外部 CSS 文件。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 表格
html <table border="0"> //定义表格+无边框 <tr> //定义表格的行 <th>这是表头</th> //定义表格的表头 <td>这是单元格</td> //定义表格单元 </tr> </table>
html <td colspan="2">AAA</td> //跨2列的单元格 <tr rowspan="3"> //跨3行的单元格 <td>BBB</td> </tr>
html <table border="1" >...</table> //单元格间距 <table cellpadding="0">...</table> //单元格边距 <table cellspacing="0">...</table> //单元格间距(0时单元格边框为一条细线)
HTML 列表
- 无序列表
<ul> <li>coffee</li> <li>milk</li> <li>...</li> </ul> // css样式可修改:list-style-type:disc,circle,square
- 有序列表
<ol> <li>coffee</li> <li>milk</li> <li>...</li> </ol> // ol 可加属性 type="A,a,I,i" // ol 可加属性 start="number"，只能是数字，H5不推荐
- 自定义列表
<dl> //自定义列表开始 <dt>Coffee</dt> //自定义列表项 <dd> - black hot drink</dd> //自定义列表项定义 <dt>Milk</dt> <dd> - white cold drink</dd> </dl>
HTML 区块
区块元素：自动换行，可设定宽度，<h1>，<p>，<ul>，<table>，<div>等 内联元素：不自动换行，不可设定宽度，<b>，<td>，<a>，<img>，<span>等
HTML 布局
html <div> <div style="float:left"> <b>我在左边</b> </div> <div> <b>我在右边</b> </div> </div>
HTML 表单
html <form action="xxx" method="post"> //定义表单 <fieldset> //定义带边框的表单，非必须 <legend> //和fieldset一起使用，表示边框标题 表单边框标题 </legend> //表单控件 user:<input type="text" name="user"> password:<input type="password" name="password"> //单选 <input type"radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> //多选 <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car<br> //简单下拉框 <select name="cars"> <optgroup label="Swedish Cars"> //选项分组1 <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> //选项分组2 <option value="mercedes">Mercedes</option> <option value="audi" selected>Audi</option> //默认选中值 </optgroup> </select> //文本域 <textarea rows="10" cols="50"> 我是一个文本框。 </textarea> //提交按钮(url在form上配置) <input type="submit" value="提交"> </fieldset> </form>
html //label 元素的使用，点击label元素，等同于点击对应的表单控件 <form action="xxx" method="post"> <label for="ma">Male</label><input type="radio" name="sex" value="male" id="ma"><br> <label for="fe">Female</label><input type="radio" name="sex" value="female" id="fe"> </form>
HTML 框架
html <iframe src="demo_iframe.html" name="iframe_a"></iframe> //定义iframe <p> <a href="https://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a> //target表示链接在iframe框架中打开 </p>
HTML 字符实体
< 等同于 < > 等同于 > © 等同于 ©
HTML URL
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 中是非法的。
- 所以，两者一般一起使用，确保能兼容 新旧 浏览器。
<body> <object width="550" height="400" data="heartbeats.mp3"></object> <embed width="550" height="400" src="heartbeats.mp3"> //合并使用 <object width="550" height="400" src="headerbeats.mp3"> <param name=moive value="myflashmovie.swf"> <param name=quality value="high"> <param name=bgcolor value="#ffffff"> <embed src="heartbeats.mp3"> </object> </body>
Audio：音频文件
- 使用 <audio> 和 <source> 标签来定义音频。
- <audio> 是一个 HTML5 元素，在 HTML4 中是非法的，但在所有浏览器中都有效。
- 一般和 <embed> 一起使用，保证兼容性。
html <audio controls height="100" width="100"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.mp3" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
Videos：视频文件
- 使用 <video> 和 <source> 标签来定义视频。
- <video> 是一个 HTML5 元素，在 HTML4 中是非法的，但在所有浏览器中都有效。
- 一般和 <object> ， <embed> 一起使用，保证兼容性。
html <video width="320" height="240" controls> <source src="moive.mp4" type="video/mp4"> <source src="moive.ogg" type="video/ogg"> <source src="moive.webm" type="video/webm"> <object data="moive.mp4" width="320" height="240" > <embed src="moive.swf" width="320" height="240"> </object> </video>
HTML 拓展阅读
常用代码
//超链接设置 text-decoration:参数 参数取值范围 underline:为文字加下划线 overline:为文字加上划线 line-through:为文字加删除线 blink:使文字闪烁 none:不显示上述任何效果
- 常用标签：见 CSS.md 文档。