大前端笔记01

最新推荐文章于 2024-08-09 16:23:49 发布

Yqi9979

最新推荐文章于 2024-08-09 16:23:49 发布

阅读量153

点赞数

分类专栏：代码文章标签： web 网页构成及基础标签

本文链接：https://blog.csdn.net/qq_41418149/article/details/103246388

版权

代码专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML第一阶段day01-网页构成及基础标签

1、浏览器及内核

五大浏览器及内核:
ie – trident
chrome – blink
opera – blink
safari – webkit
firefox – gecko

2、网页构成

w3c：万维网联盟，专门来制定web标准的一个组织
w3c标准（web标准）：由w3c组织制定的web相关的规范和标准
网页三层结构
结构层： HTML （超文本标记语言）负责页面的语义
表现层： css (层叠样式表) 负责页面的样式
行为层： javascript(轻量级的脚本编程语言) 负责页面的行为（动效。。。）
网页的三门核心技术
html 、css 、js

3、html基础

HTML ：HyperText Markup Language（超文本标记语言）
.html 文档 == 网页
网页的基本组成是标记标签：
- 1）、双标签(闭合标签) ：既有开始标签又有结束标签
```
    <div> 内容 </div>
```
- 2）、单标签（空标签） : 只有开始标签，没有结束标签
```
    <br>
```
属性 : 用来给标签定义一些附加信息
- 属性定义在开始标签上
- 以键值对的形式存在 id=“box”
```
    <div id=""  class="">  </div>
```

4、 html文档的基本结构

    <!DOCTYPE html> 
    <!-- 文档类型声明：告诉浏览器以html5的标准来解析网页 -->
    <html lang="en"> 
    <!-- 网页根标签 -->
        <head> 
        <!-- 网页的头标签：通常放一些网页的设置，不会显示在网页的可视区 -->
            <meta charset="UTF-8"> 
            <!-- 设置编码方式：utf-8 (国际编码，万国码) gbk : 中文编码  gb2312 : 简体中文 -->
            <title>hello world</title> 
            <!-- 网页标题： 在浏览器选项卡和收藏夹的书签页上显示 -->
        </head>
        <body>
            网页主体
        </body>
    </html>

5、常用标签

5-1 块级
- 标题 h1 - h6
  - 一级到六级标题，字体逐渐变小，语义权重逐渐变小
  - h1一般同一个网页只用一次，一般用来定义网页的标题或者logo
```
    <h1> ... </h1>
```
- 段落 p
```
    <p> ... </p>
```
- 换行 br
```
    <br>
```
- 章节或者区块 div
```
    <div> ... </div>
```
- 有序列表 ol
  - ol里面的直接字标签只能是li
  - 自动生成编号
  - type属性用来规定列表的编号类型： 1 A a I i
```
    <ol type="A">
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
    </ol>
```
- 无序列表 ul
  - type属性用来规定列表的编号类型： desc 实心圆 circle 空心圆 square 实心方块
```
    <ul>
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
    </ul>
```
- 定义列表 dl
  - 用来做一些专有词的解释
  - dt 用来放名词
  - dd 用来放描述内容
```
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
    </dl>
```
- 分割线 hr
  - 表示主题结束
```
    <p> ... </p>
    <hr> 
    <p> ... </p>
```
- 块级标签的特点
  - 独占一行，从上往下依次排列

5-2 行内

span : 没有语义，通常用来给一段文字中的指定字符添加特殊样式

  <p>我是一段文字，<span style="color:red">我想变成红色，不影响排列</span></p>

粗体 b / strong

  <b>加粗，没有语义</b>
  <strong>我是加粗并且强调的内容</strong>

斜体 i / em

  <i>斜体、没有语义</i>
  <em>斜体并且强调的内容</em>

strong比em的语义更强
特点：
- 所占宽度有内容决定，从左到右依次排列

5-3、行内块级
- 图片 img
```
  <img src="" alt="">
```
- src : 用来定义图片路径
  - 相对路径（relative path）
    - ./表示当前目录，可以省略
```
    <img src="./胖丫.jpg" alt="">
    <img src="./images/二狗.jpg" alt="">
```
    - ../ 向上一级目录
    - ../../ 向上两级
```
     <img src="../二丫.jpg" alt="">
    <img src="../img/二狗子.jpg" alt="">
```
    - /路径开头的 / 表示根目录慎用
    - 目录名后面的 / 表示进入目录
  - 绝对路径（absolute path）
    - 本地绝对路径
```
     <img src="C:\Users\Administrator\Desktop\web1125\day01\胖丫.jpg" alt="">
```
    - 网络绝对路径
```
    <img src="http://xue.ujiuye.com/uploads_it/1911/QuanGuo/EB11836046786FYU.jpg" alt="">
```
- alt : 用来定义图片无法正常显示时显示的替换文本
- 特点：排列方式和行内标签类似，从左到右依次排列

* 内容居中

行内标签不能设置内容居中
内容居中可以作用于文字和图片

    <div style="text-align:center"> 文字  </div>
     <div style="text-align:center"> <img src="" alt=""> </div>

常见问题？

1、doctype的作用？
文档类型声明:告诉浏览器用html语言解析。
2、常见的块级标签和行内标签有哪些？
块级标签：h1-h6;p;br;div;ol;ul;dl;hr等
行内标签：span;b/strong;i/em等
3、i和em(b和strong)的区别是什么？
i/em都是斜体，em强调内容。
b/strong都是粗体，strong强调内容。
4、什么是语义化（对语义化的理解）？
用合适的标签和属性去规定网页上不同的内容，比如标题用h标签，段落用p , 适当的给图片添加alt属性值
好处：
- 1、网页的结构清晰，方便开发者之间的配合
- 2、在没有css的情况下，页面也会有一些基本格式
- 3、增强用户体验
- 4、有利于seo(搜索引擎优化)，语义化有利于和搜索引擎建立良好的沟通，搜索引擎的爬虫会抓取网页，按照网页的语义化去决定不同内容的权重