乐趣区

关于html:HTML基本知识1

HTML 基本知识(1)

意识网页

网页是由文字 图片 音频 视频 超链接 flash 等组成

如何显示网页

程序员写好代码后,通过浏览器渲染之后而造成网页

浏览器

浏览器是网页显示 运行的平台

罕用的五大浏览器及内核

  • IE 浏览器:Trident 内核
  • 火狐浏览器:Gecko 内核
  • safari 浏览器:webkit 内核
  • 谷歌浏览器:Bink 内核(属于 webkit 的分支)
  • 欧朋浏览器:Bink 内核

WEB 规范

WEB 规范不是一个规范,是 W3C 组织和其它标准化组织制订的一系列规范,能够让不同的浏览器在页面显示对立内容

WEB 规范的组成

  • 构造(html): 网页元素的分类以及整顿
  • 体现(css):网页外观的款式
  • 行为(js): 网页模型的交互及行为。

WEB 规范的益处

  • 使 WEB 倒退更为广大
  • 内容能被更宽泛的设施拜访
  • 升高网站流量费用
  • 使网站更易于保护

HTML

HTML:超文本标记语言 并不是编程语言 而是标记语言

HTML 骨架格局

<!DOCTYPE html>  
<html lang="en">   
  <head> 
      <meta charset="utf-8">   
      <title></title>   
  </head>
  <body>    
  </body>
</html>

HTML 元素标签分类

html 标签:单标签 双标签

双标签

<body></body>   <html></html> 等等 

单标签

<img />  <br /> 等等

html 标签关系

嵌套关系

<head>
    <title></title>
</head>

并列关系

<head></head>
<body></body>

在嵌套关系中 子元素间隔父元素应缩进一个 tab 键身位

代码开发工具

  • DWcs6
  • VScode
  • Webstrom
  • sublime
  • HBuilder

生成 html5 骨架的形式

! 或者 html:5

骨架标签含意

  • !DOCTYPE html: 文档类型,指的是 html5 的构造。
  • html: 根标签
  • lang: 指定 html 的语言品种
  • head: 头部标签
  • charset: 字符集
  • title: 文档题目标签
  • body: 主体标签

字符集编码

  • gb2312:简略中文,包含 6723 个文字
  • BIG5: 繁体中文,泛指港澳台等
  • GBK: 包含简体中文与繁体字,是 GB2312 的升级版
  • UTF-8:包含全世界各地所须要的字符集。

标签的语义

标签的语义:指的是标签的含意 在适合的中央放上适合的标签 让构造更清晰

排版标签

题目标签

h1~h6: 指的是 1~6 级题目 字体会顺次变小,具备换行的特点

                         <h1> 一级标签 </h1>
             <h2> 二级标签 </h2>
             <h3> 三级标签 </h3>
             <h4> 四级标签 </h4>
             <h5> 五级标签 </h5>
             <h6> 六级标签 </h6>

段落标签

p:指的是段落标签

 <p> 文本 </p>

水平线标签

hr: 水平线表标签

<hr />

换行标签

br : 水平线标签

 掘金 一个专属于程序员的 APP <br />

div 和 span

<div> 胡歌 </div>
<div> 霍建华 </div>
<span> 韩红 </span>   <span> 古天乐 </span>

div: 分隔 分区。一行内只能放一个 div 标签

span:跨度 跨距。一行内能够放很多 span 标签

文本格式化标签

    <b> 文字以加粗的形式显示 </b>     <strong> 文字以加粗的形式显示 </strong>    <br />
    <i> 文字以歪斜的形式显示 </i>     <em> 文字以歪斜的形式显示 </em>            <br />
    <s> 文字以删除线的形式显示 </s>    <del> 文字以删除线的形式显示 </del>      <br />
    <u> 文字以下划线的形式显示 </u>   <ins> 文字以下划线的形式显示 </ins>      <br />

标签属性

让 HTML 标签领有更多的信息 便叫作标签的属性

< 标签名  属性 1 ="属性值 1" 属性 2 ="属性值 2"> 文本 </ 完结标签 >

图像属性

<img src="图像 URL" />

总结

  • 标签名领有多个属性。必须写在开始标签中,且位于标签名前面。
  • 属性之间不分先后顺序,标签名与属性,属性与属性之间必须以空格隔开
  • 采纳键对值的模式,如 key=value 的格局。
  • alt 是图片不能显示呈现的文字,title 是鼠标挪动时显示的文字

链接标签

<a herf="指标的 url 地址"  target="页面的打开方式"> 文本 </a>
复制代码 
 <a href="http:////www.baidu.com" target="_blank"> 内部超链接 </a>
 <a href="7. 图像标签.html"> 外部超链接 </a>

注意事项

  • _self: 是在原网页关上链接
  • _blank 是在新网页关上链接

正文标签

<!-- 正文内容 -->

正文自身是让程序人员看的,目标是为了解释这段代码的含意。程序不执行 快捷键:ctrl+/

门路

指标文件夹 —-> 根目录

相对路径

上一级门路

<img src="../ 图像 URL" />

同一级门路

<img src="./ 图像 URL" />

下一级门路

<img src="./img/ 图像 URL" />

绝对路径

个别是指残缺的网络门路

錨點定位

創建锚点链接 使用户可能疾速跳到指标地位

步骤如下

  • 创立绝对应的 id 名
  • 应用绝对应的 id 名标注跳往指标的地位
     <a href="#Christmas">3. 圣诞树的由来 </a><br />
     <h2 id="Christmas"> 圣诞树的由来 </h2>

base 标签

base 标签

base 标签是为了设置整体链接的打开方式   写在 head 与 </head> 之间
复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <a href="https://www.baidu.com/"> 百度 </a>
    <a href="https://www.qq.com/"> 腾讯 </a>
    <a href="https://www.sina.com.cn/"> 新浪 </a>
    <a href="https://www.163.com/"> 网易 </a>
</body>
</html>

pre 标签

pre: 文本格式化标签,依照文本的本来的设置在网页中出现
    <pre>
        锄禾日当午
        汗滴禾下土
        谁知盘中餐
        粒粒皆辛苦
     </pre>

特殊字符

html 标签不方便使用的中央能够应用特殊字符 它们属于符号。

HTML5 的倒退之路

html5 的倒退之路:jingyan.baidu.com/article/59a…

退出移动版