HTML笔记
HTML的笔记(上)
什么是HTML
HTML：Hyper Text Markup Language(超级文本标签语言)
HTML页面结构
有两部分组成：
文档类型声明
作用：告诉浏览器使用的是HTML的哪个版本
语法：在网页的最顶端编写：
<!doctype html>
HTML页面部分
作用：表示页面的开始和结束
语法：在文档类型声明的下面编写一对<html>标记
<html></html>
Html标签里面有两个标签，分别是
<head></head>作用：表示网页的头部<body></body>作用：表示网页的身体，以后页面中所有的要显示的内容，都要写在body标签里HTML语法 标记语法 标记又叫标签或者元素，在网页中表示一些功能，必须使用<>括起来，标记分为两大类封闭类型标记 也叫双标记，必须成对出现，有开始和结束标签。语法：<标记>内容</标记>eg:<html><head><body><title><p><b><s><u><i><sup><sub><h1>~<h6><pre>非封闭标记 也叫单标记，或空标记，只有一个标记组成，即表示开始也表示结束。语法：<标记>或者<标记/>eg:<!doctype html><meta><br><hr>标签的嵌套 在一个标签中，出现另外一个标签，从而形成层叠关系，里面的标签又称为“子标签”，外面的标签又称为“父标签” 推荐写法： 在子元素前，使用一个Tab缩进，表示层级关系注释 不会在页面中显示，只是让程序员方便读代码语法：<!--注释的内容-->
注意：注释标签不能嵌套，也不能出现在其他标记结构中>
eg:<head <--错误的注释 -->>
<head> 中的内容
指定网页的编码格式<meta charset=”utf-8”>
指定网页的标题<title>捞月亮的渔夫</title>
特殊字符的处理
转义字符
表示一个空格
< 表示一个<
> 表示一个>
© 表示©
¥ 表示 ¥
<br> 表示回车或换行<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标
<sup></sup> 上标作用：在页面中以醒目的方式显示文本<h1>这是一级标签</h1>
这是二级标签
<h3>这是三级标签</h3>
这是四级标签
<h5>这是五级标签</h5>
这是六级标签
允许通过属性对标签进行修饰
属性
- align 作用：标记内容的水平对齐方式
语法：
属性必须声明在开始标签中
<标签 属性名=”属性值”></标记>
多个属性之间用空格隔开
<标签属性名=”属性值”属性名=”属性值”></标记>
eg:<h1>~<h6>、<p>
取值
- left 左对齐
- center居中对齐
- right右对齐
eg:
<h1 align="center">骆驼祥子</h1>骆驼祥子
段落元素
表示一段文字,独占一行
标签：<p></p>
预格式化
保留HTML代码中的回车和空格
语法：<pre></pre>
网页中的图像
用于表示网络中任意资源(图片、视频、音频、文件)的位置（或路径）
URL：统一资源定位符(Uniform Resource Locator)
路径的表现形式：
1.绝对路径：从文件所在的最高级目录开始查找所经过的路径
2.相对路径从当前文件位置出开始查找所经过的路径
相对路径口诀：
同目录，直接用（直接填写图片名）
子目录，先进入，再使用
<img src="1/1.jpg" >
父目录，先返回，再使用
../表示返回上一级目录图像的标签：
<img>
- src(必须属性)：要显示的图片的url（相对/绝对）
- width：设置图片宽度，单位是px或%
- height：设置图片高度，单位是px或%
- alt：鼠标移至图片时显示的文字
- title：图片加载不出来时显示的文字超链接
语法：<a></a>属性：
- href：
链接到那个地址
此属性，必须有，如果没有此属性：
<a>标签将不具有超链接的功能<a href="http://www.baidu.com">百度一下</a> - target： 指定打开新网页的方式
取值： 1._self：默认值，在当前的标签页中打开新网页 2._blank：在新标签页中打开新网页
超链接的其他用法：
1.资源下载
让链接的href等于.rar或者.zip即可
<a href=”1.zip”>点我下载</a>
2.电子邮件链接
<a href=”mailto:邮箱地址”>联系我们</a>
<a href="mailto:2831843232@qq.com">
3.锚点就是网页中的一个记号，通过超链接可以迅速到达记号所在的位置.
实现步骤：
第一步：定义锚点 方式一：使用任意标签的id属性定义锚点
<h1 id=”锚点名字”>化妆品区域</h1>方式二：使用a标签的name属性，定义锚点<a name=”锚点名字”>化妆品区域</a>第二步：链接到锚点<a href=”#锚点名字”>化妆品</a>
4、返回顶部
<a href=”#”>返回顶部</a>
块级元素和行内元素
块级元素
在网页中独占一行，可以设置宽高
比如<h1>~<h6>,<p>，<hr>，<table>、div、ul、ol、li、pre、tr、td、form
行内元素
和其他元素在一行显示,大部分行内元素不可以设置宽高
<a>,<img><b><s><u><i><sub><sup>,<span>
可以设置宽高的行内元素有：<img> input;
<span>:处理同一行文本的不同形式
列表
作用：按照从上到下的方式来显示所有的数据，并且在数据前添加一些标识
列表的组成
由列表类型和列表项组成
1.列表类型：
有序列表:<ol></ol> —Order list
无序列表：<ul></ul> —Unorder list
2.列表项：
用于表示列表中的数据：<li></li> —List item
语法：<ol>
<li>篮球</li>
<li>足球</li>
<li>排球</li>
<li>台球</li>
</ol>列表属性：
有序列表在属性：
- type 作用：指定列表标识的类型
- 取值：
- 1：按数字排列，默认值
- a:按小写字母排列
- A：按大写字母排列
- i:按小写罗马数字排列
- I：按大些罗马字母排列
- start 作用：指定起始编号从几开始，是数字 无序列表的属性：
- type： 作用：指定列表标识的类型
- 取值：
- disc 默认值，实心圆
- circle 空心圆
- square 实心方块
- none 不显示标识（最常用）列表的嵌套 在一个列表项中又出现了一个列表
被嵌套的列表只能出现在<li>中，不能乱放
定义列表：
通常用对某个名词的解释
语法：
<dl></dl> —–definition list(定义列表)
<dt></dt> 定义要解释的名词
<dd></dd> 表示定义列表中对名字的解释内容
格式：
<dl>
<dt>《水浒传》</dt>
<dd>中国四大名著</dd>
</dl>结构标记
作用：用于描述整个网页的结构，提升标记的语义性
常用的语义标记
<header></header>作用：定义网页或某部分内容的头部
<nav></nav>作用：定义网页的导航链接部分
<section></section>作用：表示网页的主体内容
<article></article>作用：定义与文字描述相关的内容
<aside></aside>作用：定义页面中侧边栏的信息
<footer></footer>作用：定义某区域的底部信息
表格
标签
<table></table> 行：
表格的写法：
<table>
<tr> 行必须写在表里面
<td></td>单元格必须写在row里面
<td></td>
</tr>
<tr></tr>
</table>- table的属性:
- width 设置表格的宽度，单位是px或%
- height 设置表格的高度，单位是px或%
- align 设置表格的水平对齐方式 left/center/right
- border 设置表格的边框宽度，默认值是0，没有单位
- bgcolor 设置背景颜色，取值为对应颜色的英文
- cellspacing 表示单元格的外边距，就是单元格与单元格之间的距离
- cellpadding 设置单元格的内边距，就是单元格与内容的距离
- tr的属性：
- align
设置当前行里面内容的水平对齐方式
- 取值：left/center/right
- valign
设置当前行里面内容的垂直对齐方式
- 取值：top(顶部)middle(居中)/bottom（底部）
- bgcolor： 设置该行的背景颜色
- align
设置当前行里面内容的水平对齐方式
- td的属性：
- width,设置单元格的宽度
- height
- align
- valign
- bgcolor
- colspan: 跨列
- rowspan：跨行被跨掉的单元格必须删除 可选标记
- 表格的标题：
<caption></caption>必须写在<table>标签的第一行，一个表格只能有一个标题 - 所有的
<td>标签都可以被<th>标签替换，table header内容的标题 - 行分组可以将连续的几个行，划分到一个组中，进行统一的管理。
- 表头行分组
<thead></thead>表格中最上面的一行或几行，进行分组，就可以将这一行放在<thead>标签里 - 表尾行分组
<tfoot></tfoot>表格中最后一行进行分组的话，可以放在<tfoot>标签中 - 表主体行分组
<tbody></tbody>可以将若干个行，放在<tbody>中,进行统一设置注意：若不对table中的数据进行分组，默认都在中 - 表格的嵌套被嵌套的表格必须写在
<td>里面.
- 表头行分组
表单
作用
- 提供可以与用户****交互****的可视化界面
- 收集用户信息并提交给服务器
标签
<table></table>
属性
- action 作用：定义表单内容被提交到哪个服务器里，后面跟url
- method 作用：定义表单数据的提交方式
- 作用：定义表单数据的提交方式
- 取值：
- get默认是get
- post
可视化控件
- 分类
- input元素
- textarea 多行文本域元素
- select和option选项框元素
- 其他元素
- Input元素
- 作用：在页面中提供各种各样的输入控件
- 语法：
<input>或者<input /> - 属性：
- type 指定创建输入控件的类型
- 取值
- text 文本框
- password 密码框
- submit 提交按钮
- reset 重置按钮
- radio 单选框(单选框需要分组才能使用 使用name属性分组，让两个单选框的name值一致即可)
- checkbox 多选框
- file 文件选择框(用于上传文件)
- 取值
- value 指定控件的值
- placeholder 占位符，默认显示在控件上的文本
- readonly 只能看，不能改，没有值
- disabled 禁用控件，没有值
- type 指定创建输入控件的类型
- 表单辅助标签
<input type=”checkbox” id=”login”><label for=”login”>下次自动登录</label>
腾讯云开发者
