html学习

最新推荐文章于 2024-10-17 15:53:46 发布

qq_47128823

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量2k

点赞数 41

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_47128823/article/details/141611415

版权

快捷键

ctrl+a：全选

ctrl+c：复制

ctrl+v：粘贴

ctrl+z：撤销

ctrl+y：取消撤销

ctrl+d：批量操作

ctrl+s：保存

ctrl+x：剪切

tab：向后缩减

ctrl+tab：向前缩减

ctrl+回车：切换到下一行

会讲vue项目、react项目、小程序项目，后面再做鸿蒙项目

一、HTML初识

一、前期铺垫

1.html5概念

H5不仅是HTML的第5个版本，也是一门技术总称

1、HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

2、HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)，

H5网络标准统一，可以跨平台，多设备使用，语义化比较强

万维网（域名注册）：域名注册_域名查询_域名申请_域名购买_域名续费_国际域名-万网-阿里云品牌

二、基础认知

目标：认识网页组成和五大浏览器，明确 Web标准的构成，使用 HTML骨架搭建出一个网页。

认识网页（了解）

➢ 网页由哪些部分组成？

• 文字、图片、音频、视频、超链接

➢ 咱们程序员写的代码是通过什么软件转换成网页的？

• 浏览器

1.基础概念铺垫(了解)

1. 认识网页

浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、 Safari浏览器、欧朋浏览(Opera)
浏览器市场份额 Browser Market Share Worldwide | Statcounter Global Stats
市场份额最多的是：谷歌浏览器

2.五大浏览器和渲染引擎

为什么需要web标准？

Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

Web标准中分成三个构成：

构成	语言	说明
骨架	html	页面元素和内容
样式	css	网页元素的外观和位置等页面样式：如（颜色大小等）
行为	JavaScript	网页模型的定义与页面交互

3.Web标准

Web标准要求页面实现：结构、表现、行为三层分离

html：决定结构
css：决定样式的美观
JavaScript：决定网页交互的动态效果

2. HTML初体验

1.HTML感知

HTML (Hyper Text Markup Language)中文译为：超文本标记语言

专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

搭建网页的基本步骤：（使用记事本写代码）

1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt

2. 双击这个文件，输入代码等内容 → 记得保存！

3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html

4. 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

2.HTML骨架结构

HTML骨架结构由哪些标签组成？

• html标签：网页的整体

• head标签：网页的头部

• body标签：网页的身体

• title标签：网页的标题

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
    <body>
    </body>
  </html>

3.开发工具的使用

vscode

3. 语法规范

三、HTML标签学习

1.排版标签

1. 标题标签 h1~h6

2. 段落标签 p

3. 换行标签 br

4. 水平线标签 hr

1.标题标签：

组成：h1~h6

特点：

- - 加粗、放大
  - 重要程度依次递减
  - 独占一行

常用：文章标题、图标等

2.段落标签：p

3.换行标签：br

4.水平线标签：hr

属性：

width：设置宽度
size：设置高度
color：设置颜色
noshade：纯色，保持所有边框颜色一致
algin：水平对齐方式

- left：左对齐
- center：居中对齐（默认）
- right：右对齐

- - 属性：属性名='属性值'
  - 当属性名和属性值相同是可以只写一个，省略属性值。

2. 文本格式化标签

文本格式化标签

加粗：b 、strong
倾斜：i、em
下划线：u、ins
删除线：s、del

语义：突出重要性的强调

推荐：

strong、ins、em、del，表示的强调语义更强烈！，有利于机器解析，对搜索引擎(SEO)有帮助

常用标签：

下标标签：sub
上标标签：sup
字符实体：

空格： 

尖括号： < >

版权：©

人民币：¥

3. 媒体标签

图片标签：img

属性：
src：路径
width：设置宽度
height：设置高度
注意：宽度、高度只设置一个，另一个会等比例缩放。
alt：替换文本，图片未出现时，才显示的文本。
出现原因：网络较慢或者路径错误加载不出来。
作用：帮助搜索引擎理解图片，提高优先级
title：提示文本，当鼠标悬停到图片上时，才提示的文本

路径

分为绝对路径（了解）和相等路径（常用）。

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

eg：file:///E:/qf-code/web/01.webp

相对路径：从当前文件开始出发找目标文件的过程

分类：

注意：

4. 链接标签(a标签)

场景：点击之后，从一个页面跳转到另一个页面

代码：<a href='./目标网页.html'>超链接</a>

特点：

• 双标签，内部可以包裹内容

• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

属性：

href：设置跳转路径，#空连接占位，可以跳在线网址和本地文件

target：设置跳转方式

_self:默认值，在当前窗口跳转

_blank：在新窗口跳转

颜色：

点击前：蓝色

点击后：紫色

点击瞬间：红色

注意：

a标签中可以嵌套任何标签，除了它自己。
开发中不确定跳转地址，一般使用#空连接占位。

5.列表标签

应用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

特点：按照行的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

无序列表 ul li

标签组成：

ul：表示无序列表整体，包裹li标签

li：表示无序列表的每一项，用于包含每一项内容

属性：

type：修改类型

disc：（默认）黑色实心圆点

circle：空心圆

square：黑色实心方块

none：取消列表项

给ul添加是所有li都会修改，给li添加就只有这个li会被修改

使用场景：常用于顶部导航和侧边导航

嵌套规则：

- ul标签只能包含li标签
- li标签可以包含任意内容

<!-- 
快捷写法：ul>li*5{我是第$个}，$代表数字，依次排列
-->
<ul type="none">
  <li>我是第1个</li>
  <li>我是第2个</li>
  <li>我是第3个</li>
  <li>我是第4个</li>
  <li>我是第5个</li>
</ul>

有序列表 ol li

组成：

ol：表示有序列表整体，包裹li标签

li：表示有序列表的每一项，用于包含每一项内容

属性：

type： "A/a/I/i/1"，1是默认排序方式。

start：从第几个开始排序（排序位置）。

使用场景：排行榜

<ol type="I" start="2">
        <li>华为</li>
        <li>小米</li>
        <li>vivo</li>
        <li>魅族</li>
    </ol>

自定义列表 dl dt dd

组成：

dl:自定义列表的整体

dt自定义列表的标题

dd自定义列表的每一项

特点：dd自带首行缩进效果

嵌套规则：

dl只能嵌套dt和dd标签

dt和dd可以嵌套任意标签

使用场景：网页的底部导航

<dl>
  <dt>自定义列表标题</dt>
  <dd>列表项1</dd>
  <dd>列表项2</dd>
  <dd>列表项3</dd>
</dl>

6.表单标签 input

input表单标签：

type属性：默认是文本框

1.text-文本框 :可以输入任意文本

2.password-密码框：

3.submit-提交按钮：

4.reset-重置按钮：

5.button-普通按钮：没有功能，之后配合js添加功能

常用属性：

placeholder：占位符（提示文本）

value：值

表单域标签：form

属性：

action：绑定提交的网址

select下拉菜单标签：

textarea：文本域标签：

二：CSS样式

css初识

CSS：层叠样式表（Cascading style sheets）

作用：给页面中的HTML标签设置样式

语法规则：

css写在style标签中，style标签一般写在head标签里面，title标签下面

选择器{ 属性名:属性值; }

css常见属性：

width：宽度

height：高度

color：文字颜色

background-color：背景颜色

font-size：字体大小。默认是16px，理论上没有最大值，最小值未0，0表示隐藏。

css引入方式

CSS三种样式引入方式：

内嵌式：CSS 写在style标签中，通常约定写在head下面

外联式：CSS 写在一个单独的.css文件中，需要通过link标签引入。

行内式：CSS 写在标签的style属性中，一般配合js添加功能

基础选择器

目标：理解选择器的作用，能够使用基础选择器在 HTML 中选择元素

选择器的作用：选择页面中对应的标签（找她），方便后续设置样式（改她）

标签选择器：

结构：标签名 { css属性名：属性值； }

特点：

1.选中同类标签（无论嵌套的多深都能找到）

2.选择单独一个标签，不合适

属性：

text-indent：首行缩进，1em:默认情况下等于16px，1em相当于当前标签的字号大小，px：首行缩进明确的具体尺寸。

容器：没有任何特殊的样式和含义，可以嵌套任何标签，包括它自己，在网页中起到限定范围的作用（div）

类选择器： .

结构：.类名 { css属性名：属性值； }

特点：

1.所有标签身上都可以设置class属性，所有标签都可以起类名

2.类名：由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

3.类名可以重复，一个类选择器可以同时选中多个标签

4.一个标签可以同时有多个类名，类名之间以空格隔开

id选择器： #

结构：.类名 { css属性名：属性值； }

注意点：

1.所有标签都有id属性，所有标签都可以起id名

2.id具有唯一性，一个标签上只能有一个id名

3.同一个id应该避免同时选中多个标签，除非他们功能一样

类与id选择器的区别：

通配符选择器 *

结构：* { css属性名：属性值； }

作用：一次性选中当前页面的所有标签，用来清除标签自带的内外边距

注意点：

开发中使用极少，只会在极特殊情况下才会用到

在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）

*{
  margin:0;
  padding:0;
}

后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

➢ 选择器语法：选择器1 选择器2 { css }

注意点：

1.后代包括儿子、孙子、重孙子……

2.后代选择器中，选择器与选择器之间通过空格隔开

子代选择器： >

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1 > 选择器2 { css }

注意点：

1. 子代只包括：儿子

2. 子代选择器中，选择器与选择器之前通过 > 隔开

并集选择器： ,

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1 ，选择器2 { css }

注意点：

1. 并集选择器中的每组选择器之间通过 , 分隔

2. 并集选择器中的每组选择器可以是基础选择器(单一的)或者复合选择器（两个及以上）

3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

4. 一次性选中多个标签，并添加相同的样式

  <style>
        h1,
        p,
        .box{
            color: red;
        }
    </style>
</head>
<body>
    <h1>标题1</h1>
    <p>段落</p>
   <div class="box">容器</div>
   <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ol>
</body>

交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2 { css }

结果：(既又原则)找到页面中既能被选择器1选中，又能被选择器2 选中的标签，设置样式

注意点：

1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔

2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

3.( 既又原则)找到页面中既能被选择器1选中，又能被选择器2 选中的标签

<style>
        /* 交集选择器：
            注意点：
        */
        div.box{
            color: red;
        }
        p.box#bgc{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box" id="bgc"> 容器1</div>
    <div>容器2</div>
    <p class="box" id="bgc">段落1</p>
    <p>段落2</p>
</body>