html笔记
html笔记
一、网页介绍
1.常见的浏览器有：IE 火狐 谷歌（重要的） sarfari（苹果默认系统） opera 共五大浏览器
2.市场份额： 谷歌 ie8
备注：win7的系统自带是IE8
二、浏览器内核
1.内核分为两个部分：渲染引擎和JS引擎
2.各个浏览器的内核：
- Trident（IE内核）
- Gecko（firefox）特点是：公开性
- Wekit（safari）：chrome一开始也是用的这个内核，后来换成bink
- chromium/bink（chrome）：bink是wekit的分支
- Presto（opera）opera：后来换成bink
三.Web的结构标准
1.结构分为三部分：结构 ，表现，行为
2.三部分详情
结构标准：结构标准用于对网页元素进行整理和分类，主要包括xml和xhtml两部分，作用使内容更清晰，更有逻辑性
样式标准：表现用于设置网页元素的版式，颜色大小等外观样式，主要指css，主要是用于修饰内容的样式
行为标准：行为是指网页模型的定义以及交互的编写，主要包括DOM和ECMAScipt（简称js）两部分，内容的交互以及操作效果
理想中的编码一定要有：html（结构），css（样式），js（行为）
四.html的认识
1.html：是超文本标签语言，主要是通过html标签对网页中的文本，图片，声音等内容进行描述。
2.html的语言语法骨架格式
<html>根标签
<head>头标签
<title>title>标题标签
head>
<body>主体标签
body>
html>
（1）html 标签：作用所有html中标签的一个根节点
（2）head标签：用于存放：title，meta，base，style，script，link，head中必须要设置title标签
（3）title标签：让页面有一个属于自己的标题
（4）body标签：页面再得主体部分，用于存放所有的html标签
3.html的标签分类
（1）双标签
格式为：<标签名>内容
注意：<>标签开始部分
标签结束部分
/关闭符号
（2）单标签
也成为空标签
格式为：<标签名/>
4.html的关系
（1）嵌套关系（包含意义）
（2）并列关系
注意：如果两个标签之间是嵌套关系，要按tap键缩进字符，这样才会更加的美观
5.开发工具：
sublime快速生成方法–输入html或者！，再按一下tap键就可以了
这个是告诉我们使用的哪个版本，这个是代表是html 5的版本 字符集,utf-8是目前做常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312， 以后就同意用utf-8，这就避免出现字符集不统一而引起乱码的情况了jb2312是代表简单中文
BIG5是代表繁体中文，港澳台等用
GBK包含全部中文字符，是gb2312的扩展，加入对繁体字的支持，兼容gb2312
utf-8则包含全世界所有国家需要用的字符集
五.标签学习
1.排版标签
（1）标题标签 h 双标签
h1–h6字体依次减小
语法格式为：文本内容
属性：align：left，center，right
示例：
<body>
<h1 align="center">
文本内容
h1>
body>
（2）段落标签 p 双标签
语法格式为：
文本内容
<body>
<p>
内容
p>
body>
自动换行功能
（3）水平线标签：
此标签 属于单标签
属性：
width：设置水平线的宽度
size：设置水平线的高度
color：设置水平线的颜色
align：设置水平线的位置
left靠左
right靠右
center中间
示例：
<body>
<hr width="660px" height="2opx" align="left" color="red"/>
body>
( 4 )换行标签：
此标签属于单标签
示例：
<body>
<p>
文本内容文本内容<br />
文本内容文本内容<br />
文本内容文本内容<br />
p>
body>
( 5 )div span 标签 ： 没有语义
div：布局，分割的意思，其实有很多div组合网页
span：跨度，跨距；范围
语法格式：
2.文本格式化标签
（1）加粗标签 ：
b 或者 strong，建议加粗用strong，它有语义
语法格式：文本内容文本内容
（2）斜体标签：
i 或者em，建议用em
语法格式：文本内容文本内容
（3）加删除线标签：
s 或者del,建议使用del
语法格式：文本内容文本内容
（4 )加下划线标签：
u或者ins，不赞同使用u
语法格式：文本内容文本内容
注意：b i u s 只用使用，没有强调的意思；strong em ins del语义更强烈
3.标签的属性
属性就是特性，在使用html制作网页时，如果想让html标签提供更多的信息，可以使用html标签的属性加以设置，基本语法格式如下：
<标签名 属性1=“属性值1” 属性2=“属性值2” …>文本内容
注意：
1.标签可以拥有多个属性，必须在开始标签中，位于标签名后面
2.属性之间不分先后顺序，标签名与属性,属性与属性之间均以空格分开
3.任何标签的属性都有默认值，省略该属性则取默认值
4.图片标签 ：img 属于单标签
该语法中src属性用于指定图像文件的路径和文件名，他是img中的必须的属性
语法格式为：
img所有的属性：
src：图像的路径
alt：图像不能显示时的替换文本
title：鼠标悬停时显示的内容
width：设置图像的宽度，xhtml中不支持%页面百分比
height：设置图像的高度，xhtml中不支持%页面百分比
border：设置图像边框的宽度
示例：
**5.链接标签：
a 英文单词anchor的缩写，意思是锚，铁锚的
基本语法格式如下：文本或者图像
属性：
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能
target：用于指定链接页面打开方式，其取值有self和blank两种，，其中self为默认值，blank为在新窗口打开
示例：
<a href="http：//baidu.com" target="_blank">百度a > ，其中black是在新窗口打开
<a href="http：//baidu.com" tagert="_self">百度a > ，其中self是默认是在本窗口打开
注意：
1.外部链接需要添加http：//www.baidu.com
2.内部链接直接链接内部页面名称即可，比如首页
3.如果当时没有确定链接目标时，通常将来凝结标签的href属性定义为：#（即href=”#“），表示该链接为一个空链接
4.不仅可以创文本超链接，在网页各种网页元素中，如图像，表格，音频，视频等都可以添加为超链接。
6.锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两部分
1.使用文本
2.使用相对应的id名标注跳转目标的位置
示例
<a href="#3">个人介绍a>
<p id="3">
文本内容
p>
7.base标签
此标签可以设置整体链接的打开状态
语法格式为：属于单标签
示例：
<html>
<head>
<title>网页跳转title>
<meta charset="UTF-8"/>
<base target="_blank" />
head>
<body>
<h3>网页跳转h3>
<hr />
<a href="http://www.baidu.com">百度a>
<a href="http://www.taobao.com">淘宝a>
<a href="http://www.jd.com">京东a>
body>
html>
8.特殊字符
常用的字符：
空格字符： ；
小于号字符：< &it；
大于号字符：> >
版权字符（圆圈里面有个c）：©；
9.注释标签
加了注释标签之后浏览器是不执行的，注释里面的内容浏览器是看不见的，但是作为html的一部分，它会下载到用户的计算机上，查看源代码就可以看见
10.图像路径
（1）相对路径
1.图像文件和html文件位于同一个文件夹：只需要输入图像的文件的名称即可，如
2.图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用/隔开，如
3.图像文件位于html文件的上一级文件夹：在文件名之前加入"…/",如果是上两级则需要是…/…/,依此类推，如
（2）绝对路径：完整的网络网址
例如：https://www.baidu.com
11.列表标签
（1）无序列表：没有顺序性 ul
语法格式：
<.ul>
注意：
1.
2.
之间相当于一个容器，可以容纳所有的元素3.无序列表会带着自己的样式属性
<h2>水果h2>
<ul>
<li>香蕉li>
<li>苹果li>
<li>橘子li>
ul>
（2）有序列表：ol，属性为type ：1 I A a,
如果不进行设置，就会默认数字123
<.ol>
示例
<h2>水果h2>
<ol type="a">
<li>香蕉li>
<li>苹果li>
<li>橘子li>
ol>
（3）自定义列表 dl
语法格式：
<.dl>
实例
<dl>
<dt>热门城市dt>
<dd>北京dd>
<dd>上海dd>
<dd>广州dd>
dl>
12.表格标签
1 创建表格的语法格式为：
...... .....| 文本内容 | 文本内容 |
| 文本内容 | 文本内容 |
<table>
<tr>
<td>文本内容td>
<td>文本内容td>
......
tr>
<tr>
<td>文本内容td>
<td>文本内容td>
.....
tr>
table>
（1）table用于定义一个表格
（2）tr是用于定义表格中的一行，必须嵌套在table表格中，有几对tr就是对应几行
（3）td用于定义表格中的单元格，必须嵌套在tr标签中，一对tr中包含几对td，就表示该行有几个单元格。
注意：
中只能嵌套 标签中就像一个容器，能容下所有的元素2表格的属性
-
border：设置表格的边框（默认border=0无边框），常用像素值为1
-
cellspacing：设置单元格与单元格边框之间的空白间距，常用像素值为2
-
cellspadding：设置单元格内容与单元格边框之间的空白间距，常用像素为1
-
width：设置表格的宽度，像素值为px
-
height：设置表格的高度，像素值为px
-
align：设置表格在网页中的水平对齐方式，包括left,right,center
3表头标签：th
表头一般位于表格的第一行或者第一列，其文本加粗居中，只需要用th双标签代替td双标签即可
示例
<table>
<tr>
<th>姓名th>
<th>性别th>
<th>电话th>
tr>
<tr>
<td>小王td>
<td>男td>
<td>123456td>
tr>
table>
4表格标题：caption
定义和用法
<table>
<caption>我是表格标题caption>
table>
注意：caption标题必须紧跟table标签之后，只存在表格里面，只能对每个表格定义一个标题，通常这个标题会被居中于表格之上
示例
<table>
<caption>个人信息caption>
<tr>
<th>姓名th>
<th>性别th>
<th>电话th>
tr>
<tr>
<td>小王td>
<td>男td>
<td>123456td>
tr>
table>
5表格结构（需要了解）
在使用表格进行布局时，可以将表格划分为头部，主体和页脚，具体情况如下：
:用于定义表格的头部必须位于
位于
示例:
<html>
<head>
<title>小说排行榜title>
<meta charset="UTF-8"/>
head>
<body>
<table border="1" cellspacing="0" cellpadding="2" align="center">
<caption><h3>小说排行榜<h3>caption>
<thead>
<tr>
<th>排名th>
<th>关键词th>
<th>趋势th>
<th>今日搜索th>
<th>最近七日th>
<th>相关链接th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>鬼吹灯td>
<td><img src="../../图片素材/下降趋势.jpg" width="20" height="20"/>td>
<td>345td>
<td>123td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>2td>
<td>盗墓笔记td>
<td><img src="../../图片素材/上升趋势.jpg" width="20" height="20"/>td>
<td>124td>
<td>34566td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>3td>
<td>西游记td>
<td><img src="../../图片素材/上升趋势.jpg" width="20" height="20"/>td>
<td>212td>
<td>7654td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>4td>
<td>东游记td>
<td><img src="../../图片素材/下降趋势.jpg" width="20" height="20"/>td>
<td>23td>
<td>76545td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>5td>
<td>甄嬛传td>
<td><img src="../../图片素材/下降趋势.jpg" width="20" height="20"/>td>
<td>121td>
<td>2345td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>6td>
<td>水浒传td>
<td><img src="../../图片素材/上升趋势.jpg" width="20" height="20"/>td>
<td>1234td>
<td>3446td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>7td>
<td>三国演义td>
<td><img src="../../图片素材/上升趋势.jpg" width="20" height="20"/>td>
<td>1245td>
<td>866755td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
tbody>
<table>
body>
html>
6合并单元格（难点）
跨行合并：rowpan 跨列合并：colspan
合并单元格的方法：
将多个内容合并的时候，就会有多余的单元格把剩余的单元格需要删除，例如：把三个td合并成一个，那就多余2个，需要把2个删除
公式：删除的个数=合并的个数-1
合并的顺序：先上后下 先左后右
示例
<html>
<head>
<title>个人简历title>
head>
<body>
<table border="1" cellspacing="0">
<tr>
<td width="100">姓名td>
<td width="100">td>
<td width="100">籍贯td>
<td width="100">td>
<td width="100" rowspan="4">td>
tr>
<tr>
<td>个人规划td>
<td colspan="3">td>
tr>
<tr>
<td>学校名称td>
<td colspan="3">td>
tr>
<tr>
<td>个人介绍td>
<td colspan="3">td>
tr>
table>
body>
html>
总结表格：
1.表格提供了html中定义表格式数据的方法
2.表格中由行中的单元格组成
3.表格中没有列元素，列的个数取决于行的单元格个数
4.表格不要纠结于外观，后期是需要用css调格式
13.表单学习
1表单介绍：
目的是为了搜集用户信息
在我们网页中，我们也需要跟用户进行交互收集用户资料，此时也需要表单
在html中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域构成。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所有程序的url地址，以及数据提交到服武器的方法，如果不定义表单域，表单中的数据就无法传送到后台服务器。
2 input控件（重点）:input是输入的意思
在上面的语法中，input标签为单标签，type属性为最基本的属性，是类型的意思，其取值有很多种，用于指定不同的控件类型，除了type属性之外，input标签还可以定义很多其他的属性，其常用属性如下表表示：
语法格式：
此标签属于单标签
(1)text的内容是可见的
示例：
手机号<input type="text" />
（2）password的内容是不可见的，用于写密码
<input type="password"/>
(3)radio是单选框
性别<input type="radio"/>男<input type="radio"/>女
注意：
radio如果是一组，我们必须他们命名为相同的名字name，这样就可以从多个选项中选出其中的一个
示例：
性别<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
(4)checkbox多选
用法如下：
<td>喜欢的类型td>
<td>
妩媚<input type="checkbox" name="love" value="1" />
柔美
可爱
小鲜肉
型男
气质
td>
(5)button是普通按钮
用法两种，表达的效果一样
<input type="button" value="登录"/>
<button>注册button>
（6）
这几种的示例如下
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="image" src="../../图片素材/zhuce.png" width="80"/>
上传图片或者文件<input type="file" name="" id="" />
（7）checked选择控件的默认选项，单选和多选
<td width="100">性别td>
<td>
男<input type="radio" name="sex" value="1" checkde="checked"/>
女<input type="radio" name="sex" value="0"/>
td>
3 label标签（需要了解）
lable标签为input元素定义标注（标签）
作用为：用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点
如何绑定元素
for属性规定lable与哪个表单元素绑定
示例
<label for="male">label>
<input type="radio" name="sex" id="male" value="male"/>
4 textarea控件（文本域）
如果需要输入大量的信息，就会需要到此标签，是属于双标签，通过textarea标签可以轻松的创建多行文本输入框，基本语法格式如下
<textarea cols="每行中的字符数" rows="显示的行数">
textarea>
示例
<td>自我介绍td>
<td><textarea name="self" cols="25" rows="6">textarea>td>
5 下拉菜单
使用selec控件定义下拉菜单的基本格式如下
<select>
<option>选项1option>
<option>选项2option>
<option>选项3option>
select>
示例
<td>生日td>
<td>
<select name="year">
<option value="4">请选择年option>
<option value="3">1980option>
<option value="2">1990option>
<option value="1">2000option>
select>
注意：
1、中至少包含一对。
2、在option中定义selected="selected"时，当前项即为默认选中项。
13.6 表单域
在html中，form标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器，创建表单的基本语法如下
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
form>
常用属性：
1、action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2、method
用于设置表单数据的提交方式，其取值为get和post
3、name
用于指定表单的名称，以区分同一个页面中的多个表单
注意：
每个表单都应该有自己的表单域
shift+空格，不用加空格标签也可以空格
有什么问题可以查文档
```html + 回车
无序列表 ctrl + shift + ]
 插入图片
ctrl + 1 2 3 4 5 6 标题
---+回车 分割线
**要加粗的内容** 加粗
示例
<td>生日td>
<td>
<select name="year">
<option value="4">请选择年option>
<option value="3">1980option>
<option value="2">1990option>
<option value="1">2000option>
select>
[外链图片转存中…(img-5rZ79oy6-1575368600310)]
注意：
1、中至少包含一对。
2、在option中定义selected="selected"时，当前项即为默认选中项。
13.6 表单域
在html中，form标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器，创建表单的基本语法如下
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
form>
常用属性：
1、action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2、method
用于设置表单数据的提交方式，其取值为get和post
3、name
用于指定表单的名称，以区分同一个页面中的多个表单
注意：
每个表单都应该有自己的表单域
shift+空格，不用加空格标签也可以空格
有什么问题可以查文档