网页基础全解析-优快云博客

本文深入讲解了网页的基本构成，包括文字、图像、超链接及多媒体元素，并探讨了浏览器的运行原理，介绍了主流浏览器及其内核。同时，文章还详细解释了HTML、CSS和JavaScript在网页开发中的角色，以及如何使用VSCode进行网页编辑。

认识网页

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

一：编辑器

vscode

自己在D或者E 盘下新建一个文件夹  名字自己起 在vscode中FIle里 找open Folder 打开新建文件夹 

1:new Folder 新建一个文件夹 day01
2：右键 new File 新建一个文件  后缀.html 名字 自己起 
3：打开html文件  ! 回车  就会生成文档说明

二：浏览器

? F12 开发者工具调试代码 —》界面

ctrl+shift +i

内核：解释运行html文档 js文档渲染引擎（HTML+CSS）+ js引擎(js)

外壳: 淘宝风

5大常用浏览器

IE     内核: Trident
Chrome 谷歌  内核:  webkit   Blink 
FirFox Mozila  内核:  Gecko 
Opera  挪威   欧朋  内核  Presto
Safari  内核  webkit

三：web标准

结构html+样式 css +行为 js 相分离

四:HTML

Hyper 超 Text 文本 Markup 标记 language 语言 ——————》超文本标记语言 (并不是编程语言静态语言)

.txt 只能有字符

超文本 : 不仅仅只有文字视频音频图片超链接

后缀: .代码l —>.html —>运行在浏览器 —》网页

1:标记语言  
规范: 标签  一个标签实现一个特定功能
<关键字>内容</关键字>  封闭标签  双标签
<hr/>                 非闭合标签 单标签

# <!DOCTYPE html>  

#UTF-8 编码规则  万国码  全世界的所有字符   目的;无论哪种语言都能正常解释运行
GB2312  4000多个汉字  GB18030 台湾 繁体字   GBK 
Unicode 编码  26个英文字母+ 符号  128个字符

ctrl+/注释注释不被运行的代码只为了阅读

文字排版标签

1: 标题标签
<h1>  一级标题  加粗加大
   标题内容 
</h1>
<hn></hn>  n 1---6  3以上建议不要用 没意义 
h1--h3 h1出现一次  一定要放一些触发的关键字 
 <title></title>  权重标签  

语义化标签 强调作用  权重  h1标签是一个语义化特别重的标签  一定能被搜索引擎抓取到 
<h1>我是清华毕业的</h1>

2:段落标签
<p>放一段文字</p>

3：文本修饰标签
  <b>我是加粗后的字体</b>
  <!-- 语义化  强调作用   里面的内容 -->
  <strong>我是加粗后的字体</strong>
  <!-- 文字斜体  i em    em起强调作用  -->
  <i>我是斜体标签</i>
  <em>我是斜体标签</em>
  <!-- 文本中划线  del s  -->
  <span>&yen;1200</span>
  <del>&yen;2200</del>
  <s>&yen;2200</s>

  <!-- 下划线 u  ins -->
  <u>下划线</u>
  <ins>下划线</ins>

标签属性（修饰标签的作用）

小女孩身高=170cm 眼睛=大大的学校= 中山大学

标签html 宽= 300px 高 = 400px 边框 = 3px 颜色 = ‘red’

 <hr  color="red"  width="400px"  align="center"/>

hr结构  主题  三个属性  
（1）一个标签身上可以有多个属性
（2）属性以空格隔开  属性名="属性值"
align 调整元素的对齐方式  left 左对齐  center 居中对齐 right 右对齐 
width 宽度  每个元素都有宽高属性  没有设置的时候是默认宽高
color: 字体颜色   red ,yellow ，green ，blue ,brown ，grey ,skyblue,pink ,deeppink,purple

列表系列

无序列表

 <!-- ul 装数据的大盒子 li其中每项数据  ul unorder list li list 
    type 小圆圈的样式  空心圆 circle  方的 square  disc实心圆
    -->
    <ul type="circle">
       <li>我是无序列表第一项</li>
       <li>我是无序列表第二项</li>
       <li>我是无序列表第三项</li>


    </ul>

有序列表

<ol>
        <li>我是有序列表第一项</li>
        <li>我是有序列表第2项</li>
        <li>我是有序列表第3项</li>
        <li>我是有序列表第4项</li>
        <li>我是有序列表第5项</li>
    </ol>

自定义列表

 <!-- 自定义列表   dl >dt标题  数据项 dd-->
    <dl>
        <!-- 标题 -->
        <dt>购物指南</dt>
        <dd>会员介绍</dd>
        <dd>会员介绍</dd>
        <dd>会员介绍</dd>
        <dd>会员介绍</dd>
        <dd>会员介绍</dd>
        <dd>会员介绍</dd>
    </dl>

图片标签 img

<img   src="图片路径"  alt="图片路径出错时显示的文字提示"  title="鼠标移入时图片的标题"/>


src:图片的地址 
alt:当图片路径错误时 的文字提示
title:鼠标悬停显示的图片标题
边框:  border:2 2px图片边框  默认黑色

绝对路径:引用网络上的图片以及本地C:/Users/Public/Pictures/Sample Pictures/Desert.jpg （不建议采用这种绝对路径）

相对路径相对你当前文档而言的路径

同级路径 ./

不同级路径（上一级和下一级）跳出一个文件夹 …/

跳出两个 …/…/ 以此类推

标签的分类

块级标签: div p ul li ol dl hn

（1）独成一行 (霸道)

（2）宽默认100%，设置宽高起作用

行内标签 span em i b strong

(1) 并排
（2）宽高取决于内容,设置宽高不起作用

行内块标签 img

?(1)并排

(2)设置宽高起作用

特殊字符

html-01