1 认识HTML+2深入了解超文本+3构建模块

创建简单的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>元素用于长引用,就是你希望作为一大段文字来强调的内容,比如从书中节选的一部分

posted @ 2019-04-18 09:45  鞋里的一粒沙  阅读(181)  评论(0编辑  收藏  举报