前端手册(part1)HTML
1.1 什么是HTML(·-·??)
- HTML是来描述网页的一种语言,不是编程语言,是一种超文本标记语言.
- 标记语言是一套标记标签,来描述网页.
- HTML文档包含了HTML标签及文本内容,也叫web页面.
1.1.1HTML标记标签:
- 由尖括号包围且成对出现,例: < p > < / p > <p> </p> <p></p>
- 标签对是开始与结束标签也称开放与闭合标签.
1.1.2HTML元素:
严格来讲, 一个 HTML 元素包含了开始标签与结束标签,例: < p > 这是一个段落 < / p > <p>这是一个段落</p> <p>这是一个段落</p>
1.1.3HTML网页结构
<html >
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
1.1.4通用声明
HTML 5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.2 HTML元素
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<p> | 这是一个段落 | </p> |
<a href="default.htm"> | 这是一个链接 | </a> |
<br> | 换行 |
1.2.1
- 某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭
- 大多数 HTML 元素可拥有属性
- HTML 文档由嵌套的 HTML 元素构成。
1.3 HTML属性
1.3.1
- HTML 元素可以设置属性,属性可以在元素中添加附加信息一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
- 属性值应该始终被包括在引号内。
例:
<a href="http://www.nowcoder.com">这是一个链接</a>//这里链接的地址在 href 属性中指定
这里有几个常见HTML元素属性
class :为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id : 定义元素的唯一id
style : 规定元素的行内样式(inline style)
title : 描述了元素的额外信息 (作为工具条使用)
建议 查索HTML标签参考手册
1.4 HTML标题
标题通过<h1> - <h6>
标签进行定义。
例:
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>//字号依次减小
1.4.1 HTML水平线,用于分隔内容<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<hr>
:显示如下
1.4.2 HTML 注释<!-- -->
<!-- 这是一个注释 -->
1.5 HTML 段落
<p>这是一个段落</p>
1.5.1 HTML折行<br>
1.6 HTML 文本格式化
1.61 文本格式化标签
定义粗体文本 <b>
定义着重文字 <em>
定义斜体字 <i>
定义小号字 <small>
定义加重语气 <strong>
定义下标字 <sub>
定义上标字 <sup>
定义插入字 <ins>
定义删除字 <del>
1.7 HTML 链接
HTML使用标签<a>
来设置超文本链接。
<a href="url">链接文本</a>//href 属性描述了链接的目标。
链接-target属性
<a href="https://www.nowcoder.com/" target="_blank" rel="noopener noreferrer">访问牛客教程!</a>
链接-id属性
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
1.8 HTML 头部
<title>
- 定义了HTML文档,浏览器工具栏的标题,显示在搜索引擎结果页面的标题
<base>
- 定义了所有链接的URL,该标签作为HTML文档中所有的链接标签的默认链接
<link>
- 定义了文档与外部资源之间的关系,通常用于链接到样式表
<style>
- 定义了HTML文档的样式文件引用地址,可以直接添加样式来渲染 HTML 文档
<meta>
- 提供了HTML文档的meta标记,提供了元数据.元数据也不显示在页面上,但会被浏览器解析
<script>
- 用于加载脚本文件
<head>
- 元素包含了所有的头部标签元素。在 元素中可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
1.9 HTML 样式-CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
- 内联样式 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落。
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>//background-color定义一个元素背景颜色
字体,字体颜色,字体大小
现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用 标签。
<h1 style="font-family:verdana;">一个标题</h1>
文本对齐
text-align(文字对齐)属性指定文本的水平与垂直对齐方式
<h1 style="text-align:center;">居中对齐的标题</h1>
- 内部样式表 在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>
1.10 HTML 图像-表格-列表
图像
<img>
标签定义 HTML 页面中的图像,<img>
标签有两个必需的属性:src和alt。
<img border="0" src="x.png" alt="Pulpit rock" width="304" height="228">
src ->指 “source”。源属性的值是图像的 URL 地址
alt ->属性用来为图像定义一串预备的可替换的文本。
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
表格
通过 <table>
标签来定义表格
<table>
定义表格
<th>
定义表格的表头
<tr>
定义表格的行
<td>
定义表格单元
<caption>
定义表格标题
<colgroup>
定义表格列的组
<col>
定义用于表格列的属性
<thead>
定义表格的页眉
<tbody>
定义表格的主体
<tfoot>
定义表格的页脚
表格边框属性(border
)
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格展示如下:
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
列表
有序列表<ol>
,每个列表项<li>
无序列表<ul>
,每个列表项<li>
自定义列表<dl>
,每个自定义列表项<dt>
,每个自定义列表项的定义 <dd>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
显示效果如下:
- Coffee
- Milk
- Coffee
- Milk
-
Coffee
- - black hot drink Milk
- - white cold drink
1.11 HTML 区块-布局-表单-框架
区块
大多数 HTML 元素被定义为块级元素或内联元素,
块级元素在浏览器显示时,通常会以新行来开始(和结束)。 实例:<h1>, <p>, <ul>, <table>
。
内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>
。
HTML 可以通过 <div>
块级元素和 <span>
内联元素将元素组合起来。
布局
- 使用
元素:
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu"
style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content"
style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里
</div>
<div id="footer"
style="background-color:#FFA500;clear:both;text-align:center;">
版权 © nowcoder.com
</div>
</div>
上面的 HTML 代码会产生如下结果:
主要的网页标题
- 使用表格
<table>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
内容在这里
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © nowcoder.com
</td>
</tr>
</table>
上面的 HTML 代码会产生以下结果:
主要的网页标题 | |
菜单 HTML CSS JavaScript | 内容在这里 |
版权 © nowcoder.com |
表单
表单标签<form>
,输入标签(<input>
),文本框通过 <input type="text">
标签来设定
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
显示如下:
First name:Last name:
密码字段通过标签<input type="password">
来定义,密码字段字符以星号或圆点替代。<input type="radio">
标签定义了表单单选框选项,<input type="checkbox">
定义了复选框,<input type="submit">
定义了提交按钮.
<form name="input" action="http://www.nowcoder.com" method="get">
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value="male"> Male <br>
<input type="radio" name="sex" value="female"> Female
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
框架
<iframe src="URL"></iframe>
width 和 height 属性用来定义iframe标签的高度与宽度。
<iframe src="x.html" width="200" height="200"></iframe>
移除边框
<iframe src="x.html" frameborder="0"></iframe>//设置属性值为 "0" 移除iframe的边框
使用iframe来显示目标链接页面,目标链接的属性必须使用iframe的属性
<iframe src="x.html" name="iframe_a"></iframe>
<p><a href="http://www.nowcoder.com" target="iframe_a">NOWCODER.COM</a></p>
1.12 HTML 颜色-颜色名-颜色值
颜色十六进制 颜色RGB(Color RGB)
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
1.13 HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
<script>
标签用于定义客户端脚本,比如 JavaScript。
<script>
document.write("Hello World!");
</script>
<noscript>
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
<script>
document.write("Hello World!")
</script>
<noscript>
抱歉,你的浏览器不支持 JavaScript!
</noscript>
JavaScript可以直接在HTML输出
document.write("<p>这是一个段落。</p>");
1.14 HTML 字符实体
正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体
类似这样:
&entity_name;
&#entity_number;
如需显示小于号,我们必须这样写:<
或 <
; 或 <
;
如需在页面中增加空格的数量,您需要使用  
; 字符实体。
HTML的实体可参考牛客网站上的实体手册
访问牛客实体手册
1.15什么是 XHTML?
XHTML 是更严格更纯净的 HTML 版本,以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准,得到所有主流浏览器的支持
与 HTML 相比:
- (文档结构)
XHTML DOCTYPE 是强制性的
<html>
中的XML namespace
属性是强制性的
<html>
、<head>
、<title>
以及<body>
也是强制性的 - (元素语法)
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素 - (属性语法)
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的