记录学习笔记、分享资源工具、交流技术思想、提升工作效率

《head first HTML与CSS.XHTML》读书笔记1

前端 xiaomudk 6年前 (2015-08-22) 3233次浏览 0个评论

html中的注释

<!--注释
    文字-->      #注释可以写成多行
<html>
    <head>                                      #头部信息
        <title>Starbuzz Coffee</title>        #页面标题
    </head>

    <body>                                    #页面的主要内容
        <h1>Starbuzz Coffee Beverages</h1>     #一级标题,字最大
        <h2>House Blend, $1.49</h2>            #二级标题,次之
        <p>A smooth, mild blend of coffees from Mexico,Bolivia and Guatemala.</p>                             #<p>和</p> 包围着一段文字,一个段落
    </body>
</html

最简单的html和css结构

<html>
    <head>
        <title>  </title>
        <style type="test/css">
            body {

            }
        </style>
    </head>
    <body>
    </body>
</html>

html负责的是结构,css负责的是外观
元素=开始标记+内容+结束标记

  • <a href="abc.html">abc</a> 链接 #hred属性来指定链接的目的地
  • <img src="green.jpg"> 显示图片
  • <em>文字</em> 表示强调的内容; 用斜体来显示;
  • <strong> </strong> 表示着重强调的内容, 用粗体来显示;
  • <p>文字</p> 标记一个段落 #前面不会空两行
  • <q>文字</p> 标记简短的引用; 简单的说就是在这个 短语两边加上双引号
  • <blockquote> 文属于字</blockquote> 标记长的引用;

    <q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。
    <blockquote>属于块元素, 块元素前后都有换行符;
    <q> 属于内联元素,内联元素随文字出现在“行内”;
    块元素特立独行,内联元素随波逐流;

  • <br> 换行 (这个即不是块元素,也是内联元素 )
  • <li> </li> 标签定义列表项目

    可用在有序列表(<ol>)和无序列表(<ul>)中;如果不加,会默认无序的;

  • <address> </address> 告诉浏览器这段内容是个地址,例如你的联系信息
  • <pre> </pre> 格式化文本
  • <hr> 一个水平线
  • <code> </code> 显示计算机程序的代码

常用的特殊符号

以位与运算符 &开头,以分号运算符 ; 结尾

  • " 表示双引号(")
  • & 表示位与运算符(&)
  • < 表示小于运算符(<)
  • > 表示大于运算符(>)
  •   表示空格( )

元素属性:

属性的顺序不重要,可以按自己喜欢的顺序;
如果是链接的话,记得带上 http://
a元素

  • <a href="abc.com" title="test">abc</a> #给链接一个简单的描述,就是鼠标放在abc上面 会显示test
  • <a id="chai">chai tea </a> #设置一个目标锚 ,这里的id用name代替也是可以的
  • <a href="#chai">test</a> #链接到当前文件中的目标描
  • <a href="index.html#coffee"> #链接到其它地方的目标描
  • <a target="_blank" href="www.test.com" rel="noopener noreferrer">abc</a> #在新窗口显示链接打开的网页
  • <a target="_" rel="noopener noreferrer">

img 元素
是内联元素;是个空元素,即没有内容文字,不用以结尾;

  • <img src="images/logo.gif">

  • <img src="www.test.com/logo.gif"> 都可以引用图片

  • <img src="images/logo.gif" alt="error"> 如果找不到logo.gif这张图片,则显示error这段信息

  • <img src="images/logo.gif" width="80" height="90"> 指定图片的宽度和高度

  • <a herf="http://www.test.com"><img src="logo.gif"></a> 创建一个图片链接,为http://www.test.com

  • <a herf="http://www.test.com/logo.gif"><img src="logo.gif"></a> 指向一个图片, 也是可以的

html标准

在每个html文件第一行 加上:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

表示过渡的html4.01标准

表示严格的html4.01标准,

在每个html中的中加入,注意后面的 charset=utf-8是编码,可能要适时的修改
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

在严格的html4.01中,更喜欢把内联元素如图像,嵌套进块元素(如段落或标题)中。
如在<img>元素旁添加<p>

XHTML 1.0

三步将严格的html转化为xhtml 1.0:

  1. 将doctype改为严格的xhtml1.0;
  2. 添加xmlns属性、lang属性和xml:lang属性到<html>元素中去;
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. 所有的空标记都应以/>结尾,而不是>;

发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址