HTML5笔记
web入门
- HTML5笔记
- HTML
-
- 标签语法
-
- 标签关系
- 注释
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 文本格式化标签
- 图像标签
- 超链接标签
- 多媒体标签
-
- 音频标签
- 视频标签
- 列表标签
-
- 无序列表
- 有序列表
- 定义列表
- 表格标签
-
- 表格结构
- 合并单元格
- 表单标签
-
- input标签
- 下拉菜单
- 文本域
-
- label标签
- 按钮标签
- 无语义的布局标签
- 字符实体
HTML5笔记
入门基础技术点
html5 + css3 +移动web
基础环境 ： 编辑器用vscode 浏览器用谷歌
HTML
概念：超文本标记语言 HyperText Markup Language
超文本是链接
标记 也叫标签带尖括号的文本
标签语法
- 标签成对出现，中间包裹内容
- <> 里面放英文字母也就是标签名字
- 结束标签比开始标签多 /
例如加粗文字
要加粗的文字
HTML 是骨架 网页模板 CSS是样式 js是交互
骨架内容
- html ：整个网页
- head：网页头部，存放给浏览器识别的代码例如css代码
- body： 网页主体存放给用户看的代码，例如图片、文字
- title：网页标题
vscode中快速生成骨架可以使用!+回车或则+tab
标签关系
父子关系(嵌套关系)
兄弟关系(并列关系)
<html>
<head>head>
<body>body>
html>
html标签与head和body就是嵌套关系
head与body就是并列关系
注释
格式：
快捷键ctrl+/
标题标签
标签名：h1~h6（双标签，中间包裹内容）
会有换行效果 ， 级别标题
h1标签一般一个页面只出现一次 作为主标题或者网页logo
h2~h6则可以多次使用
段落标签
标签名：p(双标签)
效果：形成换行效果
<p>需要显示换行效果的文字p> a
<p>需要显示换行效果的文字p> b
换行标签
单标签:
水平线标签
单标签:
文本格式化标签
效果：突出重点
常见格式：加粗、倾斜、下划线、删除线等
| 标签名(自带强调意义) | 效果 | |
|---|---|---|
| strong | b | 加粗 |
| em | i | 倾斜 |
| ins | u | 下划线 |
| del | s | 删除线 |
都是双标签
图像标签
单标签
<a href="https://www.baidu.com">跳转到百度a>
<a href="./index.html" target="_blank">跳转到indexa>
多媒体标签
音频标签
<audio src="音频URL">audio>
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src *** | 音频URL | mp3 、ogg、wav |
| controls | 显示音频控制面板 | controls=“controls” 在html5中如果属性名和属性值完全一样可以简写为一个单词 |
| loop | 循环播放 | 同上 |
| autoplay | 自动播放 | 同上 (浏览器一般默认禁用此属性) |
视频标签
双标签
<video src="视频URL">video>
常见属性 : 与音频标签的controls loop autoplay 一样 支持MP4、WebM、Ogg格式 多出一个muted属性 : 静音播放 并且视频的autoplay需要配合着muted属性才能使用
列表标签
作用:布局内容整齐的区域
三种格式 : 无序列表(多用)、有序列表、定义列表
无序列表
标签名: ul 嵌套 li, ul是无序列表 ，li是列表条目
<ul>
<li>条目1li>
<li>条目2li>
...
ul>
有序列表
标签名: ol 嵌套 li, ol是无序列表 ，li是列表条目
<ol>
<li>条目1li>
<li>条目2li>
...
ol>
定义列表
标签名: dl 嵌套 dt 和dd , dl是定义列表 ，dt是定义列表的标题，dd是定义列表的描述
<dl>
<dt>标题1dt>
<dd>描述1dd>
<dd>描述1-2dd>
<dt>标题2dt>
<dd>描述2dd>
....
dl>
表格标签
标签：table嵌套 tr ，tr嵌套 td/th
在网页中，table默认没有边框线，使用border属性可以为表格添加边框线
| 标签名 | 作用 |
|---|---|
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
表格结构
用表格结构标签将内容划分区域，让表格结构更清晰
| 标签名 | 含义 | 说明 |
|---|---|---|
| thead | 表格头部 | 表头 |
| tbody | 表格主体 | 主要内容 |
| tfoot | 表格底部 | 信息汇总 |
具体格式如下(因为一般表格结构是否添加对于视觉无伤大雅所以一般取消表格结构 直接采用表格标签)
<table>
<thead>
<tr>
<th>表头th>
tr>
thead>
<tbody>
<tr>
<td>内容1td>
tr>
tbody>
<tfoot>
<tr>
<td>汇总1td>
tr>
tfoot>
table>
合并单元格
跨行合并 添加属性rowspan (会保留最上列单元格)
取值是数字表示需要合并的单元格数量
跨列合并 添加属性colspan (会保留最左列单元格)
取值是数字表示需要合并的单元格数量
注意 : 不能跨结构合并
表单标签
表单一般用于登陆注册界面
input标签
<input type="...">
| 属性 | 说明 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
文本框属性: placeholder 提示文字(浅色文字)密码框也能用。
单选框属性:name可以实现单选功能 将需要单选的选项标签中添加属性name 属性值自定义 相同的name属性值分为一组来实现单选功能; 如果想实现默认选中功能要添加属性checked 当然这个属性和属性值相同只需要添加checked即可
upload file属性:如果要上传多个属性添加multiple属性即可
**checkbox的默认选中:**同样是属性checked
input不会换行
下拉菜单
标签：select 嵌套 option ，select是下拉菜单整体 ，option是菜单中的每一项。
城市:
<select>
<option>北京option>
<option>上海option>
<option>广州option>
<option>深圳option>
select>
默认显示属性: selected
文本域
作用：多行输入文本的表单控件
特点是右下角可以放大缩小一般都会禁用，尺寸一般由css设置
<textarea>默认提示文字textarea>
label标签
作用：网页中，某个标签的说明文体，使用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。就像单选性别的时候点文字“男”或者“女”都能选中 支持很多表单控件
写法一
<input type="radio" id="man">
<label for="man">男label>
写法二
<label><input type="radio">女label>
按钮标签
button
<button type="">按钮button>
| type属性 | 说明 |
|---|---|
| sumbit | 提交按钮，提交数据到后台(默认功能) |
| reset | 重置按钮，表单恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合js使用 |
注意: 所有表单控件都要写在表单区域from中 只有这样才能实现功能。
<from action="发送数据的地址">
...
...
from>
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
<div> 独占一行div>
- div 独占一行
- span 不换行
<span> 不换行span>
字符实体
作用：在网页中预留字符
空格
< <
> >