2020/12/08·Web·HTML5·基础语法与基础标签

最新推荐文章于 2021-08-07 10:36:56 发布

hwd18300026110

最新推荐文章于 2021-08-07 10:36:56 发布

阅读量164

点赞数

分类专栏： HTML 前端前端基础文章标签： html html5 前端

本文链接：https://blog.csdn.net/m0_45304160/article/details/110819673

版权

HTML 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

前端基础

1 篇文章 0 订阅

订阅专栏

Web·HTML5·基础语法与基础标签

一、基本骨架

点击 new file ，创建扩展名为 .html（建议）或 .htm 的文件，光标停在新建html文件中，英文状态下感叹号，然后回车：即可创建html骨架

<!-- html5 的文档声明方式，声明文档类型为 html -->
<!DOCTYPE html>
<!-- 跟标签，包含 head 和 body ，都是双标签，lang：语言 -->
<html lang="en">
<!-- head 里面可以包含很多的 meta，以及此类型的其它标签 -->
<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <!-- 作用于移动端的语句 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>refirst</title>
</head>
<!-- 网页体，网页真正显示的内容 -->
<body>
    <p>重新学习Html的第一个网页，全栈的开始</p>
</body>
</html>

二、基础标签

1.标签

双标签：开始标签和结束标签分开，例 <body> ... </body>
单标签：开始标签和结束标签一起，例 <img src="..属性值.." />
掌握标签：标签的含义（语义）；标签的属性和属性值；标签的分类

2.主体结构标签

html（双标签）
head（双标签）：内部标签有：meta、title标题、style样式、js脚本、link、…很多
body（双标签）

3.格式排版标签

标题 h1~h6：

区别	相同（含义、特点）
重点不在加粗变大	予以文字标题的含义，块级元素独占一行，双标签

段落 p：

含义	特点
修饰一段文字，赋予段落含义	块级元素独占一行，双标签

划线 hr ：

特点
画横线分割线，单标签，少用不建议使用，逐渐淘汰，可用 css 替代

换行 br：

特点
换行，单标签，文字不换行默认从左到右

按原文显示 pre：

特点
双标签，里面的内容安装原文显示，块级元素独占一行，
例：键盘输入的空格与换行都会折叠成一个空格位

布局 div：

特点
双标签，块级元素独占一行，无语义，用于布局，用于大范围

布局 span：

特点
双标签，行内元素可以和其它行内元素同一行，无语义，用于布局，用于小范围

4.文本标签

文字倾斜 em：

em	i
倾斜，双标签，语义强调	斜体，双标签，无语义

文字加粗 strong：

strong	b
加粗，双标签，强调语义语气加重	单纯加粗，双标签，无语义

删除线 del：

特点
删除线，如原价~~288~~现价188，双标签

下标 sub：

特点
下标，双标签，如 a₁a₂

上标 sup：

特点
上标，双标签，如 a^b

插入 ins：

特点
相当于下划线，双标签，如 abcdefghy

其他的了解即可：

其它了解	特点
small	文字变小
big	文字变大
font	包含文字
u	下划线
code	代码
…很多…	…都能用 css 样式替代…

5.功能标签

超链接 a：

特点
双标签，点击跳转，行内元素

属性	属性值
`target`	默认 `_self` 本窗口打开，`_blank` 新窗口打开
`title`	悬停文本，增强用户体验
`href`	跳转地址：页面刷新：`<a href="#">刷新本页面</a>` 绝对路径：`https://www.baidu.com` 或本地html文件带盘符；相对路径：`./01first.html`（同级目录）、`../01first.html`（上级目录）锚点（某文章某位置）：定义锚点`<a name="a1"></a>`或者普通标签+id唯一标识然后点击`<a href="#a1"></a>`或 `<a href="03p.html#a1"></a>` 邮件（询问调用电脑相应应用，少用）：`<a href="mailto:123@qq.com">邮件</a>` 信息（询问调用电脑相应应用，少用）：`<a href="sms:18300026110">发信息</a>` 电话（询问调用电脑相应应用，少用）：`<a href="tel:18300026110">电话</a>`

图片 img：

特点
引用图片，可以做图片链接，双标签，行内元素可以与其它同类元素同在一行

属性	属性值
src	图片来源：绝对路径或相对路径图片类型 gif：支持动画、支持透明图片类型 jpeg：支持多种颜色、不支持透明度、不支持动画、支持压缩图片类型 png ：支持透明度、不支持动画
title	悬停标题，图片介绍
alt	图片加载错误时显示
width	图片的宽，宽高只设置一个时，自动按比例缩放
height	图片的高，宽高只设置一个时，自动按比例缩放
border	图片添加边框，以后可使用 css 替代 html 来设置
usemap	`<img src="tim.jpg" usemap="#myMap" >` 图像映射：在左上角矩形范围内点击，跳转到href `<map name="myMap"><area shape="rect" coords="0,0,50,50" href="01batis.html"> </map>` shape： rect 矩形、circle 圆、 coords：相应shape的范围大小设置

列表：

特点
双标签，块级元素独占一行，父亲儿子成对出现，可嵌套

分类	形式
无序列表	ul>li，ul 标签内包含多个 li（双）标签，可以手动有序，最多最广泛
有序列表	ol>li，ol 标签内包含多个 li（双）标签，用得少（无序列表替代）属性 start：数字，起始序号是第几个属性 type：有序的类型，值可以是 1、I、i、a、A。分别代表1、2、3…I、II、III…i、ii、iii…A、B、C…a、b、c… 属性reversed：没有值，列表顺序改为降序
自定义列表	dl>dt标题>dd对标题的描述，用得少

表格table：

特点
双标签，块级元素独占一行
table>thead头\tbody体\tfoot尾>th头单元格\tr行>td列
标题含义 caption 标签，用在表格头前面，双标签

属性	属性值
table 属性 border	table 外边框边框宽度
table 属性 width	单元格宽
table 属性 height	单元格高
table 属性 align	整个 table 在网页中的水平对齐方式 left、right、center
table 属性 cellpadding	文字与边框之间的距离
table 属性 cellspacing	单元格之间的距离（框与框）
tr、td、th 属性 width、height	单元格宽高，冲突以大的为准
tr、td、th 属性 align	单元格内容水平对齐方式：left、right、center
tr、td、th 属性 valign	单元格内容垂直对齐方式：top、middle、bottom
thead、tbody、tfoot 属性 align、valign	所包含的所有单元格里面的内容水平、垂直对齐方式
td、th 属性 rowspan	设置某单元格竖跨多行
td、th 属性 colspan	设置某单元格横跨多行
bgcolor	表格背景色

html实现彩色（红）细线表格案例，以后css一个属性即可搞定
整个table背景色红，table的cellspacing为1，tr、th、td背景色白

表单form：

标签	特点	属性	属性值
input	单标签	type	text 文本类型；属性value默认值
			password 密码类型，*号替代
			radio 单选框类型，如性别，name要一样；属性check默认选中
			checkbox 复选框类型，属性name要一样，如爱好；属性check默认选中
			file
			button 普通按钮，没功能
			submit 提交功能
			reset 重置按钮
			image 图片按钮同时提交按钮
		id	一般正常情况下唯一
		name	可以不唯一，作用是方便后端取值
		maxlength	文本最大输入长度
		size	文本输入框的长度
label	双标签，用于包裹其它包含文字表单标签，点击文字也会使输入框获得焦点，
label	仅包裹文字，使用属性for指定输入框的id，点击文字也能使输入框获得焦点
select	双标签，包裹多个 option 标签，下拉列表框，如所在城市	name	后端取值方式
select	双标签，包裹多个 option 标签，下拉列表框，如所在城市	multiple	无属性值，允许按住ctl多选（不建议使用，可以用checkbox替代）
option	双标签，代表选项，包含在select双标签内部	selected	默认选中，无值
		value	后端获取选项的值
		disabled	禁止选择，如第一项提示
optgroup	用在select和option之间，给option分组（内部分级，如省市区，但又不是级联列表）	label	分组组名
textarea	文本域，能放大缩小，不好（会使布局混乱），以后属性用css改变
fieldset	使用边框包围所有表单标签，里面使用子标签legend，在框上穿插文字

代码规范：注释，方便别人阅读代码

类型	形式
html	`<!-- ... -->`
css	`/* ... */`
JavaScript	单行：`//...` 多行：`/* ... */`

6.实体转换

空格换行：

常用实体	实体符
空格	` `或` `
小于	`<`
大于	`>`
商标	`®`
版权	`©`
W3C	还有很多

其他，网页头（百度）：

<head>
  <!-- 字符集 -->
  <meta charset="UTF-8">
  <!-- 移动端设置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 描述 -->
  <meta name="description" content="描述语句">
  <!-- 若干秒之后 网页刷新、跳转，以后可以用js来跳 -->
  <meta http-equiv="refresh" content="5;url=https://baidu.com">
  <!-- 关键字 -->
  <meta name="keywords" content="若干个关键字，用于网页搜索">
  <!-- 网页标题 -->
  <title>实体</title>
</head>