《BOWD：HAC》第2章笔记：HTML基础
《BOWD：HAC》第2章笔记：HTML基础
因为第1章是概述所以就不做笔记了，直接从第2章开始。
HTML语言呈现一种类似回文的结构，通过嵌入代码或格式来表明文本格式。
大部分标记都成对出现，开始标记和结束标记匹配，形成闭包。
元素=开始标记+内容+结束标记
元素的相互“嵌套”：完全嵌套，避免标记不匹配
注意选择编码方式为UTF-8
2.1 标题元素
标题(heading)元素包括六级，放置到body区域而非head区域。
<html lang="en">
<head>
<title>Heading Exampletitle>
<meta charset="utf-8">
head>
<body>
<h1>Heading Level 1h1>
<h2>Heading Level 2h2>
<h3>Heading Level 3h3>
<h4>Heading Level 4h4>
<h5>Heading Level 5h5>
<h6>Heading Level 6h6>
body>
html>
| 结构标记 | 具体描述 |
|---|---|
| … | 标记HTML文档的开始和结束 |
| … | 标记文件头的开始和结束。HTML文档的头部中可以包含脚本、CSS样式表和网页标题等信息。这里指的脚本通常是JavaScript脚本 |
| 标记文件头中的文档标题 | |
| … | 标记文件体部分的开始和结束 |
| 标记文档中的注释部分 |
2.2 段落元素
段落元素组织句子或文本
和
之间的文本将显示成段落，上下各显示空行。p是paragraph的缩写。
<html lang="en">
<head>
<title>Paragraph Exampletitle>
<meta charset="utf-8">
head>
<body>
<h1>Heading Level 1h1>
<p>
This is a sample paragraph.Heading tags can help to make your pages more accessible and unable.
It is good coding practice to use heading tags to outline the structure of your web page content.
p>
<hr>
<h2>Heading Level 2h2>
<h3>Heading Level 3h3>
<h4>Heading Level 4h4>
<h5>Heading Level 5h5>
<h6>Heading Level 6h6>
body>
html>
2.3换行和水平标尺
2.3.1 换行元素
换行元素
使浏览器跳到下一行显示下一个元素或文本，没有开始和结束标志，称为独立或自包容标记。在源代码中换行并不会使浏览器显示换行，要达到这一效果必须在相应位置添加换行标记。br是break的缩写。
2.3.2 水平标尺
水平标尺元素
独立使用，在网页上配置一条水平线，代表内容主题分隔或变化。hr是horizontal rule的缩写。
<html lang="en">
<head>
<title>Paragraph Exampletitle>
<meta charset="utf-8">
head>
<body>
<h1>Heading Level 1h1>
<p>
This is a sample paragraph.<br>
Heading tags can help to make your pages more accessible and unable.
It is good coding practice to use heading tags to outline the structure of your web page content.
p>
<hr>
<h2>Heading Level 2h2>
<h3>Heading Level 3h3>
<h4>Heading Level 4h4>
<h5>Heading Level 5h5>
<h6>Heading Level 6h6>
body>
html>
2.4 块引用元素
标记以特殊方式显示的引文块，即左右两边都缩进，引文块包含在和之间。<html lang="en"> <head> <title>Blockquote Exampletitle> <meta charset="utf-8"> head> <body> <h1>The Power of the Webh1> <p> According to Tim Berners-Lee, the inventor of the World Wide Web, at http://www.w3.org/WAI/: p> <blockquote> The power or the web is in its universality. Access by everyone regardless od disability is an essential aspert. blockquote> body> html>2.5 短语元素
短语元素嵌入其周围的文本中（称为内联显示）指定容器标记之间文本的上下文和含义。
元素 用法 标识文本是缩写，配置title属性（abbreviate） 文本没有额外的重要性，但样式采用加粗字体（bold） 标识文本是引文或者参考，通常倾斜显示（cite） 标识文本是程序代码，通常使用等宽字体（code） 标识文本是词汇或者术语定义，通常倾斜显示（define） 使文本强调或突出于周边的普通文本，通常倾斜显示（emphasize） 文本没有额外重要性，但样式采用倾斜字体（incline） 标识用户要输入的文本，通常用等宽字体显示（keyboard） 文本高亮显示以供参考（mark） 表示是程序的示例输出，通常使用等宽字体（sample） 使文本用小字号显示（small） 使文本强调或突出于周边的普通文本，通常加粗显示（strong） 在基线以下用小文本显示的上标（subscript） 在基线以下用小文本显示的下标（superscript） 标识并显示变量或程序输出，通常倾斜显示（variable） 2.6 有序列表
有序列表通过数字或字母编号来组织列表中包含的信息，以
标记开始，以
标记结束；每个列表项以标记开始， 标记结束。ol是ordered list的缩写，li是list item的缩写。type属性改变列表序号的类型，start属性指定序号的起始值，reversed属性指定降序排序。
值 序号 1 数字（默认） A 大写字母 a 小写字母 Ⅰ 罗马数字 i 小写罗马数字 <html lang="en"> <head> <title>Heading and Listtitle> <meta charset="utf-8"> head> <body> <h1>My Favorite Colorsh1> <ol type="I"> <li>Blueli> <li>Tealli> <li>Redli> ol> body> html>2.7 无序列表
无序列表在列表的每个项目前都加上列表符号，以
开始，
结束，除了没有顺序外，和有序列表没有什么不同。ul是unordered list的缩写。2.8描述列表
描述列表用于组织术语及其定义，术语顶格独占一行，描述另起一行并缩进。
描述列表以
标记开始，
标记结束；每个要描述的术语以标记开始， 标记结束；每项描述内容以标记开始， 标记结束。dl是definition list的缩写，dt是definition term的缩写，dd是definition description的缩写。
2.9 特殊字符
特殊字符不能直接用原本的形式表示，而要通过特定的代码表示，这类字符也被称为实体字符（entity characters）
字符 实体名称 代码 " 引号 "； © 版权符 ©； & &符号 &； 空格 不间断空格 ； ’ 撇号 &rsquo； — 长破折号 &mdash； | 竖线 |； 注：以上代码末尾应是英文分号，因为在markdown里面使用英文分号也会变为对应字符，故此处使用的是中文分号，注意在实际使用中要使用英文分号。
2.10 HTML语法校验
W3C提供免费的标记语言语法校验服务，网址是http://validator.w3.org/。
2.11 结构元素
阐述结构区域的用途，对网页文档进行更好的结构化。
2.11.1 div元素
div元素在网页中创建一个常规结构区域作为块显示元素，以
标记开始，标记结束。div是division的缩写。2.11.2 header元素
header元素的作用是包含网页文档或文档区域的标题，通常包含一个或多个标题元素。header元素以
标记开始， 标记结束。2.11.3 nav元素
nav元素的作用是建立一个导航链接区域，nav元素以标记结束。nav是navigation的缩写。
2.11.4 main元素
main元素的作用是包含网页的主要内容，每个网页只应有一个main元素。main元素以
标记开始， 标记结束。2.11.5 footer元素
footer元素的作用为网页或网页区域创建页脚。footer元素以标记结束。
2.12 练习使用结构元素
Casita Sedona网页：
<html lang="en"> <head> <title>Casita Sedonatitle> <meta charset="utf-8"> head> <body> <header> <h1>Casita Sedona Bed & Breakfasth1> header> <nav> <b> Home Rooms Events Contact b> nav> <main> <h2>Stay in the Heart of Sedonah2> <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.p> <h3>Luxurious Rooms h3> <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, and balcony overlooking the red rocks.p> <div> <strong>Casita Sedona Bed & Breakfaststrong><br> 612 Tortuga Lane<br> Sedona, AZ 86336<br> 928-555-5555<br><br> div> main> <footer> <small><i>Copyright © 2016 Your Name Herei>small> footer> body> html>2.13 锚元素
锚元素（anchor element）的作用是定义超链接，指向想要显示的网页或文件。锚元素以标记开始，标记结束，用href属性配置链接引用，即要访问到的文件的名称和位置。
<html lang="en"> <head> <title>Anchor Exampletitle> <meta charset="utf-8"> head> <body> <a href="http://webdevbasics.net">Basics of Web Design Textbook Companiona> body> html>2.13.1绝对链接
绝对链接指定资源在Web上的绝对位置，这种链接的href值包含协议名称http://和域名。
2.13.2 相对链接
需要链接到自己网站内部的网页时，可以使用相对链接，这种链接的href值不以http://开头，也不包含域名，只包含想要显示的网页文件名（或者文件夹和文件名的组合）。
2.13.3 block anchor
block anchor能将一个或多个元素（包括作为块显示的元素）配置成链接。
2.14 练习使用链接
站点地图（部分）：
<html lang="en"> <head> <title>Trillium Media Designtitle> <meta charset="utf-8"> head> <body> <header> <h1>Trillium Media Designh1> header> <nav> <b> <a href="index.html">Homea> <a href="services.html">Servicesa> <a href="contact.html">Contacta> b> nav> <main> <h2>New Media and Web Designh2> <p>Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services.p> <h2>Meeting Your Business Needsh2> <p>Our expert designers are creative and eager to work with you.p> main> <footer> <small><i>Copyright © 2016 Your Name Herei>small> footer> body> html>2.15 电子邮件链接
锚标记也可用于创建电子邮件链接。电子邮件链接会自动打开浏览器设置的默认邮件程序，它与外部超链接相似但有两点不同：
- 它使用mailto:,而不是http://
- 它打开浏览器配置的默认邮件程序，将E-mail地址作为收件人
<html lang="en"> <head> <title>Trillium Media Design - Contacttitle> <meta charset="utf-8"> head> <body> <header> <h1>Trillium Media Designh1> header> <nav> <b> <a href="index.html">Homea> <a href="services.html">Servicesa> <a href="contact.html">Contacta> b> nav> <main> <h2>Contact Trillium Media Design Todayh2> <ul> <li>E-mail: <a href="mailto:[email protected]">[email protected]a>li> <li>Phone: 555-555-5555li> ul> main> <footer> <small><i>Copyright © 2016 Your Name Herei>small> footer> body> html>