前端学习-HTML5基础

weixin_57896572

已于 2022-10-07 10:29:50 修改

阅读量143

点赞数 1

文章标签： html 前端学习

于 2022-08-27 10:39:15 首次发布

本文链接：https://blog.csdn.net/weixin_57896572/article/details/125586003

版权

1 HTML语法规范

1）成对出现，也称为双标签；2）HTML标签都出现在<>里；3）也有一些单标签，例如：<br/>

标签关系

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

1）包含关系。

<html>

</html>

2）并列关系。

2 HTML基本结构标签

<html>

<head>

</head>

<body>

网页的主要内容

</body>

</html>

注：网页的基本结构包括html,head,title,body四个基本元素。

3 网页开发工具

visual studio code（安装！）

安装插件（安装后要重启才可以生效）

1）在浏览器中打开预览 open in browser

2）自动重命名配对的HTML/XML标签 Auto Rename Tag

3）追踪至样式 CSS Peek

VSCode 工具生成骨架标签新增代码

1）<!DOCTYPE> 文档类型声明，告诉浏览器使用哪种版本显示网页

<!DOCYTPE html> 指文档使用HTML显示网页，这个标签必须放在文档的最前面！不属于html标签，就是文档类型声明标签。

2）<html lang="en"> 表明当前页面的显示语言，其中“en”指英文，“zh-CN”指中文。

3）<meta charset="UTF-8"> 规定HTML文档使用哪种字符编码。‘UTF-8’指万国码。

4 HTML常用标签

1）标题标签 <h1> - <h6>

标题一共六级选，文字加粗一行显，由大到小依次减，从重到轻随之变。

注：标题都会变粗，且会独占一行，重要性从一级到23456级依次递减。

2）段落标签<p>

代码中的换行符通过浏览器后并不会分段，要想分段只能使用段落标签。同样代码中的多个空格通过浏览器后只会显示成一个空格。

特点：段落和段落之间会留有一定的空隙；文本文字会按照浏览器窗口的大小自动换行。

3）换行标签<br />

强制换行。br 后有个空格才是 / 。

特点：单标签；<br />只是简单的开始新的一行，没有垂直间距，而段落之间会自动插入垂直间距。

4）文本格式化标签（重点记住粗体和斜体，其余可以查）

粗体 <strong> <b>

strong比b语义更强烈，推荐使用strong

斜体 <em> <i>

em比i语义更强烈，推荐使用em

删除线 <del> <s>

del比s语义更强烈，推荐使用del

下划线 <ins> <u>

ins比u语义更强烈，推荐使用ins

5）盒子标签 <div> 和 <span>

这两个标签没有语义，就只是盒子，用来装东西。

特点：<div> 一个标签占一行；<span>标签一行可以放多个。

6）图像标签 <img>

单标签。用于定义HTML页面中的图像。

例如：<img src="图像URL" />，src指图片的路径。

图像属性：

src 图像路径。需要连着图像后缀名。必须要有这个属性！
alt 图像替换文本。当图片显示不出来时，会自动展示图像alt中存放的文字。
title 提示文本。鼠标放到图像上时提示的文本。
width 设置图像的宽度。
height 设置图像高度。注：一般宽度和高度只改变一个，另一个会等比例缩放。避免图片失帧。
border 设置图片边框属性。eg：border="15"。一般会在CSS里设置图像边框。

注意‼️

1）图像标签可以有多个属性，必须写在标签名的后面。

2）图像属性之间是不分前后顺序的。属性之间必须用空格分割。

3）属性采用键值对的形式，即key="value"

路径：

1）目录文件夹：普通文件夹。存放着网页所需要的相关素材。

注：在vs code新建文件夹时，可以先打开目录文件夹来简化操作。

2）根目录：打开目录文件夹的第一层就是根目录。

3）相对路径：图片相对于HTML页面的位置

同一级路径：在同一个目录下，直接用图片名字即可。
下一级路径/：在下一个目录里。eg.src="images/img.jpg"
上一级路径../：在上一个目录里。eg.src="../img.jpg"

4）绝对路径：从电脑的盘开始。绝对路径的符号\

注1：绝对路径换个电脑后就会不可使用。所以一般建议写相对路径。

注2：也可以将完整的网络地址当作绝对路径。

7）超链接标签<a>

语法格式：

<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target默认为"_self"，在当前页面打开。将其设置为"_blank"可以新建窗口打开页面。

链接分类：

外部链接。必须以http://开头。
内部链接：网站内部页面之间的相互链接。和引用图片一样，写相对路径即可。
空链接：href="#"
下载链接： href 地址链接的是文件.exe .zip 等压缩包文件形式，会下载这个文件。
网页元素的链接：除了文字，图片、表格等网页中的各种元素都可以添加超链接。
锚点链接：点击链接后，可以快速定位到页面中的某个位置。实现方式：先给指定元素添加链接href="#名字"；给想跳转到的元素标签上添加id="名字"。

5 HTML中的注释和特殊字符

1）注释

以的形式，快捷键：ctrl+/

2）特殊字符（重点记着空格，大于和小于，其余可以现查）

空格： 
小于号<：<
大于号>：>

6 标签下

6.1 表格标签

<table>：定义表格

<tr>：定义表格的行，必须嵌套在table中。

<td>：定义表格中单元格，必须嵌套在tr中。table data

<th>：表头单元格，里面的文字会居中加粗。table head

1）表格属性：（要写到table标签里）

align：设置表格相对对齐方式。属性值：center、left、right
border：设置表格的边框。默认无边框。属性值：1或者""
cellpadding：单元格内文字和单元格边框之间的距离。默认为1。
cellspacing：单元格和单元格之间的距离，默认为2。
width：设置表格宽度
height：设置表格高度

2）表格结构标签

<thead>：表格表头区域。包含<th>，不能替换th。

<tbody>：表格主体区域，包括除了表头一行之外的其他行。

注：这两个都包含在table标签里。

3）合并单元格

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

目标单元格（合并代码）：跨行上侧为目标单元格，跨列左侧为目标单元格。

4）合并单元格三部曲：

确定跨行还是跨列
找到目标单元格，在其中写上合并代码。eg. <td rowspan="2"></td>
删除多余单元格

6.2 列表标签

列表是用来布局的。

1）无序列表

<\ul>

注1：无序列表之间各个列表项之间没有顺序；

注2：ul标签里面只能放li标签；

注3：li标签里可以放任何标签。

注4：默认每个列表项之间有小黑点，小黑点是可以改变的，也可以用CSS把它用去掉。

2）有序列表

<\ol>

注1：ol标签里面只能放li标签；

注2：li标签里可以放任何元素；

注3：默认每个列表项之间有数字序号，是可以改变的，也可以用CSS把它用去掉。

3）自定义列表definition list

自定义列表通常用于对术语或名词进行解释和描述。形似大哥领着小弟玩。

<dl>
<dt><\dt> defition title

<dd><\dd> defition data

<\dl>

注1: dl里只能包括dt和dl，形似带路，带头，弟弟。dt和dd里可以包括任意类型标签。

注2: dt和dd个数没有限制，经常是一个dt对应多个dd

6.3 表单标签

表单就是为了收集用户信息。表单主要由表单域、表单控件、提示信息三部分组成。

1）表单域<form>

表单域是一个包含表单元素的区域，它的作用是把表单元素信息提交给服务器。

属性：

action：指定接收表单数据的服务器url地址。属性值是URL地址。
menthod：提交方式。属性值为GET或POST
name：表单域的名字。

2）表单控件

input输入表单元素：用于收集用户信息。input是个单标签。

属性：

type属性：决定表单元素的外观。正常文本text，密码password，单选radio，复选框checkbox，提交submit，reset清除表单里的所有数据，button普通按钮，file文件域，可上传文件。
name属性：表单元素的名字。当想实现单选和多选时，各个选项的表单名字要用同一个。
value属性：表单的值。传入后台时，会把表单的value值传到后台。
checked属性：单选按钮和复选框可以设置默认选中某按钮。checked ="checked "
maxlength属性：字段中字符的最大长度。

注：name和value是每个表单元素都要有的属性值，主要是给后台人员使用。

<label>标签（增加用户体验）

用于绑定一个表单和文字。点击label标签内容，会自动聚焦到表单元素上。将label标签的for属性和表单元素的id属性设置相同。

eg. <label for="nan">男</label>

select下拉表单元素

如果有多个选择让用户选择时。

</select>
注1: select里至少包含一对option

注2: selected= "selected " 表示当前项目为默认选中项。

textarea 文本域

需要大量多行输入文字时。常用于留言板、评论等。

属性：（仅了解，一般用不到）

cols：每行可以输入的字符数
rows：可以输入几行

7 查阅文档

推荐网址：

百度
W3C/W3school
MDN: http://developer.mozilla.org/zh-CN/

8 网页地址栏图标

要想实现网页地址栏里的小图标，需要3步：

制作小图标PNG图片
利用图标转换工具，如：比特虫，将PNG格式的图标转换为48*48的favicon.ico格式的图标
将图标引入<head></head>页面。一般会放在文件根目录下

/*记得修改文件路径*/
<link rel="shortcut icon" href="favicon.ico" />

9 网站TDK三大标签SEO优化

SEO（搜索引擎优化），指利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

title：网站名（产品名）-网站的介绍（尽量不超过30个字）
description：简要说明网站主要是做什么的。多采用“我们是...”、“我们提供...”等语句。
keyword：页面关键字，搜索引擎的关注点之一。采用关键字1,关键字2,关键字3的样式，一般关键字为6-8个。