HTML

Posted on Views:

前言

HTML介绍

HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言（markup language）。标记语言是一套标记标签（markup tag）

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合

为什么需要Web标准

不同浏览器显示同一html文件的页面或排版会有差异，通过web标准可以使不同浏览器展示统一内容。同时使网站易于维护，也能提高浏览速度

Web标准的构成

构成 说明
结构（Structure） 用于对网页元素进行整理和分类，现阶段主要学HTML
表现（Presentation） 设置网页元素的版式、颜色、大小等外观，主要指CSS
行为（Behavior） 指网页模型的定义及交互的编写，主要学Javascript

最佳体验方案：结构、表现、行为文件相分离

开发工具

必然VSCode

插件

插件名 用途
open in browser 右键即可在浏览器中预览
auto rename tag 一个标签被修改时，自动修改另一个对应的标签
设置->文本编辑器->格式化，前两个打开 粘贴内容或者保存时，自动格式化
Live Server 修改代码保存后浏览器自动更新（开分屏效率更高，且必须保证要用VSCode打开一个目录）占用了5500端口
vscode-icons 设置文件图标
Easy LESS less文件不能直接引入到html中，此插件可以自动把less编译为css文件
会了吧 翻译…

VSCode内置了Emmet（前身为Zen Coding）工具，用于提高前端开发效率，通过简单的缩写语法将代码扩展为完整的HTML和CSS结构。在多个编辑器和IDE中得到了集成，如VSCode，Sublime Text，Atom等

例如输入ul>li.item$*5，按下Tab键，Emmet会生成一个包含5个带有类名的无序列表。输入!，生成网页基本骨架

Emmet提供了许多内置的缩写和功能，但也可以自定义缩写、片段来满足开发需求

LESS（Learning Style Sheets）是一种CSS预处理器，扩展了纯CSS的功能，能够更高效地编写和维护样式表。适用于需要管理复杂、大型的样式表项目

快捷键

Shortcut 用途
Shift+Alt+上下键 快速复制一行
Ctrl+D 依次选择相同的单词（可长按
Ctrl+Alt+上下键 添加多个光标
Ctrl+G 快速定位至某一行
Shift+Alt+鼠标拖动 选中区块

HTML语法

标签

<>内的关键词就是标签，通常成对出现，</>是结束标签。也有特殊的单标签

双标签关系可以分为两类：包含关系和并列关系

基本结构标签

每个网页都会有一个基本的结构标签（骨架标签）

标签名 定义 说明
html HTML标签 页面中最大的标签，称为根标签
head 文档头部 head标签中必须要设置的标签是title
title 文档标题 页面的网页标题
body 文档主体 包含所有页面内容
<!DOCTYPE> 文档类型声明 告诉浏览器使用哪种html版本来显示网页
lang 语言声明 被浏览器用来识别是否需要提供页面翻译
charset=”UTF-8” 字符编码 尽量写成统一的UTF-8，不要写成utf8或UTF8 
1
2
3
4
5
6
7
8
<html>
    <head>
        <title> 第一个页面 </title>
    </head>
    <body>
        sbzbc
    </body>
</html>

注意：

  • 无论多少个空格键和回车键，在网页中都会被替换为一个空格键

  • 文档类型声明位于第一行（在<html>标签之前），且不属于HTML标签，就是一个文档类型声明标签

  • 合并单元格：跨行合并rowspan时，代码写在最上面的单元格；跨列合并colspan时，代码写在最左侧单元格

常用标签

见菜鸟教程，MDN

标签名 注意
div 单独占一行，后面的内容会自动换行，大盒子
span 一行可以有多个span，小盒子
img 对于width和height属性，只设置其中一个，另一个跟着缩放。属性与属性之前以空格分割，不分先后顺序
属性采取键值对格式，即：属性=”属性值”
a href属性必须是http链接，值为#时表示空链接，值为.exe .zip文件时，点击会下载，若为其他文件，想要点击下载，需要带上download属性，否则会在浏览器中打开，download也可以设置值，下载自定义的文件名。target属性默认值为_self，值为_blank时，在新窗口打开
锚点链接：快速定位页面位置，若设置为空链接，会直接跳转到顶部
table 有许多属性，但一般不用，用CSS实现更好的效果
ul 只能嵌套li标签，但li标签可以容纳所有元素。
无序列表带有自己的样式属性，但通常使用CSS来设置。ol有序列表同理
dl(Definition List) dt(Term定义术语)，dd(Description定义描述)
form 表单域会把它范围内的信息提交给服务器，和后端相关
三个属性：action指定服务器url地址；method指定提交方式get/post；name为表单域命名
input表单元素 表单控件，type不同的属性值对应不同的控件，可以为每个表单控件设置name属性来区分
label 通常与input联合使用，用于绑定一个表单元素：label的for属性值与input的id属性值相同
select表单元素 利用快捷键Shift+Alt+上下箭头，至少包含一对
textarea表单元素 多行文本输入。场景：留言板/评论
rows属性设置显示的行数，cols设置每行的字符数（实际开发中不会使用，会使用CSS来改变大小）		 
1
2
3
<!--超链接-->
<a herf="#222">点击跳转至主页</a>
<h1 id="222">主页</h1>
1
2
3
<!--label使用-->
<label for="eee">请输入：</label>
<input type="text" id="eee"><br>
1
2
3
4
5
6
7
<!--selcet语法-->
籍贯：
        <select>
            <option>山东</option>
            <!-- 定义安徽为默认选项 -->
            <option selected="selected">安徽</option>
        </select>

input表单元素

type的属性值：

属性值 描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）如“点击发送验证码”
checkbox 定义复选框
text 定义单行的输入字段，默认宽度为20字符，maxlength限制最大字符数（一般不使用，会用正则表达式代替）
file 定义”浏览按钮“，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，字符将被掩码
radio 定义单选按钮，如果想实现多选一，那么每个radio的name值必须相同，再加上value值，供后台人员使用。同checkbox可以设置checked属性，即checked="checked"规定此input元素在页面首次加载时就被选中
submit 定义提交按钮，会把表单数据发送到服务器，然后后端进行相应处理
reset 点击后清空所填值，还原为默认值

路径补充

相对路径

以代码所在文件的位置出发，去寻找目标文件

相对路径分类 符号 举例
同一级路径 img src=”cat.jpg”
下一级路径 / img src=”images/cat.jpg”
上一级路径 ../ img src=”../cat.jpg”

绝对路径

从盘符开始的路径，只对本地有效，推荐相对路径

图片的URL也算是一种绝对路径

注意

相对路径是斜杠/，而绝对路径是反斜杠\

特殊字符

见菜鸟教程

vercel部署

本地部署至vercel需要配置文件，运行vercel生成.vercel目录，包含project.json文件，说明了项目ID和个人ID

注意

  • 需要命名为index.html，大多数Web服务器和托管平台默认会寻找名为index的文件作为网站的默认文档，当访问网站的根目录时，会自动加载名为index的文件。只是一个不成文的规定

HTML暂时先到这，下一步CSS……