杨家瑞的博客

# 前端基础HTML

# VsCode使用

在vscode中 摁下！+回车 可以自动生成

自动生成的lang 属性默认使英文 可以在vscode中配置 在扩展中 Emment(vscode内置插件) Variables中配置

在vscode中 想快速删除某行 可以首先让光标到某一行 并摁 ctrl +shift+k 删除多行也是一样的操作

在vscode中 想快速跳到下一行不想断开上一行（ctrl+enter ），否则就得滚动条拉到最后可以

网页的标签页会有图标 如果不设置默认会有个报错

如何简单的设置 可以将把图标的favicon.ico 放到项目文件夹中但是不要放到太深 就可以显示出来了

  1. 安装插件（中文包、主题等）

  2. 比较重要的插件 LiveServer 可以右键Open 运行网页

  3. 自动保存可以在VsCode中自己设置

  4. 务必使用VsCode打开的是文件夹 否则Live Server 无法工作

  5. 打开的网页必须是标准的HTML结构 否则无法自动刷新

  6. 注释 Ctrl+ / 快速注释

# HTML

超文本标记语言 就是给普通的文本打上标记 HTML 标签也叫元素 所以开发过程中若想查看浏览器中HTML结构就可以去Elements 中去查看

# 文档声明

意义 告诉浏览器此页面是以什么格式写的 文档声明必须在网页的第一行

<!DOCTYPE html>   -- H5  文档声明
doc  -文档    type -类型
可以查询官方文档查看其他文档声明比如H4  XML
http://www.w3.org/QA/2002/04/waild-dtd-list.html
1
2
3
4

# 编码

为了使浏览器在渲染html不会出现编码错误可以通过meta标签来配合

**原则1：存储时务必采用合适的字符编码否则：无法存储，数据会丢失 原则2：存储时采用那种方式编码，读取时就必须采用相同方式解码否则：数据能呈现，但数据错乱（乱码）

<meta charset="utf-8">
1

# HTML 设置语言

1.主要作用：
让浏览器显示对应的翻译提示
有利于搜索引擎优化


<html lang="zh-CN"> 
第一种写法（语言-国家/地区）
zh-CN:中文-中国大陆
第二种写法（语言-具体种类）已不推荐使用
zh-Hans:中文-简体
1
2
3
4
5
6
7
8
9
10
11

# HTML标准结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我是一个标题</title>
    </head>
     // 写在body里的都是想呈现在页面中的
    <body>
        
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11

# 语义化

语义：含义

h1-h6 语义（含义） 标题

p 语义（含义） 段落

div 语义没有

语义化 :标签默认的效果不重要，语义最重要！

优点：

1.代码的可读性强 清晰

2.有利于SEO（搜索引擎优化）爬虫

3.方便设备解析 屏幕阅读器

# 标签

在html学习标签时 效果不重要 语义最重要

# 行内元素|块级元素

规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）

规则1：行内元素中能写：行内元素、但是不能写块级元素

特殊规则：h1-h6（不能相互嵌套）

特殊规则：p标签中不能写块级元素

块级元素（独占一行）
<h1>
<p>
行内元素(不独占一行）
<input>
1
2
3
4
5

# 标签属性

  1. 用于给标签提供附加信息
  2. 可以写在起始标签或单标签中 <标签名 属性名=“属性值” 属性名=“属性值” > 属性名=“属性值” 就是标签属性
  3. 有些只有属性值 disabled
<marquee loop="1">  循环一次
1

# 文本标签

用于包裹：词汇、短语等

通常写在排版标签里面

排版标签更宏观，文本标签更微观

文本表通常都是行内元素

标签名 语义 单双标签
em 着重语气 双
strong 十分重要比em强调一些 双
span 用于通常包裹短句 双

# 图片标签

尽量不同时修改宽和高会使比例失调

标签名 语义 单双标签
img 图片src:图片路径alt:图片说明 width :图片宽度 px heigh:图片高度 单

# 常用标签

标签名 标签含义 单双标签
br 换行 单
hr 分隔 单
pre 按原文显示（一般用于在页面嵌入大段代码） 双

# 相对路径/绝对路径

相对路径 绝对路径
以当前位置作参考点，去建立路径 ./ 同级 / 下一级 ../ 上一级 ./可以忽略不写 是以根位置作为参考点大致分为 本地绝对路径 和网络绝对路径
其实就可以看成在代码中存放的位置 本地绝对路径 很少使用因为你打包放到服务器上本地路径并没有此文件 网络绝对路径如果使用的是其他人的 可能会遇到防盗链

# 常见图片格式

图片类型 特点
.jpg 图片展示的不是太清晰把细节容易忽略的地方忽略了 ，占空间小,不支持动图、透明图
.png 支持透明图 相对于.jpg把细节的地方也做了处理使图片更加清晰、占空间大
.bmp 网页一般很少使用 占空间极大 图片没有经过压缩
gif 仅支持256种颜色 支持动图、支持简单透明背景 、网页中使用
webap 支持上述图片的格式 但是兼容性不太好
base64 本质是一串特殊的文本，要通过浏览器打开，传统看图应用无法打开 原理是把图片转成base64编码形成一段文本 使用在img标签里 src中把base64放进去

# 超链接

a 标签 是一个行内元素

<a href="" targent="_self"></a>  覆盖本身标签页
<a href="" targent="_self"></a>  打开新的标签页
注意点 
1.代码中多个空格 多个回车，都会被网页解析成一个空格
2.虽然a标签是一个行内元素，但是a元素可以包裹除自己以外的任何元素


a标签可以打开图片或视频等 浏览器可以打开的格式都会跳转

当浏览器不支持的格式时会 触发下载功能
 
-- 强制触发下载并起名字
<a href=""download=""></a> 
-- a 标签内执行js脚本
<a href="javascripts: alert(666);"></a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 跳转锚点

第一步设置锚点

 <!-- 通过a标签name值写锚点 -->
 <a name="zjz"></a>
    
 <!-- H5推荐使用  通过Id选择器写锚点 -->
 <p id="cat">证件照4</p>
1
2
3
4
5

第二部跳转锚点

<a href="#zjz">看证件照</a>
<a href="#">回到顶部</a>

<a href="demo.html#zjz">跳转到demo页面的zjz的锚点</a>
1
2
3
4

# 唤起应用

<!-- 唤起电话应用 -->
<a href="tel:10010">电话</a>
<!-- 唤起邮件应用 -->
<a href="mailto:10010@qq.com">邮件</a>
<!-- 短信应用 -->
<a href="sms:10010">短信</a>
1
2
3
4
5
6
7

# 列表

  1.    <h2>要把大象放冰箱分几步</h2>
    <ol>
        <li>打开门</li>
        <li>把大象放进去</li>
        <li>关上门</li>
    </ol>
    <p>我想去几个城市</p>
    <ul>
        <li>背景</li>
        <li>撒旦</li>
   
        <li>说啥</li>
    </ul>
    <p>无序列表</p>
    <dl>
        <dt>
            做好笔记
        </dt>
        <dd>笔记时我门的抓手哦</dd>
    </dl>
   
weight:设置单元格的宽度 同列所有单元格都受影响
height:设置单元格的宽度 同列所有单元格都受影响
align:设置单元格的水平对齐方式
valign: 设置单元格的垂直对齐方式
rowspan:指定要跨的行数
colspan:指定要跨的列数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

# 表格

标签名 标签语义 常用属性 单双标签
table 表格 width:设置表格宽度
height: 设置表格最小高度，表格最终高度可能比设置的值大
border:设置表格边框宽度
cellspacing:设置单元格之间的间距		 双
thead 表格头部 height:设置表格头部高度
align:设置单元格的水平对齐方式，可选值如下
1.left:左对齐
2.center:中间对齐
3.right:右对齐
valign:设置单元格的垂直对齐方式，可选值如下:
1.top：顶部对齐
2.middle：中间对齐
3.bottom:底部对齐		 双
tbody 表格主体 常用属性和thead相同 双
tr 行 常用属性和thead相同 双
tfoot 表格脚注 常用属性和thead相同 双
td 普通单元格 weight:设置单元格的宽度 同列所有单元格都受影响
height:设置单元格的宽度 同列所有单元格都受影响
align:设置单元格的水平对齐方式
valign: 设置单元格的垂直对齐方式
rowspan:指定要跨的行数
colspan:指定要跨的列数		 双
th 表头单元格 常用属性和td相同 双

# 表格—跨行与跨列

rowspan: 指定要跨的行数
colspan: 指定要跨的列数
1
2

# 表单

# 表单基本结构

标签名 标签语义 常用属性
form 表单 action：用于指定表单提交地址（需要与后端人员沟通）
target: 用于控制表单提交后，如何打开页面 _self : 在本窗口打开 _blank: 在新窗口打开
method: 用于控制表单提交方式 post get
input 输入框 type： 设置输入框类型 目前用到的值是text 表示普通文本 name： 用于指定提交数据的名字 （需要与后端人员沟通）
button 按钮
iframe 框架标签 （在网页中嵌入其他文件） 属性 name 可以与target 属性配合 iframeborder是否显示边框 0或者1

# fieldset/legend

fieldset 可以为表单控件分组

legend 标签是分组的标题

← 前端基础CSS →