创建简单的HTML页面代码:
<!--此内容为页面注释内容,会被浏览器忽略,浏览器通常显示的标题一共有6级:h1-h6,字体由大到小,除非你要建立一个庞大的文档,否则不会用到h3以后标题,代码写完后保存为.html格式-->
<html>————————————————————告诉浏览器HTML从这里开始
<head>———————————————————页面“head”开始
<title>网页标题</title>————————————为页面指定一个标题
<style type="text/css">————————————CSS开始,标记属性为type,能告诉浏览器你在使用什么类型的样式,“text/css”为指定的类型
body{
background-color: #d2b48c;——————设置背景颜色为土黄色
margin-left: 20%;———————————设置左外边距占页面的20%
margin-right: 20%;——————————设置右外边距占页面的20%
border: 2px dotted black;———————定义页面主体周围的边框是虚线,颜色为黑色
padding: 10px 10px 10px 10px;————在页面主体周围创建一些内边距
font-family: sans-serif;————————定义文本使用的字体
}
<style/>———————————————————CSS结束
</head>———————————————————head结束
<body>———————————————————页面主体“body”开始
<h1>一级标题</h1>—————————————告诉浏览器这是一个标题
<img src="链接图片">————————————在这里放置图像
<p>————————————————————开始一个段落
段落起<em>着重显示内容</em>段落止————强调“着重显示内容”
</p>———————————————————段落结束
<h2>二级标题</h2> ————————————告诉浏览器这是一个子标题
<p>———————————————————开始另一段落
段落<q>短引用</q>———————————短引用一般会在浏览器显示时加“”双引号
</p>——————————————————段落结束
<blockquote>——————————————长引用元素开始
长引用内容
</blockquote>—————————————长引用元素结束
<p>———————————————————开始另一段落
<a href="../1.html">点我</a>———单击“点我”浏览器会在上一层文件夹中找到1.html文件链接
</p>———————————————————段落结束
</body>——————————————————页面主体结束
</html>——————————————————告诉浏览器HTML在这里结束
认识HTML—小结1:
*HTML和CSS是我们用来创建网页的语言。
*Web服务器储存并提供由HTML和CSS创建的网页。浏览器获取页面,并根据HTML和CSS显示网页的内容。
*HTML是超文本标记语言(HypeText Markup Language)的缩写,用来建立网页的结构。
*CSS是层叠样式表(Cascading Style Sheets)的缩写,用来控制HTML的表现。
*通过HTML,我们利用标记来标示内容提供结构。我们把匹配标记以及它们包围的内容成为元素。
*元素由3个部分组成:一个开始标记、内容和一个结束标记。不过有些元素(比如<img>)有所例外。
*开始标记可以有属性。例如属性:type。
*结束标记在尖括号后面、标记名前面有一个“/”,以明确这是结束标记。
*所有页面都要有一个<html>元素,其中要有一个<head>元素和<body>元素。
*网页的信息防灾<head>元素里。
*大多数空白符(制表符、回车、空格)都会被浏览器忽略,不过可以利用空白符让你的HTML(对你)更有可读性。
*可以在<style>元素中写CSS元素规则,为HTML网页增加CSS。<style>元素总要放在<head>元素里。
*可以试用CSS和HTML中指定元素的特性。
深入了解超文本—小结2:
*想从一个页面链接到另一个页面时,要试用<a>元素。
*<a>元素的href属性指定了链接的目标文件。
*<a>元素的内容是链接的标签。这个标签就是你在网页上看到的链接文本。默认地,这个标签会有下划线,只是这是可以单击的。
*文字或图像都可以用作链接的标签。
*单击一个链接时,浏览器啊会加载href属性中指定的web页面。
*可以链接到相同文件夹中的文件,也可以链接到其他文件夹中的文件。
*相对路径是相对于链接的源web页面指向网站中其他文件的一个链接。就像在地图上一样,终点总是相对于起点。
*使用“../”可以链接到源文件上的一层文件夹中的一个文件。
*“..”表示父文件夹。
*记住要用“/”(斜线)字符分隔路径中的各个部分。
*指向一个图像的路径不正确时,会在web页面上看到一个损坏的图像。
*为网站选择的文件名和文件名中不要使用空格。
*最好在构建网站初期组织网站文件,这样就不用在网站升级时修改一大堆的路径了。
*组织网站有很多方法,具体如何组织由你决定。
*属性的写法都是一样的:首先写属性名,后面是一个等于号,然后是用双引号括起来的属性值。
例:<a href(属性名)="top10.html(属性值)">可单击内容</a>
构建模块—小结3
*开始输入内容之前要规划号Web页面的结构。首先画出一个草图,然后创建一个略图,最后再写出HTML。
*规划页面时,首先设计大的块元素,然后用内联元素完善。
*记住,要尽可能试用元素来告诉浏览器你的内容的含义。
*一定要试用与内容含义最接近的元素。例如,如果需要一个列表,就不要试用段落元素。
*<p>、<blockquote>、<ol>、<ul>、<li>都是块元素。它们单独显示,在内容前后分别有一个换行(默认地)。
*<q>和<em>是内联元素。这些元素中的内容与其包含元素的其余内容放在一起。
*需要插入你的自己的换行时,可以试用<br>元素。
*<br>是一个“void”元素。
*void元素没有内容。
*void元素只有一个标记组成。
*“空”元素没有内容。不过它有开始和结束标记。
*嵌套元素是指完全包含在另一个元素中元素。如果元素能正确地嵌套,所有标记都能正确匹配。
*要结合两个元素简历一个HTML列表:试用<ol>和<li>建立有序列表,使用<ul>和<li>可以简历一个无序列表。
*浏览器显示一个有序列表时,它会为列表创建序号,所以无需你费心。
*可以在列表中建立嵌套列表,将<ol>和<ul>元素放在<li>元素中。
*要对HTML内容中的特殊字符使用字符实体。在www.w3cschools.com中查看字符实体。
元素大杂烩
*只要需要建立链接,就要需要<a>元素
*使用<q>元素提供短引用
*段落使用<p>元素
*<code>元素用来显示计算机程序代码
*使用<em>元素来标记你想用不同方式展示的文本
*这个<time>元素告诉浏览器这个内容是一个日期或者时间,或者同时包含日期或时间
*用<ul>元素显示一个列表
*用<ol>元素显示一个有序列表
*用<li>元素显示对应列表中的列表项
*用<strong>元素来标记你希望特别强调的文本
*用<per>元素来指定文本的格式,希望浏览器按你输入的方式原样显示文本
*<br>这是一个空元素,用来提供换行
*<img>元素用来在页面中包含一个图像
*<blockquote>元素用于长引用,就是你希望作为一大段文字来强调的内容,比如从书中节选的一部分