对于HTML5与CSS3基础教程的总结

Posted 2020-08-03 晓菲

1. html和CSS是万维网(www)的根基。

2. 万维网(www)：world wide web，是互联网提供的服务其中之一。分为web客户端和web服务器程序。以http(Hypertext Transfer Protocol)和html为基础。由一个全局的URI(统一资源标志符)标识。资源通过超文本传输协议传送给用户。

3. 万维网联盟：w3c

4.https比http多了个保密功能，Consortium。

5. 标签的组成：元素（element）、属性（attribute）和值（value）。

6. 大多数元素既包含文本，也包含其他元素。一些元素由开始标签、内容和结束标签组成。空元素既不包含文本也不包含其他元素。空元素只有一个标签<img/>

   body元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。

   <header>可以包含h1～h6标题、标识、导航、搜索框

7. 浏览器呈现HTML时，会把文本中的多个空格或制表符压缩成单个空格，把回车和换行符转换成单个空格，或将他们一起忽略。

8.特殊字符：版权符号：&copy，带语调的小e：&eacute，<：&lt;，>：&gt; 详情请见http://www.elizabethcastro.com/html/extras/entities.html

9.URL(Uniform Resource Locator)统一资源定位符。第一部分成为模式。模式有HTTP和FTP(File Transfer Protocol)文件传输协议等。第二部分是文件所在的主机的名称。第三部分路径

  HTTP的模式　

　    模式　　　　　　　主机名                              路径

   "   http        ://           www.site.com         /         tofu/index.html    "

  FTP的模式

      模式　　　　　　　主机名                              路径

   "   ftp        ://           ftp.site.com         /         pub/index.pdf    "

   用于电子邮件地址的URL包括mailto模式

　   模式　　　　　电子邮箱地址

   "   mailto        :    [email protected]   "

10. 斜体<em>表示强调的意思</em>   或者font:italic;  

      <address>也是斜体，禁止在里面添加h1～h6、article、address、aside、footer、header、hgroup、nav、section

      <small>变小变细一点，表示的含义是法律声明等条纹细则。放在footer里，版权所有

      <strong>加粗，想标记为重要内容的文本

      <figure>创建图及其标题的步骤

      <cite>标记的是音乐专辑、电影、图书和艺术作品的标题，也是斜体

      两个特殊的元素用以标记引述的文本。blockquote元素表示单独存在的引述。q元素则用于短的引述

      <time datetime=“”>标记时间

      <abbr title="">标记缩写词并用title解释其含义， 样式标记含有title的abbr：abbr[title] {}

      <dfn>用于定于术语，后续使用术语时不需要再对其定义。斜体

      <sub>创建下标   <span>H₂O</span>

      <sup>创建上标   <span>X²</span>

      <del>标记删除，同text-decoration: line-through;既可以包围短语内容又可以包围块级内容的元素

      <ins>下划线，同text-decoration: underline;既可以包围短语内容又可以包围块级内容的元素

      <code>表示其中的文本是代码或文件名

      <pre>预格式化的文本，保持文本固有的换行和空格。它自动关闭换行有内容很宽会出现滚动条，加一个word-space:pre-wrap;

      <mark>荧光笔样式，一般是黄色背景

      <ruby><rp><rt>旁注标记       <ruby>   北<rp>(</rp>   <rt>bei</rt>    <rp>)</rp>     京<rp>(</rp>    <rt>jing</rt>   <rp>)</rp>    </ruby>  =>北京上面有beijing

      <meter>出现百分比的横条              <meter value="0.8">80%</meter>

      <progress>计算后的百分比的横条     <progress value="37" max="100">

      <img />当图片未加载出来，显示alt里面的内容

11. HTML5引入header、footer、main、article、section、aside（放指向其他网站的链接）、nav。

12. 地标角色

地标角色	如何使用
role=“banner”（横幅）页面顶端，网站标志、网站赞助者标志、全站搜索工具	放在页面级的header元素，每个页面只用一次
role=“navigation”（导航）通常为链接	与nav是对应关系，每个页面可以多次使用但不能过度使用
role=“main”（主体）文档的主要内容	与main是对应关系，最好将其添加到main元素，也可以添加到其他元素，每个页面仅用一次
role=“complementary”（补充性内容）文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的	与aside是对应关系。应将其添到aside或div元素。每个页面可以用多次但不能过度
role=“contentinfo”（内容信息）包含关于文档的信息的大块可感知区域这类信息的例子包含版权声明和指向隐私权声明的链接等	可添加至整个页面的页脚（通常footer），每个页面仅用一次

 

13. 链接两个主要的部分： 目标和标签。 目标指定访问者点击链接时会发生什么，标签是访问者在浏览器中看到或在屏幕阅读器中听到测部分，标签可以是文本、图像或两者兼有。