1.HTML小结
程序员文章站
2022-04-18 13:19:58
HTML 基本文档 html文件声明。 charset="UTF-8"文档编码声明。 定义关于HTML文档的元数据，会被浏览器解析,主要有三类属性，name，content，http-equiv。 基本标签（Basic Tags） 文本格式化（Format ......
html 基本文档
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 可见文本... </body> </html>
- <!doctype html>html文件声明。
- charset="utf-8"文档编码声明。
- <meta/>定义关于html文档的元数据，会被浏览器解析,主要有三类属性，name，content，http-equiv。
基本标签（basic tags）
<h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6> <p>这是一个段落。</p> <br> （换行） <hr> （水平线） <!-- 这是注释 -->
文本格式化（formatting）
<b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr> （缩写） <address> （联系信息） <bdo> （文字方向） <blockquote> （从另一个源引用的部分） <cite> （工作的名称） <del> （删除的文本） <ins> （插入的文本） <sub> （下标文本） <sup> （上标文本）
链接（links）
普通的链接：<a href="http://www.example.com/">链接文本</a> 图像链接： <a href="http://www.example.com/"><img src="url" alt="替换文本"></a> 邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a> 书签： <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>
- <a>标签的target属性设置为跳转方式，target="_blank"表示为空白窗口打开。
图片（images）
<img src="url" alt="替换文本" height="42" width="42">
- alt属性当图片无法加载时，图片文本将会显示。
样式/区块（styles/sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表&有序列表
<!--无序列表-->
<ul>
<li>项目</li>
<li>项目</li>
</ul>
<!--有序列表-->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
自定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格（tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
- <table>标签定义表格，border属性为显示网格线。
- <tr>标签分割每行，<td>标签分割每列，<th>表示表头。
- 跨行属性设置rowspan=“2”，跨列属性设置colspan=“2”。
框架（iframe）
<iframe src="demo_iframe.htm"></iframe>
表单（forms）
<form action="demo_form.php" method="post/get"> <input type="text" name="email" size="40" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="send"> <input type="reset"> <input type="hidden"> <select> <option>苹果</option> <option selected="selected">香蕉</option> <option>樱桃</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form>
- <form>标签包含表单元素，action表示跳转目标链接，method为表单提交方式。
- <input>标签中，type属性内容：text为文本，radio为单选按钮，checkbox为多选按钮，password为加密文本，submit为提交按钮。
- <select>标签为翻页选择框。
实体（entities）
< 等同于 < >； 等同于 > © 等同于 ©