HTML 基础篇
一、简介
1、 html 定义
htyper text markup language 即超文本标记语言。
何为超文本?
文本只是单纯的显示字符串,超文本还可以显示音频,视频,图片,对内容可以有不同样式的调整,即是超文本.
2、HTML语法特征
- 内容不区分大小写
- 标签结构分为单闭合、双闭合标签(标签成对显示)
- 一个及多个空白符,都会被理解成一个空白符
3、html5 定义
声明文档的类型为html5 超文本标记语言
<!DOCTYPE html>
二、<head> 标签
标签中主要写入web网站的配置信息
1、title 标签
<!-- 设置网站标题 --> <title> 这是网站标题</title>
2、link 标签
引用外部文档，常见于引用外部样式
重要属性有三个：rel、href、type。
rel : 规定文档与被链接文档之间的关系
- rel="shortcut icon" 在收藏和标题栏上用于显示的图标
- rel="stylesheet" 引用外部css样式表。
href ：资源的路径（相对路径或绝对路径）
type ： 规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。
<!-- http://www.bitbug.net/ 在线制作ico小图标的网站 --> <link href="http://www.jd.com/favicon.ico" rel="shortcut icon"> <!-- .外部引入css --> <link rel="stylesheet" href="./ceshi.css" type="text/css">
3、 meta标签
定义关于HTML文档的元数据。 重要的属性有三个：http-equiv、name、content
http-equiv ： 把content属性值关联到http头部。
- Content-Type（浏览器接受的文档类型，一般是text/html）
- refresh（网页刷新，以秒为单位）
- expires（设定网页到期时间，一旦过期，必须到服务器上重传）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/> <meta http-equiv="Refresh" content="2"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="expires" content="6 Jun 2016"/>
name 把content属性关联到一个名称。
- keywords（搜索关键字，用于搜索引擎抓取信息的显示）
- description（搜索到网站后显示的网页内容简描述）
- author（站点制作者信息）
- generator（用以说明生成工具
<meta name="keywords" content="搜索关键字"> <meta name="description" content="简要描述"> <meta name="author" content="http://cnblogs.com/suoning"> <meta name="generator" content="用以说明生成工具">
content 定义与http-equiv或name属性相关的元信息，是必要的属性。
<!-- 设置编码集 --> <meta charset="utf-8" /> <!-- 设置搜索引擎抓取页面关键字 --> <meta name="keywords" content="老男孩在线学习 老男孩python 老男孩linux 老男孩go" /> <!-- 设置网站页面的描述信息 --> <meta name="description" content="老男孩linux python go语言真的不错" /> <!-- 设置几秒后跳转 --> <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
三、body标签
1 、实体字符
含义：使用字符实体表达实际的字符含义
常见的字符，其他字符可以百度
- > >
- < <
- 空格
2、基本标签
<h1>-<h6> ：标题标签；（数字越大，标题越小）
<p>： 段落标签；
<pre>：格式化的预览标签 原型化输出所有内容；
<b> <strong>: 加粗标签；
<em> <i>: 文字变成斜体；
<sup>和<sub>: 上角标 和 下角标.
<br>:换行标签
<hr>：分割线标签
<span> <div> 没有任何语义,作用是用来划分页面布局；
3、a 超链接标签(锚标签)
浏览器的请求方式两种:
- get 从服务端请求数据 (参数在地址栏上,参数值大小在 2kb ~ 8kb )
- post 向服务端发送数据 (参数会隐藏起来,参数大小不限)
可以在跳转连接时,加上参数,get传参
ip?参数1=值1&参数2=值2&参数3=值3
重要属性有三个：href、target、name
href : 点击标签后跳转的地址
- 可以是Web上任意资源，包括图片，网页，样式，脚本文件等。
- href="" 时，刷新本页面
- href="#"时，不刷新本页面，回到页面的头部。
- href="文件路径"时，把要下载的内容直接放到href中,可以下载数据
- href="#a1" 时，跳转本页面id=a1的位置
target：文档打开时要显示的目标位置
- _blank ：新窗口中打开
- _self ：默认，在超链接所在的容器中打开
- _parent：在超链接的父容器中打开
- _top： 整个容器中打开、
- name：框架名称
name 锚记名称。作用：跳转到文档的某个地方。返回首页
# 跳转锚记书签名称 <a name="top"><h3>Top！</h3></a> <div style="height: 800px"></div> <a href="#top">top</a>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- 10 浏览器的请求方式两种: 11 (1) get 从服务端请求数据 (参数在地址栏上,参数值大小在 2kb ~ 8kb ) 12 (2) post 向服务端发送数据 (参数会隐藏起来,参数大小不限) 13 --> 14 15 <!-- 默认在本文页面跳转 --> 16 <a href="http://www.baidu.com" target="_self" > 点我跳转百度 </a> 17 <hr> 18 <!-- 指定 target="_blank" 在新页面跳转 --> 19 <a href="http://www.jd.com" target="_blank"> 点我跳转京东 </a> 20 <hr> 21 <!-- 22 可以在跳转连接时,加上参数,get传参 23 ip?参数1=值1&参数2=值2&参数3=值3 24 --> 25 <a href="./2.html?a=1&b=2&c=3" target="_blank"> 点我跳转到2.html页面 </a> 26 <hr> 27 <!-- 刷新本页面 --> 28 <a href="">测试1</a> 29 <hr> 30 <!-- 不刷新本页面 --> 31 <a href="#">测试2</a> 32 <hr> 33 <!-- 把要下载的内容直接卸载href中,可以下载数据 --> 34 <a href="../VSCodeUserSetup-x64-1.51.0.exe">测试3</a> 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>a连接,跳锚点</title> 7 </head> 8 <body> 9 <ul> 10 <li><a href="#a1" >第一章</a></li> 11 <li><a href="#a2" >第二章</a></li> 12 <li><a href="#a3" >第三章</a></li> 13 </ul> 14 15 <a id="a1">第一章内容</a> 16 <p style="width:400px;height:1000px;background-color: brown;">葫芦娃大战白骨精,蜘蛛精,蝎子精,风油精</p> 17 18 <a id="a2">第二章内容</a> 19 <p style="width:400px;height:1000px;background-color: green;">葫芦娃舅爷爷,是否成功,请代下回分解</p> 20 21 <a id="a3">第三章内容</a> 22 <p style="width:400px;height:1000px;background-color: yellowgreen;">葫芦呀被妖怪使用了色诱术,迷路了,爷爷不要了</p> 23 24 <a href="#">回到顶部</a> 25 </body> 26 </html>
4、img 图形标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>img 图片标签</title> 7 </head> 8 <body> 9 <!-- 10 设定好宽度之后,高度会随着比例进行缩放,如果刻意指定height,有可能失真 11 alt 当图片失效不能显示的时候,显示alt的文字内容 12 title 当鼠标移动在图片上时,显示文字内容 13 --> 14 <img src="./mixian.jpg" alt="米线" width="150px" title="米线" > 15 16 <a href="https://baike.baidu.com/item/%E7%B1%B3%E7%BA%BF/15739?fr=aladdin"> 17 <img src="./mixian.jpg" alt="米线" width="150px" title="米线" > 18 </a> 19 </body> 20 </html>
5、列表标签
<ul> :无序列表标签
<li>:列表中的每一项.
<ol> :有序列表标签
<li>:列表中的每一项.
<li>主要的属性有：type、value两个:
- type指明项目的类型，属性值有：A，a，I，i，1，disc（实心圆），square（实心正方形），circle（空心圆）。
- value表示序号值从几开始。
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- 无序列表 最常用 --> 10 <ul type="square"> 11 <li>唐人街探案3</li> 12 <li>温暖的抱抱</li> 13 <li>沐浴之王</li> 14 <li>小红花</li> 15 <li>拆弹专家</li> 16 </ul> 17 18 <!-- 有序列表 --> 19 <ol type="i"> 20 <li>唐人街探案3</li> 21 <li>温暖的抱抱</li> 22 <li>沐浴之王</li> 23 <li>小红花</li> 24 <li>拆弹专家</li> 25 </ol> 26 27 <!-- 定义列表 --> 28 <dl> 29 <!-- 标题 --> 30 <dt>女生曾经说过的谎言:</dt> 31 <!-- 内容 --> 32 <dd>荷叶真帅</dd> 33 <dd>你是个好人</dd> 34 <dd>我给你介绍个对象</dd> 35 <dd>下次一定</dd> 36 <dd>不要</dd> 37 </dl> 38 39 </body> 40 </html>
6、table 表格标签
- border:（表格边框）
- bgcolor（背景颜色）
- cellpadding（内边距，单元格与内容之间的距离）
- cellspacing（外边距，单元格的间距，设置为0时，表格变为实线表格）
- width（表格的宽度，可以用%或者像素，最好通过css来设置长宽）
- height 表格的高度
- 水平方向设置:
align : left center right
- 垂直方法设置:
valign: top middle bottom
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>table 里的属性</title> 7 </head> 8 <body> 9 <!-- 10 11 cellspacing 单元格之间的间距 12 cellpadding 单元格内容与边框之间的间距 13 14 水平方向设置: 15 align : left center right 16 垂直方法设置: 17 valign: top middle bottom 18 19 --> 20 <table border=1 width=500 height=200 cellspacing = 0 cellpadding = 0 > 21 22 <tr> 23 <th>姓名</th> 24 <th>性别</th> 25 <th>年龄</th> 26 <th>薪资</th> 27 </tr> 28 <tr align="left"> 29 <td>王文</td> 30 <td>男性</td> 31 <td>18</td> 32 <td>10万</td> 33 </tr> 34 <tr valign="bottom"> 35 <td>梁新宇</td> 36 <td>男性</td> 37 <td>18</td> 38 <td>8万</td> 39 </tr> 40 <tr align="right" valign="bottom"> 41 <td>梁新宇</td> 42 <td>男性</td> 43 <td>18</td> 44 <td>8万</td> 45 </tr> 46 </table> 47 48 </body> 49 </html>
<caption> 表格的标题
<tr> 表格的数据行，table row
<th> 表格的表头名称，与<td>不同在于文字采用加粗居中的形式显示，table head cell
<td> 单元格，用来显示表格内容，table data cell
<thead> 表格头部，使结构更加分明
<tbody> 表格主体部分，使结构更加分明
<tfoot> 表格尾部，使结构更加分明
rowspan 纵向合并，作用在th或者td上
colspan 横向合并，作用在th或者td上
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 10 <!-- 11 # part1 认识table 12 <table> 13 border 边框 14 width 宽度 15 height 高度 16 17 thead 表格头 18 tbody 表格体 19 tfoot 表格尾 20 tr 代表一行 21 td 代表一列 22 th 表格头字体加粗 23 --> 24 <table border=1 width=1000 height=100 > 25 <thead style="background-color: pink;"> 26 <tr> 27 <th>姓名</th> 28 <th>性别</th> 29 <th>年龄</th> 30 <th>薪资</th> 31 </tr> 32 </thead> 33 34 <tbody> 35 <tr> 36 <td>王文</td> 37 <td>男性</td> 38 <td>18</td> 39 <td>10万</td> 40 </tr> 41 <tr> 42 <td>荷叶</td> 43 <td>男兽人</td> 44 <td>18</td> 45 <td>2千万</td> 46 </tr> 47 <tr> 48 <td>王永娟</td> 49 <td>女兽人</td> 50 <td>16</td> 51 <td>-3千万</td> 52 </tr> 53 <tr> 54 <td>吴洪昌</td> 55 <td>男性</td> 56 <td>真18</td> 57 <td>2000千</td> 58 </tr> 59 <tr> 60 <td>梁新宇</td> 61 <td>男性</td> 62 <td>18</td> 63 <td>8万</td> 64 </tr> 65 </tbody> 66 67 <tfoot> 68 <tr> 69 <td>梁新宇</td> 70 <td>男性</td> 71 <td>18</td> 72 <td>8万</td> 73 </tr> 74 75 </tfoot> 76 77 </table> 78 79 <hr> 80 <!-- 81 # part2 合并单元格 82 colspan 横向合并 83 rowspan 纵向合并 84 --> 85 86 <table border=1 width=1000 height=100 > 87 <thead style="background-color: pink;"> 88 <tr> 89 <th>姓名</th> 90 <th>性别</th> 91 <th>年龄</th> 92 <th>薪资</th> 93 </tr> 94 </thead> 95 96 <tbody> 97 <tr> 98 <td colspan=3> 横向合并 </td> 99 <td>10万</td> 100 </tr> 101 <tr> 102 <td>荷叶</td> 103 <td>男兽人</td> 104 <td>18</td> 105 <td rowspan=4> 纵向合并 </td> 106 </tr> 107 <tr> 108 <td>王永娟</td> 109 <td>女兽人</td> 110 <td>16</td> 111 112 </tr> 113 <tr> 114 <td>吴洪昌</td> 115 <td>男性</td> 116 <td>真18</td> 117 118 </tr> 119 <tr> 120 <td>梁新宇</td> 121 <td>男性</td> 122 <td>18</td> 123 </tr> 124 </tbody> 125 126 <tfoot> 127 128 <tr> 129 <td colspan=4>梁新宇</td> 130 131 </tr> 132 133 </tfoot> 134 135 </table> 136 137 138 </body> 139 </html>
7、子窗口 iframe
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title> 子窗口 </title> 7 </head> 8 <body> 9 <iframe src="http://www.taobao.com" name="smallson" width=1000 height=500 ></iframe> 10 <hr> 11 <a href="./2.html" target="smallson">点我跳转2.html</a> 12 <a href="http://www.baidu.com" target="smallson">点我跳百度</a> 13 14 </body> 15 </html>
8、音视频标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- video 视频 audio 音频 --> 10 <video src="./抖音.mp4" controls = "controls" style="width:200px;" > 11 抱歉~ 您的浏览器不支持video标签 12 </video> 13 <audio src="./潮汐-她的城市.mp3" controls = "controls"> 14 抱歉~ 您的浏览器不支持audio标签 15 </audio> 16 </body> 17 </html>
9、form 表单
1、表单属性
action 代表提交的数据地址
method get方法 或者 post方法
- get 从服务端获取数据
- post 向服务端发送数据
2、 <input> 表单框
type ：指定标签类型 :
- text 文本类型
- password 密码类型
- submit 提交按钮
- radio 单选框
- checkbox 复选框
- file 文件上传
- hidden 隐藏的表单框
name ：指定标签名字 (必须写名字,才能在后台通过键的形式获取到值)
value ：指定标签的值
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <!-- 10 <form> 表单 11 action 代表提交的数据地址 12 method get方法 或者 post方法 13 get 从服务端获取数据 14 post 向服务端发送数据 15 16 <input> 表单框 17 type 指定标签类型 : 18 text 文本类型 19 password 密码类型 20 submit 提交按钮 21 name 指定标签名字 (必须写名字,才能在后台通过键的形式获取到值) 22 value 指定标签的值 23 24 --> 25 <form action="" method="post"> 26 用户名:<input type="text" value="" name="user"> 27 密码:<input type="password" value="" name="pwd"> 28 <input type="submit"> 29 </form> 30 31 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>form - 单选框 复选框 </title> 7 </head> 8 <body> 9 <form action="" method=""> 10 <!-- 单选框 如果是同一组的单选框,名字需要一致 checked 代表默认选中 --> 11 <input type="radio" name="sex" value="m" id="sex1" ><label for="sex1">男性</label> 12 <input type="radio" name="sex" value="w" id="sex2" checked ><label for="sex2">女性</label> 13 14 <hr> 15 <!-- 复选框 如果是同一组的复选框,名字需要一致 checked 代表默认选中- --> 16 <input type="checkbox" name="hobby" value="eat" > 吃饭 17 <input type="checkbox" name="hobby" value="sleep" > 睡觉 18 <input type="checkbox" name="hobby" value="smoke" checked > 抽烟 19 <input type="checkbox" name="hobby" value="drink" checked > 喝酒 20 <input type="checkbox" name="hobby" value="firehead" > 烫头 21 22 <hr> 23 24 <input type="submit"> 25 26 27 </form> 28 29 30 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>文件上传</title> 7 </head> 8 <body> 9 <form action="" method=""> 10 11 <!-- 大段文本框 --> 12 <textarea name="" id="" cols="30" rows="10">请填写个性签名</textarea> 13 14 <hr> 15 <!-- 隐藏的表单框,隐藏id,用在删除,查询,修改的场景中 --> 16 <input type="hidden" name="id" value="100"> 17 18 19 </form> 20 21 </body> 22 </html>
3、下拉框、大文本
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>form 下拉框</title> 7 </head> 8 <body> 9 <form action="" method=""> 10 <!-- 下拉框 selected 代表默认选中(标注一个即可) disabled 代表无法选中(可标注多个) --> 11 <select name="city" > 12 <option value="shijiazhuang">石家庄</option> 13 <option value="dalian" selected >大连</option> 14 <option value="heilongjiang" disabled >黑龙江</option> 15 <option value="beijing" disabled >北京</option> 16 </select> 17 18 <hr> 19 <input type="submit"> 20 21 22 </form> 23 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>文件上传</title> 7 </head> 8 <body> 9 <form action="" method=""> 10 11 <!-- 大段文本框 --> 12 <textarea name="" id="" cols="30" rows="10">请填写个性签名</textarea> 13 14 <hr> 15 <!-- 隐藏的表单框,隐藏id,用在删除,查询,修改的场景中 --> 16 <input type="hidden" name="id" value="100"> 17 18 19 </form> 20 21 </body> 22 </html>
4、表单属性
- placeholder 灰色输入提示
- required 必填
- readonly 只能读不能改 可以被提交
- disabled 只能读不能改 不会被提交
- size 设置输入框的大小
- maxlength 输入框最多可以输入多少字符
- minlength 输入框最少需要输入多少字符
- autofocus 自动获取焦点, 整个页面只能有一个
- tabindex 设置tab的切换顺序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>表单属性</title> 7 </head> 8 <body> 9 <!-- 10 placeholder 灰色输入提示 11 required 必填 12 readonly 只能读不能改 可以被提交 13 disabled 只能读不能改 不会被提交 14 size 设置输入框的大小 15 maxlength 输入框最多可以输入多少字符 16 minlength 输入框最少需要输入多少字符 17 autofocus 自动获取焦点, 整个页面只能有一个 18 tabindex 设置tab的切换顺序 19 --> 20 21 <form action=""> 22 用户名: <input type="text" name="username" placeholder="请输入用户名" required > 23 <hr> 24 密码:<input type="password" name="pwd" size=20 disabled > 25 <hr> 26 请充钱:<input type="text" name="username" placeholder="请输入年龄" maxlength="5" minlength="2" autofocus > 27 <hr> 28 性别: 29 <input type="radio" name="sex" value="m" id="sex1" ><label for="sex1">男性</label> 30 <input type="radio" name="sex" value="w" id="sex2" checked ><label for="sex2">女性</label> 31 <hr> 32 邮箱:<input type="email" name="email" placeholder="请输入邮箱" value="1234@qq.com" readonly tabindex=2 > 33 <hr> 34 班级:<input type="text" name="class" placeholder="请输入班级" tabindex=1 > 35 <hr> 36 <input type="submit"> 37 </form> 38 39 40 </body> 41 </html>
四、标签的种类
1、块级标签
独占一行,可直接设置宽高，纵向排列的特点
<h1>~<h6>,<div>,<p>,<ul>,<ol>,<dl>,<li>,<table>,<form>
2、行级元素
不能独占一行,不能直接设置宽高,横向排列的特点
<span>,<a>,<label>,<strong>,<em>
3、行内块状元素
不能独占一行,可直接设置宽高
<img>,<button>,<input><textarea>
