web一阶段 day01

最新推荐文章于 2024-08-15 11:09:53 发布

gaoyuan0277

最新推荐文章于 2024-08-15 11:09:53 发布

阅读量316

点赞数 2

分类专栏： web前端文章标签： html 前端

本文链接：https://blog.csdn.net/gaoyuan0277/article/details/125725420

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

五大浏览器内核

ie 谷歌苹果火狐欧朋

1.谷歌浏览器：Chrome

内核：webkit-blink

2.火狐浏览器 Firefox

内核：gecko

3.欧朋浏览器 opera

内核：presto - blink

4.苹果浏览器 Safrai

内核：webkit

5.IE浏览器

内核：trident

网页由几部分组成：

网页由：Html Css JavaScript 组成

什么是html？

什么是html?

结构层，超文本标记语言

HyperText Mark-up Language

H:Hyper 超级

T:text 文本

M:Mark-up 标记

L：Language 语言

网页通过html标签对网页中文本，图片、音频等等进行描述

超文本:不仅包括文本，而且还包括图片、音频等

网页就是后缀名为html的文件

标签的属性

要写在开始标签中

属性由: 属性名和属性值组成

属性名与属性值由=号相连

多个属性由空格隔开

属性值要用引号包着

例如：

src="./images/moluoge_03.jpg"

属性名：src

属性值：./images/moluoge_03.jpg

HTML的文档基本结构

<!DOCTYPE html>
<!-- 
  它不是标签，是声明语句
  作用：告诉浏览器该文档的版本信息，用那种语法来解析文档
   !DOCTYPE html  ：用html5的语法来解析该文档
  必须放在第一行
 -->

<html lang="en">
<!-- 
    双标签   
  网页的根标签
  定义整个html文档，里面包含head和body标签
  
 lang属性
- 作用：定义当前文档显示文字的语言
- 语法：lang=“en”
  (lang是language的简写)
- 取值:
  en定义语言为英语
  zh-CN定义语言为中文

  -->

<head>
  <!-- 
  双标签   
  网页的头部信息 
  引入外链css和外链js
  内部样式css也写在head标签中，用style标签对包着
  head里标签的内容不会显示到网页中

  定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。

 -->

  <meta charset="UTF-8">
  <!-- 文档字符集
  字符集(Character set)是多个字符的集合，便于计算机识别和存储各种文字。
  在<head>标签内,通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
    charset属性:设置编码方式
    UTF-8：万国码，通用性较好
    (2)常用的字符集
    - UTF-8被称为万国码，包含全世界所有国家需要用到的字符
    - GB2312简单中文，包括6763个汉字
    - GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
    - BIG5繁体中文，港澳台等用 -->

  <title>文档结构介绍</title>
  <!-- 
    双标签  
    网页标题
添加到收藏夹时的标题显示在搜索引擎结果中的页面标题 -->
</head>

<body>
  <!-- 
    双标签  
    
    网页的主体内容 
    网页中所有的内容都写在body标签中
  

    兄弟关系--并列关系  head标签和body标签 谁也包不住谁
    父子关系--嵌套关系   html标签和head标签  嵌套可以把里面的标签包住

  -->


</body>

</html>

关于块级标签

 <!-- 
    1.块级标签
    2.行内（行级）标签
    3.行内块标签
   -->

  <!-- 
    div  p  h1-h6  hr 
    -->


  <!-- 
      1.div标签
      构建网页的基本标签
      盒子
      属于无语义标签
      划分网页布局

      宽度默认撑满整个父元素（宽度跟父元素的宽度一样）
      高度由内容撑开
      垂直布局，独立成行（一个div标签独占行）

          作用：可以用来划分页面的区块，里面嵌套任何的标签
     -->

P标签

 块级标签
     p标签
     段落标签
  
      宽度默认撑满整个父元素（宽度跟父元素的宽度一样）
      高度由内容撑开
      垂直布局，独立成行（一个div标签独占行）
      自带外间距（两个盒子之间的距离）

          应用场景：文章中的段落、页面中的文字块

          注意:p标签不能嵌套块级标签
      p标签不能嵌套块级标签，如果嵌套网页会分析错误

标题标签

 <!-- 块级标签
  标题标签
 h1-h6

 
  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

h1-h6文字大小依次减小，重要程度也是依次减小

  宽度默认撑满整个父元素（宽度跟父元素的宽度一样）
  高度由内容撑开
  垂直布局，独立成行（一个div标签独占行）
  自带外间距（两个盒子之间的距离）
  自带加粗效果

  注意:一个页面只能有一个h1标题标签，其余标题可以写多个
  应用场景：
    - logo （一般公司的logo会用标题标签包着，增大logo的权重）
    - 文章页标题、内容章节标题
    - 产品标题
    - 模块标题等-->