zoukankan      html  css  js  c++  java
  • Head First HTML笔记

    标记、元素、链接、路径

    01.HTML和CSS是用来创建网页的语言。

    02.Web服务器存储并提供由HTML和CSS创建的网页。浏览器接收网页并基于HTML和CSS 显示其中的内容。

    03.HTML是超文本标记语言(HyperText Markup Language)的缩写,用来结构化网页。

    04.CSS是级联样式表(Cascading Style Sheet)的缩写,用来控制HTML的外观。

    05.我们使用HTML来标记内容,用标记提供结构。我们称匹配标记和他们之间的内容为元素。

    06.一个元素由以下三个部分组成:一个开始标记、内容和一个结束标记。有些元素是例外<img>。

    07.开始标记可以拥有属性。我们看过一对了:type和align。

    08.结束标记的左尖括号之后,标记名之前有一个“/”,用来区别于开始标记。

    09.网页通常应该有一个<html>元素,并伴随有一个<head>元素和一个<body>元素。

    10.网页的信息来源于<head>元素。

    11.写进<body>元素的内容就是在浏览器中所能看见的东西。

    12.浏览器忽略大多数的空白(制表符、回车、空格),但是可以用他们让你的HTML更具有可读性。

    13.通过在<style>元素中输入CSS规则,给HTML网页添加CSS。<style>元素通常嵌在<head>元素中。

    14.在HTML中用CSS指定每个元素的样式特性。

    一直以来,对元素、属性的概念都比较模糊,因为从来没有从基础着手仔细的区分过。

    在head first中,作者提到:属性是用来指定元素的附件信息的,由属性名、等号和双引号括起来的属性值组成。而元素,是由开始标记、内容和结束标记一起组成。

    属性示例:

    <style type="text/css">/*type属性指定使用的样式语言种类,此例中是css*/
    <a href="index.html">/*href属性指定超文本链接的目的地为:index.html*/
    <img src="bg.gif">/*src属性指定img标记显示的图片文件*/ 

     元素示例:

    <car make="bmw" model="mini cooper" convertible="no">my red mini</car>
    假设这是一个元素,元素的内容给出的信息只是“my red mini”
    其中的make model convertible对“my red mini”进行了属性的描述
    告知用户my red mini的一些特性

    那么元素的属性是否也是任意的呢?答案是否定的。

    我们知道世间万物都有属于他自己并且有意义的特性,所以在HTML的元素中,属性也是特定的,属性用于个性化元素。只有某些属性才能运用到特定的元素中。

    链接路径与图片路径:

    edit

    要点:

    01.当你需要从一个网页链接到另一个网页时,使用<a>元素。

    02.<a>元素中的href属性说明了链接的目的地。

    03.<a>元素中的内容是链接的标签。标签显示在网页上。默认情况下,他会加下划线来说明是可以单击的。

    04.链接的标签可以是文字也可以是图像。

    05.当你点击链接时,浏览器装载href中指定的网页。

    06.可以链接相同文件夹下的文件,也可以是不同文件夹下的。

    07.相对路径是指向网站中的其他文件的链接,跟链接的源文件有关。就像地图一样,与终点和起点有关。

    08.使用“..”来链接父目录中的文件。

    09.".."代表父目录。

    10.记得用“/”(斜杠)符号分隔路径的各个部分。

    11.当图片的路径有误时,你会在网页上看到损坏的图像。

    12.网站中的文件名或文件夹名中不能出现空格。

    13.最好在构建的早期组织好你的网站,这样当网站升级时就不用更改一堆路径了。

    14.组织网站的方法有很多,怎么做取决于你。

    短引用<q>元素与块引用<blockquote>元素:

    <blockquote>元素是块(block)元素,而<q>元素是内联(inline)元素;块元素前后都有换行符,而内联元素总是在网页中随着文字流出现在“行内”。

    {h、p、blockquote都属于块元素,他们都独立显示,并且前后都有换行;q、em、a等元素都属于内联元素,只显示在段落的文字流中。即块元素特立独行,内联元素随波逐流。}

    <q>用于段落中少量文字引用;<blockquote>用于引用一段或更多文字的情况。

    每引用一段文字,都需要用一个<blockquote>包围;

    在引用过程中,<q>可以放在<blockquote>中使用,但是<blockquote>放在<q>里面,没有任何意义;

    空元素<br>

    元素分为一般元素与空元素。

    <br>元素是一个没有任何内容的元素,用于文本换行。

    当一个元素没有任何内容的时候,通常使用缩写形式:<开始标记>,这样不仅减少了HTML标记的数量,并且使页面内容更简洁。

     

    列表元素<li><ol><ul>

    li:list item;

    ol:order list;

    ul:unorder list

    列表是一组项目,使用过程中,<li>需要与<ol>/<ul>一起使用;<li>元素用来确定每个项目,<ol>则把他们组成一组。

    同时<ol>元素与<ul>元素只是为了配合<li>元素工作的,所以在<ol>元素与<ul>元素中不能再添加其他文字或元素。当然,在<li>元素中,还可以再添加<ol>/<ul>元素。

     

     <a>元素中的链接指南

    a.让链接标签简短些。不要用整个句子或者大段文字来做链接标签。通常来说,几个词就可以。在title属性内添加附加信息。

    b.注意链接标签要有提示性。不要使用像“click here” “this page”这样无意义的标签。用户会先尝试从网页中寻找链接,然后再浏览网页。所以,提供有意义的链接会提高网页的可用性。

    c.避免把链接紧挨在一起。链接靠太近,用户不易区分。

     

    <a>元素的两个特性:

    01.跳跃性。从一个页面跳跃到另一个页面。

    <a href="mission.html" title="Read more about Starbuzz Coffee's important Mission" target="_blank">

      <a>元素从当前页面跳转至mission.html页面,并提示该页面内容:Read more about Starbuzz Coffee's important Mission。

    02.可以在页面中设置登陆点,或链接的目的地。

    <a>元素常见目的地:

      a.找到网页中需要创建登陆点的地方(它可以是文本中的任意位置,不过通常是文章标题的一部分);

      b.用<a>元素把文本包围起来;

      c.选择登陆点的标识名,并在<a>元素中插入id属性。

    为了定位跳转能正常执行,href属性和目标瞄ID中的大小写要保持一致。

    !something

     

    章节要点:

    通常将网页发布到网上的最佳途径是找一家主机代理商;

    域名是一个独一无二的名字,用来标识网站;

    主机代理商可以为你的域创建一个或者多个Web服务器,服务器名字通常是“www” ;

    FTP(File Transfer Protocol,文件传输协议)是一种把网页和内容传送到服务器上的常用方法;

    FTP应用程序,为FTP提供图形用户界面,使其更加简便(Mac:Fetch/Windows:WS_FTP);

    URL(Uniform Resource Locator,统一资源定位符),也叫网址,用户标识网络上的资源;

    通常URL由一个协议、一个网站名和到资源的绝对路径组成;

    HTTP是一种用于在Web服务器和浏览器之间传送网页的请求/响应协议;

    浏览器用文件协议从你的电脑中读取网页;

    绝对路径是从根目录到文件的路径;

    “index.html”和“default.html”都是默认页面,如果只指定了目录而没有文件名,Web服务器会寻找默认页面返回给浏览器;

    在<a>元素的href属性中一般使用相对路径,对外部链接时可以使用URL;

    使用ID属性在页面中创建目标瞄,链接+#+目标瞄ID,可以链接到页面的特定位置;

    <a>元素的title属性可以对元素进行描述,提高可读性;

    使用target属性可以实现在新窗口打开链接,但需注意兼容。

     

    <img>

    WEB中常用图像格式为jpg和gif两种。

     

    JPEG  GIF

     可在连续调次图像(复制品中有中间层次,如照片)中获得最好效果;

    可用1600万种不同的颜色显示图像;

    是一种“有损”格式,因为文件缩小时会丢失部分图像信息;

    不支持透明。

    纯色图像、logo和几何图形使用

    对于几种纯色或线条组成的图像和含有小段文字的图像,使用GIF比较合适;

    用256种颜色显示图像;

    GIF同样会压缩文件来减小尺寸,但是不会丢失任何东西,是中“无损格式”;

    支持透明。

     

     

     

  • 相关阅读:
    python2将str类型与unicode类型字符串写入文件的编码问题
    正则表达式匹配邮箱
    python读取excel表格
    python正则匹配re.search与re.findall的区别
    python使用join提取列表类型中的数字字符串
    判断一个python字符串中是否包含中文字符
    wordstation中虚拟机关机hang住,无法正常关机
    网络中涉及到优先级的主设备会被抢占与非抢占。
    [转]一天一点学习Linux之Inode详解
    [转]理解Linux文件系统之inode(非ext格式)
  • 原文地址:https://www.cnblogs.com/zoeyll/p/4241981.html
Copyright © 2011-2022 走看看