Html学习
一、HTML简介
第一个html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魑魅魍魉</title> <link rel="icon" href="img/mobile-icon.png" type="img/x-ico" /> #head里面小图标 </head> <body> <a href="https://www.baidu.com">百度</a> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
- <a>元素定义一个超链接
- 注释： <!-- 注释的内容 -->
注：标签的分类（
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
1、Meta标签：
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词： 1、页面编码（告诉浏览器是什么编码） <meta http-equiv=“content-type” content=“text/html;charset=utf-8”> 2、刷新和跳转 <meta http-equiv=“Refresh” Content=“30″> <meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> 3、关键词 < meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" > 4、描述 <meta name="description" content="免费 Web & 编程 教程">
2、P 和 Br及Span
p表示段落，默认段落之间是有间隔的！
br 是换行
Span是行内
3、a标签
<a href="http://www.baidu.com" target="_blank">百度</a> target属性，_black表示在新的页面打开
https://www.jb51.net/onlineread/htmlchar.htm 特殊符号
锚：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a> <a href="#4">第四章</a> <div id="1" style="height:600px;">第一章</div> <div id="2" style="height:600px;">第二章</div> <div id="3" style="height:600px;">第三章</div> <div id="4" style="height:600px;">第四章</div> </body> </html>
4、H 标签
<h1>H标签</h1>
H1
H2
H3
H4
H5
H6
5、input标签：
<input placeholder="填写用户名" \> <!--会在input框里增加提示 -->
size 控件的长度
maxlength 最长字符数
示例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://localhost:8888/index" method="get"> <select name="city" multiple="multiple" size="10"> <option value="1">北京</option> <option value="2">天津</option> <option value="3">石家庄</option> <option value="4">南京</option> <option value="5">成都</option> <option value="6">哈尔滨</option> </select> <input type="text" name="user" value="chengcuichao"/> <input type="password" name="pwd" value="ccc949885111"/> <input type="button" value="登录1" /> <p>请选择：</p> 男<input type="radio" name="sex" checked="checked"/> 女<input type="radio" name="sex"/> <p>爱好：</p> 足球<input type="checkbox" name="like" checked="checked"> 篮球<input type="checkbox" name="like" checked="checked"> 羽毛球<input type="checkbox" name="like"> 乒乓球<input type="checkbox" name="like"> <p>上传文件</p> <input type="file" name="filename"> <p></p> <textarea name="text">默认值</textarea> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
实例2：
将搜索转发到百度搜索：
<form action="https://www.baidu.com/s?"> <input type="text" style="width: 400px;height: 30px" name="wd"/> <input type="submit" style="width: 75px;height: 34px;" value="百度一下"/> </form>
详解：
1、input系列 + form标签： input type='text' - name属性，value="user1"（默认填写账户） input type='password' - name属性，value="赵凡" （默认填写密码） input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value，checked="checked"（默认被选中），name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"（默认选中），name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 2、textarea标签： <textarea >默认值</textarea> - name属性,默认值放中间，clos代表列数，rows代表行数
3、select标签： select标签 - name,内部option value, 提交到后台，size（默认显示几个），multiple=‘multiple’（可以多选） selected="selected" 默认选中
4、optgroup标签
optgroup标签 - label（层级名），
6、Img标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com"> <img src="s2.png" title="截图" style="height:200px;width:200px" alt="截图"/> </a> </body> </html>
7、列表
1、无序列表 <ul type="disc"> <li> </li> </ul> type属性的意义： disc 实心圆 circle 空心圆 square 小方块 2、有序列表 <ol type="disc"> <li> </li> </ol> type属性的意义： 1 数字表示（默认）（1，2，3...) A 大写字母表示（A,B,C...) a 小写字母表示（a,b,c...) I 大写罗马数字表示(I,II,III…) i 小写罗马数字表示(i,ii,iii…)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> <ol> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ol> <dl> <dt>第一章</dt> <dd style="height:600px;">内容一</dd> <dt>第二章</dt> <dd style="height:600px;">内容二</dd> <dt>第三章</dt> <dd style="height:600px;">内容三</dd> <dt>第四章</dt> <dd style="height:600px;">内容四</dd> </dl> </body> </html>
8、表格
表格与单元格的属性:
cellspacing 设置单元格与单元格之间的距离
cellpadding 谁知文字与单元格之间的距离
width 设置变革的宽度
height 设置表格的高度
bgcolor 设置背景颜色
border 显示表格边框
设置表格标题：
<caption> 表格标题 </caption>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td rowspan="2">1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </body> </html>
注：colspan横向合并表格，rowspan纵向合并表格。
9、label标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label for="username">用户名：</label> <input id="username" type="text" name="user" /> </body> </html>
#点击用户名可以输入
10、其他属性：
cursor: pointer #鼠标放上去出现小手
11、框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--iframe - 设置高度与宽度,移除边框--> <iframe src="http://baidu.com" frameborder="0" width=100% height="400"></iframe> <!--因为 a 标签的 target 属性是名为 shiyanlou 的 iframe 框架，所以在点击链接时页面会显示在 iframe 框架中。--> <p><a href="https://baidu.com/" target="baidu">实验楼</a></p> <iframe width="400" height="400" name="baidu" ></iframe> </body> </html>
12、datalist 元素
<!--一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。--> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <label for="myColor">What's your favorite color?</label> <input type="text" name="myColor" id="myColor" list="mySuggestion" /> <datalist id="mySuggestion"> <option>black</option> <option>blue</option> <option>green</option> <option>red</option> <option>white</option> <option>yellow</option> </datalist> </body> </html>
autocomplete 属性
autocomplete 属性规定表单是否应该启用自动完成功能：自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。
form 属性
form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id。
multiple 属性规定输入域中可选择多个值，适用于以下类型的 <input> 标签：email 和 file。
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
pattern 属性
pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
Input 类型 - number
number 类型用于应该包含数值的输入域。属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
-
date - 选取日、月、年
-
month - 选取月、年
-
week - 选取周和年
-
time - 选取时间（小时和分钟）
-
datetime - 选取时间、日、月、年（UTC 时间）
-
datetime-local - 选取时间、日、月、年（本地时间）
Input 类型 - color
color 类型用于选择颜色。
二、CSS
引用css文件：
<link rel="stylesheet" href="commons.css" />
注释：
<!--<img src="a1.png" style="height: 15px;width: 15px"/>--> #baody里面的注释 /*#text-align: center;*/ #style里的注释
网页最上面的图标：
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-76x76-precomposed.png"> ##图标
基础样式：
background-color:red 注（rgb颜色对照表）：http://www.114la.com/other/rgb.htm
height 高度 百分比
min-width 最小宽度,当width小于这个才生效
width 宽度 像素，百分比
text-align:ceter 水平方向居中
line-height 垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗
选择器：
1、id选择器 #i1{ background-color: #2459a2; height: 48px;}
2、class选择器 .名称{ ...} <标签 class='名称'> </标签>
3、标签选择器 div{ ...} 所有div设置上此样式
4、层级选择器（空格） .c1 .c2 div{}
5、组合选择器（逗号） #c1,.c2,div{}
6、属性选择器 对选择到的标签再通过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; }
PS:优先级，标签上style优先，编写顺序，就近原则
边框：
border: 4px dotted（虚线） red;
border: 4px solid（实线） red;
border-radius:25px; #圆角边框50%的话变为圆
box-shadow:5px 5px 4px; #阴影
float：
让标签浪起来，块级标签也可以堆叠 老子管不住： <div style="clear: both;"></div>
display：
display: none; -- 让标签消失 display: inline; display: block; display: inline-block; 具有inline,默认自己有多少占多少 具有block，可以设置无法设置高度，宽度，padding margin ****** 行内标签：无法设置高度，宽度，padding margin 块级标签：设置高度，宽度，padding margin
padding,margin：
padding #内边距 margin(0,auto) #外边距
position：
position主要是让标签固定到屏幕的固定位置
position: fixed; #固定在屏幕的特定位置，可以用fixed进行分层
position: relative+absolute #固定在relative标签里的相对位置
top: 0 #离上面多远
right: 0 #离右面多远
left: 0 #离左面多远
bottom: 0 #离下面多远
position会把标签变为行内标签，会把标签分层
opcity: 0.5 透明度
z-index: 层级顺序 #越大会在上层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: auto"> <div style="height: 300px;width: 300px;background-color: aqua;position:relative;margin: 0 auto;"> <div style="height: 20px;background-color:greenyellow;width: 20px;position: absolute;left: 0;bottom: 0"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="display:none;z-index:10; position: fixed;top: 50%;left:50%; margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; "> <input type="text" /> <input type="text" /> <input type="text" /> </div> <div style="display:none;z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "></div> <div style="height: 5000px;background-color: green;"> asdfasdf </div> </body> </html>
overflow：
overflow: hidden 将图片隐藏
auto 出现滚动条
hover：
.class_name:hover #当鼠标移动到标签上，以下属性才会生效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ position: fixed; height: 50px; background-color: aqua; top: 0; left: 0; right: 0; } .h-body { line-height: 50px; margin-left: 200px ; } .a- { display: inline-block; width: 150px; float: left; padding: 0 50px; } .a-:hover{ background-color: black; } </style> </head> <body> <div class="header"> <div class="h-body"> <a class="a-">Logo</a> <a class="a-">项目1</a> <a class="a-">项目2</a> <a class="a-">项目3</a> </div> </div> </body> </html>
background：
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat-y; #只重复竖直方向
background-repeat: no-repeat #不重复
background-position-x: #移动图片的位置（左右）
background-position-y: #移动图片的位置（上下）
