2_HTML基础

一、HTML

一:设置文件的后缀名显示

1. win7:工具-文件夹选项-查看-去掉隐藏已知文件拓展名
2. win10/11: 在01资料下面的图片说明

二:网页的组成

1. 在浏览器中可以看到哪些东西?

   • 文字、图片、搜索框
   • 文字大小、颜色，图片大小，搜索框大小
   • 点击跳转、点击可以搜索

2. 得出相应的网页组成

   • 网页的结构 HTML
   • 网页的表现 CSS
   • 网页的行为 JS

3. 网页的组成：HTML+CSS+JS

三:解释HTML和HTML5

1. HTML:超文本标记语言

• 超：超越、超生 比正常情况要不一样
• 文本：泛指 页面中的所有内容
• 标记：占位置
• 语言：规范

总结:使用了HTML中的规范就可以让文本超越正常的网页布局的一种语言

四:HTML语言的发展历史
1993年 HTML1.0版本
部分组织机构成员觉得语言的发展考虑用户 => 用户体验 HTML4.01
部分组织机构成员觉得语言的发展考虑开发 => 语法规范 XHTML 语法更为严格

五:创建相应的文件和文件夹去书写代码:整合资源
HTML 创建html文件夹 放页面
CSS 创建css文件夹 放表现、样式文件
JS 创建js文件夹 放js文件
images文件集 存放各种资源

二、第一个页面.html

<center>你好世界 hello world</center>

三、编辑器的使用

1.编辑器常见的插件安装使用
汉化插件 chinese
编辑器打开浏览器运行代码结果
open in browser 页面空白区域打开
view in browser 资源管理器的文件名
Live Server 内置服务器 自动刷新浏览器
**2.如何在编辑器中写代码? **

​ 为了让代码有规范 需要创建基础结构(省略)
3.快速创建基础结构代码
​ 输入法切换成英文 shift+1生成感叹号回车即可
html:5

四、基础结构代码的解释

1.HTML中的注释符号(解释说明)
单行注释 ctrl+/
多行注释 ctrl+/
部分注释 alt+shift+a
2.为什么要生成基础结构代码
基础结构代码可以区分资源(HTML+CSS+JS)
html表示整个浏览器文档
head表示页面的头部 加载外部的资源
body表示当前页面的主体内容

五、HTML语法规范

HTML的基础语法
1.双标记/常规标记 <标记的名称 属性1=“属性值1” 属性2=“属性值2”></标记的名称>
2.单标记/空标记 <标记名称 属性=“属性值”/>

注意
在尖角符号后面的第一个英文单词就是当前标记的名称
标记也可以称为标签或者元素,常见的叫法是单标签和双标签
双标签的反斜杠必须要写,单标签中的反斜杠是可以省略的
在标签名称后面有一个空格,空格后面的都是当前标签的属性(描述标签的特点)
属性和属性值之间需要使用等号相连,属性值需要使用引号引起来
当一个标签有多个属性的时候,属性不区分前后顺序
案例:同学身高180cm、体重180kg、长相千锋吴彦祖
双标签 <同学 身高=“180cm” 体重=“180kg” 长相=“千锋吴彦祖”></志强同学>
单标签 <**同学 身高=“180cm” 体重=“180kg” 长相=“千锋吴彦祖”/>

六、文本标题标签

文本标题标签的使用
1.标签名称:h(h1~h6)
2.默认样式的变化
h1到h6字体的大小越来越小
字体的加粗效果越来越弱
默认独占一行,自动换行
上下默认有间距大小
3.作用
h1存放网页中最为重要的部分(标题、logo)
h2~h6没有固定用法,可以任意使用

方法1:快速选中共同部分进行操作
选择当前标签中共有的部分
ctrl+d选择下面相同的部分
移动键盘上的上下左右方向移动光标进行修改即可

方法2:快速生成法
h$*6{文本}
​ h标签名称
​ $表示序号 序号默认从1开始
*n 表示生成n个
​ {文本} 标签都有内容

七、段落标签的使用

段落标签的使用
1.标签名称:p
2.默认样式
独占一行上下是有间距的
在编辑器中空格和换行只会解析一次

保存的快捷键:ctrl+s
1.低版本的编辑器设置自动保存
找到左下角的设置选项(左侧是默认的,右侧是用户设置)
把以下ctrl+c/v放在右侧即可

        {
            "editor.fontSize": 18,
            "editor.wordWrap": "on",
            "git.enableSmartCommit": false,
            "git.enabled": false,
            "explorer.confirmDragAndDrop": false,
            "window.zoomLevel": 0,
            "files.autoSave": "afterDelay",
            "files.autoSaveDelay": 1000,
            "workbench.startupEditor": "newUntitledFile"
        }

2.高版本编辑器的设置
找到左下角的设置选项 下拉选择
autoSave 自动保存

八、加粗和倾斜标签的使用

加粗和倾斜标签的使用
1.加粗标签:b、strong 推荐使用strong 语气加强
2.倾斜标签:i、em

了解的标签
1.删除线:del、s
2.下划线:u

常见的单标签的使用
1.hr 横线
2.br 强制换行

上标标签:sup
下标标签:sub

九、列表标签的使用

常见的列表标签分类:无序列表、有序列表、自定义列表
一.无序列表使用
1.标签名称
ul 父级标签 表示列表盒子
li 子级标签 表示列表内容
2.列表可以有一个,子级内容可以有多个,需要进行嵌套显示
3.默认样式
无序列表有黑色的实心圆
独占一行,上下显示
父级元素上下和左侧都是有间距的
4.无序列表中的属性设置
属性:type 表示类型
属性值:circle空心圆/disc实心圆/square方形
5.作用:常用于新闻列表或者导航
6.快捷写法:ul>li*n{文本}

二:有序列表
1.标签名称:ol>li
2.有序列表中的属性设置
type 类型:默认是1 a/A i/I
start 开始 第几个开始显示(属性值只能是数字)

三:自定义列表使用
1.标签名称
dl 父级标签 表示列表盒子
dt 子级标签 表示存放图片或者名词
dd 子级标签 表示对图片或者名词的解释
2.使用的注意事项
快捷写法:dl>dt+dd
自定义列表如果有多个子级需要修饰的时候 需要重新写整个自定义列表

十、图片标签的使用

图标标签的使用
1.标签名称:img
2.标签属性
src:表示引入图片的路径 可以使用在线地址也可以使用本地地址
alt:提示文本,当图片加载失败的时候给用户的一段提示文本 优化(用户体验)

​ title:表示鼠标悬停时候的提示文本

十一、路径的使用

路径的使用
1.绝对路径的使用:表示含有盘符的路径地址
插件的名字:Image preview
不建议在服务器(工作)中使用
2.相对路径的使用
同级找同级元素:目标文件的名称
父级找子级元素:目标文件的文件夹名称/目标文件的名称
子级找父级元素:…/目标文件的名称
3.常见的命令
./ 表示当前目录
…/ 表示跳出当前文件夹返回上一级