html介绍
ref: http://www.cnblogs.com/yuanchenqi/articles/5976755.html
一、html, css, js之间的关系
- html是一门语言
- css,即层叠样式表,和布局有关
- js实现动态网页必不可少的,也是一门语言,JavaScript
二、HTML基础
2.1、什么是html
Hyper Text Markup Language即超文本标记语言
超文本: 就是指页面内可以包含图片、链接、音乐、程序等非文字元素
标记语言: 标记(标签)构成的语言
网页: 即HTML文档,由浏览器来解析,并展示给用户的
静态网页: 静态的资源,如xx.html
动态网页: html代码是由由某种开发语言根据用户请求动态生成的
- html文档树形结构图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Firt html</title>
</head>
<body>
<h1 style="color: gray">hello frontend</h1>
</body>
</html>
2.2、什么是标签
- 是由一对尖括号包裹的单词构成 例如: \
2.3、标签的属性
- 通常是以键值对的形式出现的,如name=”vincent”
- 属性只能出现在开始标签 或 自闭合标签中,所谓开始标签如”<h1 name=”这里就是开始标签”><h1>
- 属性名字要全部使用小写,属性值必须使用单引号或者是双引号括起来
- 如果属性名和属性值一样直接写属性名即可,如<input readonly />
2.4、标签
<!DOCTYPE html>就是为了兼容旧的网页,网页主要有两种模式,Quirks mode[ Compatibility Mode ] 和 CSScompat [ Strict mode]
可以使用下面的代码没有的浏览器使用那种模式在运行
<!DOCTYPE html> <!-- 此行如果被注释的话,那么就使用BackCompat模式 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
<!-- chrome: CSS1Compat -->
<!-- firefox: CSS1Compat -->
<!-- IE 11: CSS1Compat -->
alert(window.top.document.compatMode)
</script>
</head>
<body>
</body>
</html>
2.5、head标签
2.5.1、meta标签
2.5.1.1、meta标签共有两个属性,分别是http-equiv和name
- http-equiv相当于http请求的文件头,可以实现定时跳转和自动刷新的功能
自动跳转实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="2;http://qq.com">
<title>使用meta标签中的实现自动跳转功能</title>
</head>
<body>
<h2 style="color: slategray">使用meta标签中的http-equiv="refresh"再加上content="2;http://qq.com"实现自动跳转功能</h2> <br />
<hr />
<h3 style="color: rebeccapurple">上面content中的2单位是s,后面的是域名,表示2秒后自动跳转到指定的域名</h3> <br />
<hr />
<h3 style="color: cornflowerblue">如果content=""里面没有指定域名,则就是一个刷新功能</h3>
</body>
</html>
常用方法
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> //兼容模式,兼容ie7
- name属性,属性值如果为keywords则和搜索引擎相关,提高搜索的精准度,而description则是站点的描述信息
<meta name="keywords" content="百度,无人驾驶">
<meta name="description" content="百度是世界上第一大中文搜索引擎">
2.5.1.2、非meta标签
<link rel='icon' href='http://www.jd.com/favicon.ico'>
<link rel='sytlesheet' href='css.css'> # 引入css.css文件
<script src='imt.js'></script> # 引入imt.js文件
如使用rel属性来设置站点标题图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="shortcut icon" href="http://c.csdnimg.cn/public/favicon.ico">-->
<link rel="shortcut icon" href="img/apple.jpeg">
<title>标题 | 图标</title>
</head>
<body>
</body>
</html>
2.6、body标签
2.6.1、常用标签
<hn> n 的取值范围为1~6,用来表示标题
<p> 段落标签,包裹的内容被换行,并且上下内容之间有一行空白
<b> 加粗显示
<strike> 删除线
<del> 可以替换strike标签,也是删除线的功能
<em> 斜体
<sup> 和 <sub> 上标和下标
<br>
<hr> 水平线
<div> <span>
2.6.2、标签分类
- 块级标签: <p> <h1> <table> <ol> <ul> <form> <div>
- 内联标签: <a><input><img><sub><sup><textarea<>span>
2.6.3、block(块)元素的特点
2.6.4、inline元素的特点
2.6.5、特殊字符
<[\<] >[\>] “[\"] ©[\©] ®[\®]
三、图片标签 <img>
相关属性
- src //要加载图片的路径
- alt //图片加载失败时显示的内容
- title //鼠标悬浮时的显示信息
- width //图片的宽度
- height //图片的高度,宽高属性只用一个是会自动等比缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>显示图片和超链接</p>
<img>标签<br />
<img align="right" src="img/google.png" width="273" height="93" alt="图片没有加载成功就会显示" title="google logo">
<a>标签 <br />
<p>a标签有两个功能</p>
<li>1、链接</li>
<li>2、锚</li>
<li>3、a标签的target属性,__blank表示在新标签中打开</li>
<input readonly content="大XX要不要?" value="问你要不要"/><a href="https://google.com/ncr">Google</a>
<a href="http://qq.com" target="_blank" title="在新标签中打开QQ">QQ</a>
</body>
</html>
四、超链接标签[锚标签] <a>
功能:实现页面跳转或者是页内跳转,即锚
- href: 要连接的资源路径,格式 href=”http://www.baidu.com”协议名必须要写,不然会出错
- target: _blank 在新标签中打开链接,如果是frame名称,则在指定的frame中打开
- name: 定义一个页面的书签
- href 跳转
- #id 锚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚,实现类似索引的功能</title>
<style>
#chapter-1{ height: 100px; background: antiquewhite}
#chapter-2{ height: 100px; background: wheat }
... ...
#chapter-12{ height: 100px; background: pink}
</style>
</head>
<body>
<a href="#chapter-1">chapter I</a>
<a href="#chapter-2">chapter II</a>
... ...
<a href="#chapter-12">chapter XII</a>
<div id="top"></div>
<div id="chapter-1">
第 1 章 <br />
<p>#在html中就是标签选择器</p>
<p>每个div的id都不能是一样的,然后在css中,即head中的style中使用#div_id的方式来获取到div的位置对它进行修饰</p>
</div>
<div id="chapter-2">chapter II</div>
<div id="chapter-3">chapter III</div>
... ...
<div id="chapter-12">chapter XII</div>
<div align="right"><a href="#top">TOP</a></div>
</body>
</html>
五、列表标签
- <ul> 无序列表
- <ol> 有序列表
- <dl> 定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表 ol ul dl</title>
</head>
<body>
无序列表 [ unorderd list ]
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
有序列表 [ orderd list ]
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>
定义列表 [ define list ]
<dl>
<dt>第一章</dt>
<dd>1</dd>
<dd>2</dd>
<dt>Define Title</dt>
<dd>Define Data</dd>
<dd>Define Data</dd>
</dl>
</body>
</html>
六、表格标签
- border: 表格边框
- cellpadding: 内边距
- width: 像素百分比【最好通过css来设置】
- <tr>: table rows
- <th>: table head cell
- <td>: table data cell
- rowspan: 单元格横跨多少行[横向合并单元格]
- colspan: 单元络竖跨多少行[竖向合并单元格]
- <tbody>: [不常用],对表格进行分区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px" cellpadding="1px" width="2px" align="center">
<th>filed-1</th>
<th>filed-2</th>
<th>filed-3</th>
<th>filed-4</th>
<tr>
<td>11111111</td>
<td>22222222</td>
<td>33333333</td>
<td>44444444</td>
</tr>
<tr>
<td>11111111</td>
<td>22222222</td>
<td>33333333</td>
<td>44444444</td>
</tr>
</tr>
</table>
</body>
</html>
七、表单标签
表单用于向服务器传输数据
表单能够包含input元素,比如文字段、复选框、提交按钮等
表单还可以追念textarea、select、filedset和label元素
7.1、表单属性
html表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现web和服务器的交互
- action: 表单提交到那里,一般指向服务端的一个程序处理
- method: 表单提交方式,默认为get
- get:
- 1、提交的键值对放在Url后面,明文传输
- 2、安全性差
- 3、长度有限制
- post: 建议使用post
- get:
7.2、表单元素
input的一些元素
- type
- text 文本输入框
- password 密码输入框
- checkbox 多选框
- radio 单选框
- submit 提交按钮
- reset 重置
- button 按钮(需要配合js使用),button和submit的区别
- file 提交文件,form表单需要加上属性enctype=”multipart/form-data”
- name 表单提交的键
- 和id的区别
- name属性是和服务器通信时使用的名称,即传值给服务器,如有一个username的name值,则服务器端可以通过http请求获取到username的值
- id主要是给css, js选择器来惟一标识的
- 和id的区别
- value 表单提交的值,不同的输入类型,value属性的用户也不相同
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
- checked radio 和 checkbox 默认被选中
- readonly 只读. text 和 password
- disabled 对所用input都好使
上传文件需要注意两点:
* 1、请求方式必须是post
* 2、enctype=”nultipart/form-data”(注,这个属性需要写在form标签里)
7.3、下拉菜单标签<select>
- name: 表单提交项的键
- size: 选项个数
- multiple: multiple
- <option> 下拉选中的每一个选项
- value: 表单提交的值,
- selected: select菜单默认被选中
- <optgroup>为每一项加上分组
7.4、文本域<textarea>
- name: 表单提交的键
- cols: 文本域默认有多少列
- rows: 文本域默认有多少行
7.5、<label>
label标签就是将显示的文字和input中的id属性相关联,目前只用到input,其它的还未知
如有一个需要输入的姓名的输入框,正常情况下点击输入框,但是现在使用label标签后直接点文字就可以跳转到输入框中
<label for="www">姓名</label>
<input id="www" type="text" />
7.6、<fieldset>
代码
<fieldset>
<legend>welcome to login</legend>
<input type="text" />
</fieldset>
效果如下:
welcome to login health informationheight:
weight: