Web前端105天-day02-HTML

smile陌辰

已于 2022-11-16 19:42:43 修改

阅读量106

点赞数 1

分类专栏： HTML 文章标签：开发语言前端 html

于 2022-11-08 20:55:06 首次发布

本文链接：https://blog.csdn.net/qq_52810836/article/details/127755759

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

day02

前言

第二天学习

一、html基础语法

1.html概念

1.html超文本标记语言 Hyper（超链接）Text（文本）Markup（标记）Language(语言)

2.由一对尖括号包裹的有意义的英文字符，形成一个标签也叫标记

3.在浏览器中会被识别成某个功能

2.标记（标签）、属性、元素

1.一个标签（标记）中可以包裹内容，内容可以是文字可以是其他标签

2.html的标签属性，要写在html的开始标签中，与标签名有一个空格的距离。属性的格式，属性名="属性值"

3.元素就是由标签+内容+属性组成的一个集合，会在页面上进行展示，在页面上出现的这个整体就叫元素

4.元素被有意义的标签包裹后，再被浏览器识别，去显示在页面上

3.标签的表现形式

1.双标签 :一对标签组成，由开始标签和结束标签组成。结束标签标签名前有一个/ ;双标签可以包裹内容和文字

2.单标签:是有尖括号包裹一个标记 ;单标签无法包裹内容 ;单标签大多数依赖于属性使用

h1*100 按 tab 键可以快速出现 100 个 h1 标签

4.html文档结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

1.<!DOCTYPE html> 告诉浏览器现在读取的是html类型的文件，html的版本为html5

2.一组html标签，包裹着整个“文档”的内容

3.一组head标签,主要描述meta标签，类似于设置。head标签的内容是不会在页面中显示出来的。

4.最简单的最基础的meta标签charset代表字符集，utf-8值得是字符的编码类型。

5.一组title标签指得是在浏览器中地址栏下，网页的标签

6.一组body标签，就是网页的主体内容（我们编写的结构代码就写在body里）

二、html基础标签

1.文本标签、行内文本

1.h1~h6 代表1-6级标题标签

1.自占一行的双标签

2.自己有一定样式

3.标题标签中不允许插入其他标题标签

2. p标签代表段落标签，用于书写一小段或一大段文字

1.自占一行的双标签

2.自己有一定样式

3.lorem在标签中书写，按tab键会形成一段很长的假文

3. br标签代表同一段文字之间的管行

1.在编辑器中敲回车是不能让文字换行的，在编辑器中回车多个空格都代表一个空格

2.br标签是很特殊的单标签

3.br标签用于同一个段落文字之间换行，绝对不能用于结构的空行，或者是结构之间的间距

4. span标签

1.span是行内标签，用于在一行之内单独的特殊的文字包裹

2.没有特殊样式，没有特殊意义

5. i标签，斜体

6.b标签，加粗

7.mark标签，高亮标记

2.html字符实体

在 html 中，某些字符是预留的，比如空格， < > 没办法直接在编辑器中通过书写展现在页面上。

我们必须用字符实体代替这些预留字符。

1.小于号，实体名称 &lt; ,实体编号 &#60;
2.大于号，实体名称 &gt; ,实体编号 &#62;
3.空格，实体名称 &nbsp; ,实体编号 &#160;
4.乘号，实体名称 &times; ，实体编号 &#215;
5.除号，实体名称 &divide; 实体编号 &#247;

`3.`div标签

1.div标签，division指的分开，分隔的意思

2.div标签是没有任何样式的双标签，自占一行

3.div标签的重要功能就是作为标签的外包裹，以分块的形式将页面分区，也可以将功能区的其他标签包起来,用来分组。

4.div标签可以包裹body中的任何标签。也可以独立使用。

5.div标签在html书写中用的最多

4. 超链接标签

a标签，超链接标签。用于一个页面跳转到另一个页面。
一个行内的双标签，有自己的样式

          1. 样式通过状态表现出来的

          2. 未激活状态，蓝色带下划线

          3.按住不松手，正在激活状态，红色带下划线

        4.已激活状态，紫色带下划线

href属性非常重要，只有这个属性内有路径才能完成跳转

1. href 超文本引用，跳转地址的链接（路径）

2.路径（绝对、相对）

3. href="#" 返回当前页面的顶部

空链接

1. href="javascript:void(0);" 不发生跳转

2.href="javascript:;" 不发生跳转

锚点

1.href 中填写 # 某个元素的 id 值，当点击这个 a 标签需要跳转到这个元素上

2. 地址栏也会出现 #xxxid 的值

3. 这种跳转方式是利用 a 的锚点 “ 目标 ” 完成的

target属性，属性值 _blank 打开新的窗口

<h1 id="title">我是大标题，需要看我</h1>
....
<a href="#title">锚点指跳到当前页面的某个元素上</a>

5. img图像嵌入元素

1.img网页上用于显示图片用的

2.img单标签，大多需要依赖属性完成

3.img标签是“行内标签”，它属于可替换元素，拥有行内标签不拥有的东西。使用的图片本身自己的宽度和高度

4.img的属性

1.src是必要属性，包含需要图片的文件路径

2.alt非必要属性，它是对图片的一种描述，写文字

5.如果需要改变图像的大小只需要改变图像的宽度或者高度就行，另外一边会等比例的缩放

1.style属性代表样式

2.style="width: 50px;" 宽度的样式

3.style="height: 50px;"高度的样式

6.路径

1.分类：

1.绝对路径

2.相对路径：相对"源文件"的目标文件的位置

2.相对路径的写法

1.同级目录 src="./图片名.后缀名"

2.下级，先找同级 src="./同级目录/图片名.后缀名"

3.下多级，先找同级 src="./同级目录/下级目录/图片名.后缀名"

4.向上一层 src="../图片名.后缀名"

5.向上两层 src="../../目录/图片名.后缀名"