欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HeadFirst HTML&CSS

程序员文章站 2022-06-27 15:57:25
CH1 认识HTML HTML和CSS是我们用来创建网页的语言：HTML是超文本标记语言（HyperText Markup Language）的缩写，用来建立网页的结构；CSS是层叠样式表（Cascading Style Sheet）的缩写，用来控制HTML的表现。 Web服务器存储并提供由HTML ......

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/index.html（可以理解为，如果删去一个HTTP URL中的网站名，那么也会有3个斜线。）
    2. 绝对路径是从根文件夹到一个文件的路径。根文件夹通常用网站名后的第一个“/”表示。
      如果指定一个目录而没有没有制定文件名，则web服务器会查找一个默认页面（index.html或default.htm）返回到浏览器。

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

 

上一篇： iPhone如何将拟我表情发送给微信好友

下一篇： js利用正则替换图片路径问题

推荐阅读