当前位置： 移动技术网 > IT编程>网页制作>CSS > HeadFirst HTML&CSS

HeadFirst HTML&CSS

2018年04月23日  | 移动技术网IT编程  | 我要评论

CH1 认识HTML

 

  •  HTML和CSS是我们用来创建网页的语言：
    HTML是超文本标记语言（HyperText Markup Language）的缩写，用来建立网页的结构；
    CSS是层叠样式表（Cascading Style Sheet）的缩写，用来控制HTML的表现。
  • Web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面，并根据HTML和CSS显示网页的内容。
  • 所有页面都要有一个<html>元素，其中要有一个<head>元素和一个<body>元素：
    网页的信息放在<head>元素里；<body>元素里的内容就是你将在浏览器里看到的东西。
  • 可以在<style>元素中写CSS规则，为HTML网页增加CSS。<style>元素总要放在<head>元素里。
    可以在<style>中添加type属性；可以使用CSS在HTML中指定元素的特性。 
     1             <style type="text/css">
 2             body{
 3                 background-color:#d2b48c;
 4                 margin-left:20%;
 5                 margin-right:20%;
 6                 border:2px dotted black;
 7                 padding:10px 10px 10px 10px;
 8                 font-family:sans-serif;
 9                 }
10         </style>

     

CH2 深入了解超文本

 

  • 相对路径是相对于链接的源Web页面指向网站中其他文件的一个链接。
    使用“..”可以链接到源文件上一层文件夹中的一个文件。
    1 <a href ="../../../beverages/elixir.html" >
2     elixir
3 </a>
  • 为网站选择的文件名和文件夹名中不要使用空格！
  • ★★★☆☆最好在构建网站初期组织网站文件，这样就不用在网站升级时修改一大堆的路径了:)

     

CH3 构建模块

  • 开始输入内容之前要规划好Web页面的结构。规划页面时，首先设计大的块（block）元素，然后用内联（inline）元素完善。
    ！记住！要尽可能使用元素来高速浏览器你的内容的含义。一定要使用与内容含义最接近的元素。
  • 块（block）元素与内联（inline）元素：块元素通常用作Web页面中的主要构建模块，而内联元素往往用来标记小段内容。
    ！<a>既可以是内联元素，也可以是块元素；<br>是块元素和内联元素之间的一个模糊地段。
  • 要对HTML内容中的特殊字符使用字符实体。较常用的特殊字符主要有：
    “<”字符的缩写为“&lt;”（lt，less-than）；
    “>”字符的缩写为“&gt;”（gt，greater-than）；
    “&”字符的缩写为“&amp;”（amp，ampersand）；
    ……
    （实体名与实体编号等价，更多实体清单可在w3school网站上搜索）
  • <q>元素与<blockquote>元素：<q>元素是内联元素，用于短引用；<blockquote>元素是块元素，用于长引用。
  • HTML列表构建。 
     1         <!--有序列表
 2         ol = ordered list
 3         li = list item -->
 4         <ol>
 5           <li>Walla Walla, WA</li> 
 6           <li>Magic City, ID</li> 
 7           <li>Bountiful, UT</li>
 8           <li>Last Chance, CO</li>
 9           <li>Truth or Consequences, NM</li>
10           <li>Why, AZ</li> 
11         </ol>
12         
13         <!--无序列表
14         ul = unordered list
15         li = list item -->
16         <ul>
17           <li>cellphone</li> 
18           <li>iPod</li>
19           <li>digital camera</li>
20           <li>and a protein bar</li>
21         </ul>
22 
23         <!--自定义列表
24         dl = defined list
25         dt = defined title 
26         dd = defined data -->
27         <dl>
28             <dt>BSS</dt>
29             <dd>road signs common in the ...</dd>
30             <dt>2df</dt>
31             <dd>&#208;&epsilon;&tau;&#114;&ouml;&igrave;&tau;</dd>
32         </dl> 
  • 本章提及的其他元素：
    <code>元素：显示计算机程序代码；
    <em>元素：标记想用不同方式展示的文本；
    <time>元素：告诉浏览器这个内容是一个日期或时间，或者同事包含日期和时间；
    <strong>元素：标记你希望特别强调的文本；
    <pre>元素：希望浏览器按你输入的方式原样显示文本时；
    ……

 

CH4 连接起来

  •  ！！！域名≠网站名！！！
    域名（domain）是一个唯一的名字，用来唯一标识网站。
    例如，“www.headfirst.com”是一个网站名，其中“headfirst.com”是域名，“www”是域中的一个特定服务器的名字。
    so，还可以创建使用相同域名的其他网站，比如“corporate.headfirst.com”、“book.headfirst.com”、“OReilly.headfirst.com”等。
  • FTP（文件传输协议，File transfer protocol）是向服务器传输web页面和内容的常用方法。
  • URL（Uniform Resource Locators，统一资源定位符）【或web地址】，可以用来标识web上的任何资源。
    典型的URL由一个协议、一个网站名和资源的一个绝对地址组成。

    1. 协议：通常包括HTTP协议、file协议、FTP协议、mail协议等。
      HTTP（HyperText Transfer Protocol，超文本传输协议）是一个请求和响应协议，用来在web服务器和浏览器之间传送web页面；
      浏览器使用file协议从本地计算机读取页面。！file协议的URL有3个斜线：file:///document/（可以理解为，如果删去一个HTTP URL中的网站名，那么也会有3个斜线。）
    2. 绝对路径是从根文件夹到一个文件的路径。根文件夹通常用网站名后的第一个“/”表示。
      如果指定一个目录而没有没有制定文件名，则web服务器会查找一个默认页面（或default.htm）返回到浏览器。

    总的说来，利用URL，可以请求浏览器从Web获取一个页面（或者其他类型的资源）。协议部分告诉浏览器应当使用什么方法来获取资源；网站部分（由服务器名和域名组成）告诉浏览器要从互联网上的哪个计算机获取资源。最后绝对路径会告诉服务器我们要找哪个页面。
  • 绝对路径与相对路径：相对路径只用来链接同一网站内的页面，而URL通常用来链接其他网站。
  • 关于<a>元素

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网