首页 > Web开发 > 详细

HTML

时间:2019-08-04 22:50:41      阅读:90      评论:0      收藏:0      [点我收藏+]

 

一、 语义化概述

  1. 什么是语义化:

a) HTML种不同的元素代表不同的含义。

b) 使用就有含义的元素来书写HTML文档,即语义化。

c) 书写HTML文档最重要的,即为不同的内容选择合适的元素

d) 语义化属于HTML范畴,与样式无关。

  1. 语义化作用:

a) 有利于浏览器理解HTML文档。

b) 有利于搜索引擎理解HTML文档。

  1. HTML5元素表:

 

二、 超链接

   书写格式:<a target=”页面打开位置” href=”目标”>内容</a>

Herf属性:页面地址(路径);锚点;功能连接

Terget属性:_blank新窗口打开;_self默认值,当前窗口打开。

三、 相对路径和绝对路径

  1. 绝对路径:当网站部署到服务器后,网站中的所有资源都可以通过一个地址(路径)访问该地址(路径)的书写格式为协议://域名/目录

http://meyerweb.com/eric/tools/css/reset/reset.css

协议:http域名:meyerweb.com目录:根目录/eric/tools/css/reset/reset.css 

  1. 绝对路径的使用场景:访问站外资源时,只能使用绝对路径;访问站内资源时,若网站已部署到服务器,可以使用绝对路径,并可以省略协议和域名。
  2. 相对路径:相对路径是相对于当前资源的位置,只能用于访问站内资源;相对路径的书写格式为:./路径。

./表示当前资源所在的目录,必须作为相对路径的开始,可省略;

../表示返回上一级目录 

四、 文本元素:

      H1—h6:1级标题-6级标题             p:段落

      Strong:重要的文本                   em:强调的文本

       B  :突出显示的文本                 I :应区别对待的文字

      Blockquote:整段的引用                cite:对所写词的应用

       Q   :小段文本的应用                abbr:对缩写次的引用

 

五、 块级元素 行内元素与行内块级元素 分类等(相互之间可以转换)

块级元素

  1. 宽高可以自行设置,与内容 无绝对 关系
  2. 默认独占一行,与其他元素不能共存一行
  3. 对应的css属性是 display:block
  4. 常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer

行内元素

  1. 宽高不可以设置,设置无效,由内容决定宽高
  2. 默认能与其他元素共存一行
  3. 对应的css属性是display:inline
  4. 常见的行内元素有:a、 span 、 strong、 I、 b 、td

行内块级元素

  1. 宽高可以设置,与内容无绝对关系
  2. 默认不独占一行,可与其它元素共存一行
  3. 对应的CSS属性是:display:inline-block
  4. 常见的元素: img 、 td 、 table 、video 、audio 、 表单 、 。。。

六、 结构元素Div

  Div元素:它是一个非常常见的元素;它没有任何的语义;它仅仅表示一个容器,用于包含其他元素;在网站布局时,它通常用于表示页面的区域。

七、 语义化结构元素语义化结构元素:在HTML5出现之前,一直使用div来划分页面区域;但div无法明确表示该区域的内容的含义HTML5中新增了一系列带有语义的结构元素;它们和div没有本质的区别,只不过它们有语义。<header>:用于表示页面或某个区域的头部。

<nav>:用于表示导航栏;

<aside>:用于表示跟周围主题相关的附加信息。

<article>:用于表示文章或其他独立页面存在的内容。

<section>:用于表示一个整体的一部分主题。

<footer>:用于表示页面或某个区域的脚注。

八、 实体字符

实体字符书写格式:&实体名称;或&#实体编号;

常见的实体字符:

显示结果

描述

实体名称

实体编号

 

空格

&nbsp;

&#160;

<

小于符号

&lt;

&#60;

>

大于符号

&gt;

&#62;

&

并且符号

&amp;

&#38;

c

版权符号

&copy;

&#169;

HTML

原文:https://www.cnblogs.com/caoxiangwang/p/11300234.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!