您的位置：首页 > Web前端 > HTML

HTML认识和常用标签

2019-08-12 22:08 204 查看

HTML简介

HTML是用来做网页
HTML：Herp Text MarkUp Language 超文本标记语言
超文本：超：超链接包含超链接的文本
标记语言
标记：标签
语言：制作网页的语言
一个网页是由多个标签组成的

语法介绍

html是由浏览器来解析，所以不需要安装任何编译环境
html文档的基本结构

<!DOCTYPE html>   声明文档
<html>   是网页中最大的标签，所有内容都要写在此标签内
<head>  header 头 主要用于书写网页的设置，一般写不直接显示给用户的内容（字符编码的设置，网页的标题，引入外部的css文件，引入外部的JavaScript文件）
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>  body 身体 网页的身体部分  网页中只要是显示给用户的内容，都写在此标签内

</body>
</html>

head和body都是html的子标签
HTML标签写法分类：
双标签：<标签名></标签名>
单标签：<标签名>

HTML标签的属性：

属性的值必须使用双引号引起来

HTML不会报错，所以注意双标签不要忘记写闭合

HTML标签不区分大小写，规范要求都是小写

HTML常用标签

h1-h6 标题标签
双标签，有默认样式，字体变大，变黑，变粗，会自动换行
一般一个页面中h1只使用一次，h2-h6可以重复使用

p 段落标签

双标签，有默认的样式，会自动换行

常见的实体字符

&nbsp;    空格
&gt;      大于号
&lt;      小于号
&copy;    版权标志

i标签，em标签，b标签，strong标签，u标签
i标签单纯的字体斜体
em 也是斜体只不过具有强调意义
b 加粗
strong 加粗具有强调意义
u 下划线
以上都是双标签

br标签，hr标签

br 强制换行
hr 水平线

img 图片标签

单标签

属性：
src 图片的地址
title 鼠标移入的提示信息
alt 图片加载失败时的替代内容

可以使用网络图片或者本地的图片

使用的是本地的图片资源

相对路径：相对于当前文件来去查找指定的资源

…/ 代表上一级路径
windows下根目录根目录一般是盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示

绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源

推荐使用相对路径

列表标签

无序列表

ul: 声明一个无序列表
li: 列表项
type(了解): 默认disc 圆
square 方块
circle 空心圆

ul中的直接子元素必须是li

有序列表

ol:声明一个有序列表 li: 列表项
type: 1 代表数字默认就是数字
a 代表小写字母
A 代表大写字母
i 小写的罗马数字
I 大写的罗马数字

start: 指定以第几个开始只能写数字

自定义列表

dl:声明一个自定义列表 dt:列表的标题
dd:列表描述项

a 标签超链接

超连接a：双标签，页面跳转 href：跳转的地址，如果不给值跳转当前页面
target：_blank 新打开一个窗口加载跳转后的页面

跳转到当前页面的指定位置锚点

给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到本地html文件的指定位置
a标签的href属性的值为指定页面中标签的id的值

表格标签

table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距 **
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列

水平对齐方式：align

center 居中
right 靠右对齐

如果给tr设置设置当前行的所有

如果给td/th 设置当前一列

valign: 默认垂直居中

bottom:靠下对其

单元格合并：

跨行合并 rowspan: 设置当前列占几个行的高度

跨列合并

colspan: 设置当前列占几个列的宽度

表单

form ：声明一个表单域

属性：

action:提交地址如果不写，提交到当前页面
method: 指定提交数据的方式 get: 默认是get提交将数据明文显示在地址栏相对不太安全
数据大小受浏览器限制

post:

理论上数据大小不受限制表单的数据是要提交给后台，提交数据的格式一般是键值对

Uname=用户在用户名框输入的内容所以表单控件除了按钮都要加name属性

表单控件的属性：

name: 必须添加作为提交数据的key

value: 代表值
input 控件的type属性: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框同一组单选框的name属性的值必须相同
必须设置默认值 value属性

checkbox: 多选框

必须设置默认值 value属性

hidden: 隐藏域

有些时候有些数据不希望用户看到和修改所以可以使用隐藏域

select>option: 下拉选框 option 选项

option 必须设置value

textarea:文本域/多行文本输入框双标签

提交按钮：

```
<button>按钮</button>
```

单纯的按钮：

在form 表单域中 type=“button” 只是单纯的按钮没有提交意义

checked 设置单选框和多选框的默认选中状态

selected 设置下拉选框的默认选中状态给option设置

disabled 禁用

了解：

type=“image” 图片按钮

按照标签效果分类：

块标签：会自动换行(独占一行)，h1-h6、p、ul、li、ol、dl、dt、dd、table、tr

行标签：

不会自动换行，标签和标签并排在一行显示,没有宽高属性，I、b、u、em、strong

行内块：

不会自动换行，标签和标签并排在一行显示，可以设置宽高，Img、input

没有默认样式的快标签和行标签

div 块标签，没有默认样式，一般配合css做网页的布局
span 行内标签，没有默认样式，一般也是配合css去使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML认识和常用标签

HTML简介

HTML是用来做网页

HTML：Herp Text MarkUp Language 超文本标记语言

超文本：超：超链接 包含超链接的文本

标记语言