【KOS学习】HTML
鲁龙野
一、什么是HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言(markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
二、基本结构
<!DOCTYPE html>
<html>
<head>
<title>这是一个网页</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>
三、HTML 元素
HTML 元素指的是从开始标签到结束标签的所有代码。
1、HTML 元素的语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
2、嵌套的 HTML 元素
<html>
<body>
<p>我的第一个段落</p>
</body>
</html>
<!--
上面的例子包含了三个 HTML 元素。
<p> 元素：
<p> 元素中定义了 HTML 文档中的一个段落
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>
元素内容是：我的第一个段落
<body> 元素：
<body> 元素定义了 HTML 文档的主体
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>
元素内容是另一个 HTML 元素（<p> 元素）
<html> 元素：
<html> 元素定义了整个 HTML 文档
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>
元素内容是另一个 HTML 元素（<body> 元素）
-->
四、HTML 属性
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称/值对的形式出现，比如：name=“value”。
- 属性总是在 HTML 元素的开始标签中规定。
| 属性 | 描述 |
|---|---|
| class | 规定元素的一个或多个类名 |
| id | 规定元素的唯一 id |
| style | 规定元素的行内 CSS 样式 |
| title | 规定元素的额外信息 |
| accesskey | 规定激活元素的快捷键 |
| contenteditable | 规定元素内容是否可编辑 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示 |
| data-* | 用于存储页面或应用程序的私有定制数据 |
| dir | 规定元素中内容的文本方向 |
| draggable | 规定元素是否可拖动 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接 |
| hidden | 规定元素仍未或不再相关 |
| lang | 规定元素内容的语言 |
| spellcheck | 规定是否对元素进行拼写和语法检查 |
| tabindex | 规定元素的 tab 键次序 |
| translate | 规定是否应该翻译元素内容 |
五、HTML 标签
1、HTML 注释
1）<!–…-->
定义注释
2、HTML 文档类型
1）<!DOCTYPE>
定义文档类型
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于<html>标签之前
- <!DOCTYPE> 声明没有结束标签
- <!DOCTYPE> 声明对大小写不敏感
3、HTML 文档
1）<html>
定义 HTML 文档
- <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
- 文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
4、HTML 头部
1）<head>
定义关于文档的信息
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head>
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等 - 下面这些标签可用在 head 部分：<base>, <link>, <meta>,
<script>, <style>, 以及 <title> - <title> 定义文档的标题，它是 head 部分中唯一必需的元素。
2）<title>
定义文档的标题
3）<link>
定义文档与外部资源的关系
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 被链接文档的位置 |
| rel | alternate author help icon licence next pingback prefetch prev search sidebar stylesheet tag | 当前文档与被链接文档之间的关系 |
| type | MIME_type | 规定被链接文档的 MIME 类型 |
4）<meta>
定义关于 HTML 文档的元信息
<meta charset="UTF-8">
<meta name="description" content="用来做示例的html文件">
- <meta> 标签没有结束标签
| 属性 | 值 | 描述 |
|---|---|---|
| charset | 定义编码格式 | |
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
| name | author description keywords generator revised others | 把 content 属性关联到一个名称 |
5）<script>
定义客户端脚本（ js代码）
<script src="js/panel/base_panel.js"></script>
<script>
function clicked(){
alert('click button');
}
</script>
| 属性 | 值 | 描述 |
|---|---|---|
| type | MIME-type | 指示脚本的 MIME 类型 |
| src | URL | 规定外部脚本文件的 URL |
6）<style>
定义文档的样式信息（css代码）
- type 属性是必需的。唯一可能的值是 “text/css”。
<style type="text/css">
p {font-size:20px}
</style>
| 属性 | 值 | 描述 |
|---|---|---|
| type | text/css | 规定样式表的 MIME 类型 |
5、HTML body
1）<body>
定义文档的主体（标签之间的文本是可见的页面内容）
6、HTML 标题
1）<h1> to <h6>
定义 HTML 标题
- <h1> - <h6> 标签可定义标题。
- <h1> 定义最大的标题。<h6> 定义最小的标题。
7、HTML 段落
1）<p>
定义段落
8、HTML 文本格式化
1）<b>
定义粗体字
2）<strong>
定义强调文本
3）<i>
定义斜体字
4）<em>
定义强调文本
9、HTML 换行
1）<br/>
定义换行
10、HTML 链接
1）<a>
定义链接
<a href="http://baidu.com">go to baidu</a>
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定链接指向的页面的 URL |
| target | _blank _parent _self _top framename | 规定在何处打开链接文档 |
11、HTML 图像
1）<img>
定义图像
<img src="cherry.jpg" width="200" height="200" title="I have an apple" alt="cherry" />
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 规定显示图像的 URL |
| alt | text | 规定图像的替代文本（图片没有时出现） |
| height | pixels % | 定义图像的高度 |
| width | pixels % | 设置图像的宽度 |
| title | text | 设置图像的title（光标在图像上时出现） |
12、HTML 媒体
1）<audio>
定义音频
<audio src="music.mp3" controls="controls">your brower does not support video</audio>
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 要播放的音频的 URL |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮等 |
2）<video>
定义视频
<video src="video.mp4" width="320" height="240"> your brower does not support video</video>
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 要播放的视频的 URL |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮等 |
13、HTML 表单
1）<input>
定义输入控件
User name:<input type="text" name="username">
Password:<input type="password" name="psw"><br>
<input type="checkbox" name="one" value="one">one<br>
<input type="checkbox" name="two" value="two">two<br>
<input type="checkbox" name="three" value="three">three<br>
<input type="radio" name="sex" value="male" id="male"checked><label for="male">Male</label><br>
<input type="radio" name="sex" value="female" id="famale"><label for="female">Female</label>
| 属性 | 值 | 描述 |
|---|---|---|
| type | button checkbox file hidden image password radio reset submit text | 规定 input 元素的类型 |
| value | value | 规定 input 元素的值 |
| name | field_name | 定义 input 元素的名称 |
2）<select>
定义选择列表（下拉列表）
- <select> 元素中的 <option> 标签用于定义列表中的可用选项。
<select name="cars">
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
3）<button>
定义按钮 (push button)
<button type="button">Click Me!</button>
| 属性 | 值 | 描述 |
|---|---|---|
| type | button reset submit | 规定按钮的类型 |
4）<textarea>
定义多行的文本输入控件
<textarea name="message" rows="10" cols="30"></textarea>
| 属性 | 值 | 描述 |
|---|---|---|
| rows | number | 规定文本区内的可见行数 |
| cols | number | 规定文本区内的可见宽度 |
14、HTML 表格
1）<table>
定义表格
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
| 属性 | 值 | 描述 |
|---|---|---|
| border | pixels | 规定表格边框的宽度 |
表格标签：
| 表格标签 | 描述 |
|---|---|
| <tr> | 定义表格的行 |
| <th> | 定义表格的表头 |
| <td> | 定义表格单元 |
15、HTML 列表
1）<ol>
定义有序列表（默认为数字）
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="5">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
| 属性 | 值 | 描述 |
|---|---|---|
| start | number | 规定有序列表的起始值 |
| type | 1 A a I i | 规定在列表中使用的标记类型 |
| reversed | reversed | 规定列表顺序为降序 |
2）<ul>
定义无序列表（默认黑色实心圆）
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
16、HTML 内联框架
定义用于在网页内显示网页
1）<iframe>
<iframe src="http://baidu.com" name="iframe" height="400px" width="600px" scrolling="yes" frameborder="1"></iframe>
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 规定在 iframe 中显示的文档的 URL |
| name | frame_name | 规定 iframe 的名称 |
| height | pixels % | 定义 iframe 的高度 |
| width | pixels % | 设置 iframe 的宽度 |
| scrolling | yes no auto | 规定是否在 iframe 中显示滚动条 |
| frameborder | 1 0 | 规定是否显示框架周围的边框 |
17、HTML 样式
style 属性用于改变 HTML 元素的样式。
| 属性 | 值 |
|---|---|
| background-color | 为元素定义背景颜色 |
| font-family | 定义元素中文本的字体系列 |
| color | 定义元素中文本的颜色 |
| font-size | 定义元素中文本的字体尺寸 |
| text-align | 规定了元素中文本的水平对齐方式 |
1）HTML 样式实例 - 背景颜色
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
2）HTML 样式实例 - 字体、颜色和尺寸
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
3）HTML 样式实例 - 文本对齐
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
类似资料：