HTML基础部分
HTML(Hypertext Markup Language 超文本标记语言)
网页大致可以分为结构(HTML)表现(CSS)行为 (JS)
元素和标签是一样的,元素就是标签,标签就是元素。
- 基础元素**(代码注释方法:ctrl+/ 文字注释方法:ctrl+shift+/ 或者用尖括号里面加!-- – 的中间表示煮熟)**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- [1]
doctype元素,独一无二的,都以他为开头。可以注释掉,不影响网页,但是在源代码中还是会显示
-
[2]
根元素
lang=en代表语言是英文的 -
[3]
头元素
meta元素:提供多字访问,源数据
charset元素,UTF-8编码:编码的,保证不会出现乱码
title元素 标题 -
[4]
body元素 内容都在body元素中输入,面向对象的,网页中可以输出的
标签可以嵌套,但是不可以交叉嵌套 -
单位:px,百分比,em
其中百分比是相对其父元素的百分比,
em和百分比类似,相对于当前元素字体大小,1em=1 font size,当字体大小发生变化是,em也随之发生变化
2.body元素(br/可以用来换行 )
- h1元素:一级标题,重要性仅次于title标签,将文字以较大的形式输出(还有h2—h6,字体逐渐变小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>世界如此美好</h1>
</body>
</html>
- p标签:表示一个段落,一个标签独占一行,自动换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>a</p>
<b>lalala</b>
<b>lalala</b>
</body>
</html>
- b标签:粗体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<b>你却如此暴躁</b>
</body>
</html>
- em元素:斜体 (强调语气)
- strong元素:粗体 (强调内容)
对于H5中规定,对于不需要着重的内容而是单纯的加粗或者是斜体就可以用b和i标签
H5中使用small标签来表示一些细则一类的内容,比如:合同中的小字,网站的版权声明
small便签的内容会比他的父元素中的文字要小一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<em>不好不好</em>
</body>
</html>
- cite标签(网页中所有的加书名号的内容都可以用cite标签,表示参考的内容)
- q标签(表示一个短的引用 即行内引用,q标签引用的内容,浏览器默认会加上引号)
- blockquote标签(表示一个长引用即块级引用 )
- sup标签(表示上标)
- sup标签(表示下标)
- del标签(表示一个删除的内容,del标签中的内容,会自己添加删除线)
- ins标签(ins内容会自动添加下划线)
- 需要页面中直接编写一些代码,pre是一个预格式标签,会将代码的格式保存,不会忽略多个空格,code专门用来表示代码,我们一般结合使用pre和code来表示一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>赵薇<sup><a href="500294514.jpg">[1]</a></sup></p>
<p>H<sub>2</sub>O</p>
<p>
<del>19.99</del>
<br>
16.66
</p>
</body>
</html>
- u元素:下划线(但是HTML5不推荐使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<u>啦啦啦啦</u>
</body>
</html>
- s元素:文字中间有一道线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<s>爱冒险的梦</s>
</body>
</html>
- hr标签(自结束标签,生成一条水平线)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>a</p>
<p>a</p>
<hr/>
</body>
</html>
- 实体(一些特殊元素不能使用,例如大于号之类的,因为与标签冲突,所以一般用一些特殊符号表示,这些特殊符号称为实体,又叫转义字符串)
< <; > >; 空格  ; 版权符号:©;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
a>b
<br/>
a<b
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
©爱冒险的梦
</body>
</html>
- a标签:构成超链接,后面href属性代表所链接的url;有target属性,又分为blank属性和self属性;blank属性:构成的url点击后以新的窗口打开。self属性即默认属性,就是在当前网页中进行打开url。(超链接可以用#做占位符,可以跳转到顶部 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="500294514.jpg" target="_blank">选这个</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="500294514.jpg" target="_self">选那个</a>
</body>
</html>
- table 元素 (表格元素)
tr元素 :代表着表格中的一行;可以嵌套着td元素,代表着一个单元格
th元素:标题,字体加粗,且居中
border属性:边框属性,但是不推荐使用,后面可以跟1px,代表着1像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
</tr>
</table>
</body>
</html>
拆分单元格
colspan用来合并行;
rowspan用来合并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
</body>
</html>
行合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>aaa</td>
<td colspan="2">ccc</td>
</tr>
</table>
</body>
</html>
列合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="2">AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
</body>
</html>
- 列表元素(li:列表中的项)(有序列表和无序列表可以互相嵌套)
有序列表ol(默认升序,可以进行嵌套的,在一个有序列表中可以嵌套多个有序列表,从而实现标题的整齐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>为什么喜欢我
<li>你长得太好看</li>
<li>你也太可爱了</li>
<li>无需理由</li>
</ol>
</body>
</html>
reversed元素:html最新元素,实现列表可以降序排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol reversed>为什么喜欢我
<li>你长得太好看</li>
<li>你也太可爱了</li>
<li>无需理由</li>
</ol>
</body>
</html>
type元素:可以改变排序的前标,是123还是ABC都可以选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="A">为什么喜欢我
<li>你长得太好看</li>
<li>你也太可爱了</li>
<li>无需理由</li>
</ol>
</body>
</html>
- 无序列表(ul)顺序用黑点排列(由于每个浏览器的符号大小不一样,所以我们一般都不用默认的符号,用css中ul的list-type的none去掉)ul和li都是块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>
- 定义列表(dl dd dt来创建一个定义列表)
dl有两个子标签,dt为被定义的内容,dd是对定义内容的描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>中国</dt>
<dd>最强大的国家</dd>
</dl>
</body>
</html>
-
表单元素 form元素(用户可以自己输入东西进去,就相当于填写账号密码的那种)
- method属性
- input元素
- action属性
- textarea元素
- select属性
- datalist属性
input元素(单行文本框,有29种属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input>
</form>
</body>
</html>
text属性(默认就是text属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
效果图和上面一样
value属性(占位符,自动填充上所写的字)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text" value="喜欢点个赞好吗">
</form>
</body>
</html>
placeholder属性(不占文本框位置的,就相当于那个密码账号的提示,没点进去之前是暗的,点进去会没)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text" placeholder="密码">
</form>
</body>
</html>
maxlength属性(最大字符数,超过就输不进去)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text" maxlength="8">
</form>
</body>
</html>
size属性(拓宽单行文本框,文本框显示所规定的字符数)
readonly属性(只读)
type中password属性 (placholder)实现以黑点形式出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="password" placeholder="密码">
</form>
</body>
</html>
- type中button属性(按钮属性)
分为三种形式:1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="button">
</form>
</body>
</html>
2.button按钮(和js合作,用来绑定事件的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<button></button>
</form>
</body>
</html>
3.提交按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="submit">
</form>
</body>
</html>
type中range属性(数字滑动块 )
max:滑块最大值
min:滑块最小值
step:每次滑动的距离
value:起始的位置,默认为0,在滑表的中间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="range" >
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="range" step="12" max="200" min="-100" value="0">
</form>
</body>
</html>
type中number属性(可以手动输入的,可以调节大小的值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="number" min="0" max="100" value="90">
</form>
</body>
</html>
- type中checkbox属性(相当于打对勾的功能,只有选择才能传输到服务器中去,传送到服务器上是布尔型)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="checkbox"选择 >
</form>
</body>
</html>
- type中radio属性(和checkbox功能一样,但是这个选择后就不能取消了,生成一组固定选项)
name属性,当多个选项出现时,由name选项可以实现三选一的效果
checked属性,默认一个选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>你最喜欢的水果
<br/>
<input type="radio" name="a">苹果
<input type="radio" name="a"">葡萄
<input type="radio" name="a">芒果
</form>
</body>
</html>
这样就实现三选一的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>你最喜欢的水果
<br/>
<input type="radio" name="a" checked>苹果
<input type="radio" name="a"">葡萄
<input type="radio" name="a">芒果
</form>
</body>
</html>
这样当什么都不选的时候,默认选择第一个
- select元素(可以进行选择,但是不可以自己输入)
option元素:可供选择的项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>你最喜欢的水果
<select>
<option>香蕉</option>
<option>橙子</option>
<option>西瓜</option>
</select>
</form>
</body>
</html>
- datalist元素(实现选择,类似是select,但是这个可以自己输入,不过要用id引导)
用id引导后,用input元素中的list属性来进行引导
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>你最喜欢的水果
<input type="text" list="1">
<datalist id="1">
<option>香蕉</option>
<option>西瓜</option>
<option>橙子</option>
</datalist>
</form>
</body>
</html>
- type中的data元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>你最喜欢的水果
<input type="date">
</form>
</body>
</html>
- type中的color元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="color">
</form>
</body>
</html>
-
input的hidden属性
隐藏某些东西,但是在提交表单中还是会显示,value输入值 -
input的image属性
实现图片按钮功能,导入图片,src属性代表地址的选择,width代表图片的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="image" src="500294514.jpg" width="80px">
</form>
</body>
</html>
- type中的file按钮上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="file">
</form>
</body>
</html>
multiple属性:可以上传多个文件
required属性:必须上传一个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="file" multiple>
</form>
</body>
</html>
-
img标签即图片标签,引入外部图片,src属性是图片的地址,也就是图片路径(相对路径,相对于当前资源所在目录的位置,如果图片在当前网页的上一个文件夹,可以用…/来返回上一级 例:…/2.gif)width属性是宽度,height属性是高度(一般开发不设置这两个图片,设置了图片可能会失真),alt是设置图片的备用内容,设置图片的描述
(当图片找不到时候,会出现alt备用的内容,搜索引擎会通过alt属性来识别不同的图片,如果没有alt属性,搜索引擎不会对img图片进行收录) -
img属性和a标签相结合构成图片可以点击进入url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<a href="0722.1html.html" target="_blank">
<img src="500294514.jpg" width="100px">
</a>
</form>
</body>
</html>
- 客户端分区相应图
- map元素(客户端分区响应图的关键元素)
- area元素(可以有多个,每个代表图像上可以被点击的一部分)
area元素分为两类
第一类:点击后导航到指定的URL
第二类:shape元素和coords元素,起共同作用
shape值有四个:rect矩形区域 coords:代表矩形区域,用四个整数隔开,四个整数分别是图像左边缘,图像上边缘,图像右边缘,图像下边缘
circle圆形区域 coords:图像左边缘到圆心的距离,图像右边缘到圆心的距离,圆的半径
poly多边形区域 coords:至少六个逗号,每个是顶点
default覆盖整个区域 coords:无数据
map能起作用,要使用usemap属性。先map个name,再usemap使用,后面加#name,不用a标签构成超链接,定位响应区域用image的input定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input元素</title>
</head>
<body>
<form>
<input type="image" src="20(2).png" width="400px">
</form>
<img src="20(2).png" width="400px" usemap="#lalala">
<map name="lalala">
<area href="0722fuxi.html" shape="rect" coords="15,15,137,130" target="_blank">
</map>
</body>
</html>此时点击响应的部分会跳转到设定的url上了
- video元素中基本属性
src:视频地址
height:视频高度
width:宽度大小
autoplay:自动播放
contros:播放控制键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="001_如何学习JAVA300集(一定要看…………).mp4" controls height="440" width="600px"></video>
</body>
</html>
preload:预先载入视频 none:不会载入视频。metadata:只载入第一帧。
auto:请求下载整个视频,默认行为。loop:循环播放。poster:视频载入时显示图片,视频的封面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="001_如何学习JAVA300集(一定要看…………).mp4" controls height="440" width="600px" poster="500294514.jpg"></video>
</body>
</html>
因为没有一个浏览器支持所有视频格式,所以我们要把mp4和ogv两种格式
source元素:设置视频格式的元素,包括src和type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="001_如何学习JAVA300集(一定要看…………).mp4" controls height="440" width="600px" poster="500294514.jpg">
<source src="001_如何学习JAVA300集(一定要看…………).mp4" type="video/mp4">
<source src="001_如何学习JAVA300集(一定要看…………).ogv" type="video/ogg">
</video>
</body>
</html>此时所有的格式浏览器都可以使用
audio元素(插入音频)
src:音频地址,autoplay:自动播放
source元素(设置元素格式)有两个属性 src属性:地址,type属性:格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio src="001_如何学习JAVA300集(一定要看…………).mp3" controls ">
<source src="001_如何学习JAVA300集(一定要看…………).mp3" type="audio/mp3">
<source src="001_如何学习JAVA300集(一定要看…………).ogg" type="audio/ogg">
<audio/>
</body>
</html>