本文是个人对HTML学习做的一些笔记以及个人对HTML在前端中的定位和作用的理解和看法
HTML是一种标记语言, 定义了网页的基本结构。相对于传统编程语言来说学习成本更低,相比于老旧的Java的GUI学习更加便利,代码更有可读性,学习快的话几个小时就可以学完。作为前端三大组件最基础的部分,HTML负责把前端显示的页面基础布局,就像搭建最初的一间房子,而装修工作则交给CSS。
HTML中最主要内容就是大部分的标签,但是常用的标签实际上并不多,还是应该在平时练习当中自己体会哪种标签用的比较多,用的多了自然也会熟悉HTML的各种布局在各种网页可以运用灵活
以下是我的个人笔记作为分享:
HTML
定义:超文本标记语言
超文本:链接
标记:也叫标签,带尖括号的文本
基本骨架
<html> <head> <title>网页标题</title> </head> <body> 网页主体 </body> </html>
html: 整个网页
head: 网页头部,存放给浏览器看的代码,例如CSS
body: 网页主体:存放给用户看的代码
title: 网页标题
标签
标签语法
标签成对出现,中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/
双标签:成对出现的标签
单标签:只有开始标签,没有结束标签
<br> 换行 <hr> 水平线
标签的关系
父子关系(嵌套关系): 标签里面嵌套标签
兄弟关系(并列关系)
排版标签
标题标签
标签名:h1~h6(双标签)
<h1>一级标题</h1>
h1一般只用一次
段落标签
标签名:p(双标签)
段落之间有间隙
属性名 | 作用 |
---|---|
width | 宽度 |
height | 高度 |
background-color | 背景色 |
换行和水平线标签
<br> 换行 <hr> 水平线
浏览器不识别代码中的回车键换行
文本格式化标签
strong/b
: 加粗
em/i
: 倾斜
ins/u
: 下划线
del/s
: 删除线
strong,em,ins,del
带有强调含义,一般情况下用这些
图像标签
<img src="图片的URL"alt=""> //""里面 ./操作
src用于指定图像的位置和名称,是<img>的必须属性
属性 | 作用 | 说明 |
---|---|---|
alt | 替换文本 | 图片无法显示的时候现实的文字,解决加载问题 |
title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
width | 图片的宽度 | 值为数字,没有单位 |
height | 图片的高度 | 值为数字,没有单位 |
超链接标签
超链接:点击跳转到其他页面
<a href="网址">显示的内容(点击就可以进入网址)</a>
href
属性值是跳转地址,是超链接的必须属性
href="#" 空链接
跳转到本地文件:相对路径查找
<a href="网址" target="_blank">显示的内容(点击就可以进入网址)</a><!--打开一个新网页跳转网址-->
音频标签
<audio src="音频的URL"></audio>
常见属性
属性 | 作用 | 特殊说明 |
---|---|---|
src (必须属性) | 音频URL | 支持格式:MP3、Ogg,Wav |
controls | 显示音频控制面板 | |
loop | 循环播放 | |
autoplay | 自动播放 | 为了提升用户体验,浏览器一般会禁用自动播放功能 |
在HTML5里面,如果属性名和属性值完全一样,可以简写为一个单词
视频标签
<video src="视频的URL"></video>
属性 | 作用 | 特殊说明 |
---|---|---|
src (必须属性) | 视频URL | 支持格式:MP4、WebM,Ogg |
controls | 显示视频控制面板 | |
loop | 循环播放 | |
muted | 静音播放 | |
autoplay | 自动播放 | 为了提升用户体验,浏览器支持在静音状态下自动播放 |
无语义的布局标签
作用:布局网页(划分网页区域,摆放内容)
div(大盒子):独占一行
span(小盒子):不换行
<div> <span> </span> </div>
注释
<!--注释内容-->
路径
. | 当前文件所在文件夹 |
---|---|
.. | 当前文件上一级文件夹 |
/ | 进入某个文件夹里面 |
列表
作用:布局内容排列整齐的区域
分类: 无序列表,有序列表,定义列表
无序列表
ul嵌套li,ul是无序列表,li是列表目录 <ul> <li>第一项</li> <li>第二项</li> ··· </ul>
ul标签里面只能包含li标签
li标签里面可以包含任何内容
有序列表
ol嵌套li,ol是有序列表,li是列表目录 <ol> <li>第一项</li> <li>第二项</li> ··· </ol>
ol标签里面只能包含li标签
li标签里面可以包含任何内容
定义列表
dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,,dd是定义列表的描述/详情 <dl> <dt>列表标题</dt> <dd>列表描述/详情</dd> ··· </dl>
dl标签里面只能包含dt和dd标签
dt和dd标签里面可以包含任何内容
表格
table嵌套tr,tr嵌套td/th
标签名 | 说明 |
---|---|
table | 表格 |
tr | 行 |
th | 表头单元格 |
td | 内容单元格 |
提示:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线
表格结构标签
标签名 | 含义 | 特殊说明 |
---|---|---|
thead | 表格头部 | 表格头部内容 |
tbody | 表格主题 | 主要内容区域 |
tfoot | 表格底部 | 汇总信息区域 |
合并单元格
1、保留最左最上单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并:保留最上单元格,添加属性rowspan
跨列合并:保留最左单元格,添加属性colspan
2、删除其他单元格
表单
作用:收集用户信息
input标签
<input type="..."> //type属性值不同则功能不同
属性值 | 说明 |
---|---|
text | 文本框,用于输入单行文本 |
password | 密码框,输入数据隐藏 |
radio | 单选框 |
checkbox | 多选框 |
file | 上传文件 |
(颜色:color
,日期:date
,日期时间:datetime-local
,周选择器:week
,滑块:range
(min,max,value),数字:number
(min,max,value,step(设置步长)))
单选框radio
属性名 | 作用 | 特殊说明 |
---|---|---|
name | 控件名称 | 控件分组,同组只能选中一个(单选功能) |
checked | 默认选中 | 属性名和属性值相同,简写为一个单词 |
性别: <input type="radio" name="gender" checked>男 //两个gender相同触发单选 <input type="radio" name="gender">女
上传文件file
<input type="file" multiple> 添加multiple实现文件多选功能
占位文本
作用:提示信息
<input type="..."placeholder="提示信息">
下拉菜单
<select> <option> </option> <option> </option> <option selected> </option> //加selected菜单默认显示 ... </select>
文本域
作用:多行输入文本的表单控件
<textarea row="10" cols="50">...</textarea> row能放多少行,超过下拉框显示 cols每行多少个
右下角有拖拽功能,未来都会禁用
用css
设置尺寸
label标签
作用:网页中,某个标签的说明文本
用label绑定文字和表单的控件关系,增大表单控件的点击范围
写法一
label标签只包裹内容,不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man"> <label for="man">男</label>
写法二
使用label标签包裹文字和表单控件,不需要属性
<label><input type="radio">女</label>
按钮
<button type="">按钮</button>
type属性值 | 说明 |
---|---|
submit | 提交按钮,点击后提交数据到后台(默认功能) |
reset | 重置按钮,点击后将表单控件恢复默认值 |
button | 普通按钮,默认没有功能,一般配合js使用 |
<form action=""> <!--action=""发送数据的地址--> ... <button> </button> <!--form表单区域,button被form嵌套才能使用 --> </form>
字符实体
作用:在网页中显示预留字符(和显示转义字符\同理)
符号 | 实体名称(未加;) |
---|---|
空格 |   |
< | < |
> | > |
敲空格网页只识别一个