乐趣区

关于html:HTML基本知识1

jiezi

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…

退出移动版