HTML语法介绍
一 基本标签（块级标签和内联标签）
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.而且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span>
块级标签：<p><h1><table><ol><ul><form><div>javascript
内联标签：<a><input><img><sub><sup><textarea><span>css
block（块）元素的特色
- 老是在新行上开始；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它能够容纳内联元素和其余块元素
inline元素的特色
- 和其余元素都在一行上；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其余内联元素
特殊字符
< > " © ®
<br>标签
<br>可插入一个简单的换行符。html
<br>标签是空标签（意味着它没有结束符，所以下面的这个是错误的：<br></br>）java
1.1 HTML中块级标签和内联标签的区别
| 块级元素 | 行内元素 |
| 独占一行,默认状况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 能够设置width，height属性 | 行内元素设置width，height属性无效 |
| 能够设置margin和padding属性 | 行内元素起边距做用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 对应于display:block | 对应于display:inline； |
二，head标签
咱们首先来介绍一下head标签的主要内容和做用，文档的头部描述了文档的各类属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其余方面的应用（移动端）的等。 如下标签是能够用在head标签中的：python
<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
三，title标签
在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。能够把它当作是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎能够经过网页标题，迅速的判断出当前网页的主题。web
下面作一个小练习，建立一个带有咱们自定义标题内容的网页：编程
<!DOCTYPE HTML>
<html>
<head>
<title>战争热诚</title>
</head>
<body></body>
</html>
将上面的文件另存为a.html，而后用浏览器打开，就能够看到下面的内容。浏览器
上面咱们介绍了title标签的用法，接下来咱们继续看一下head标签中可使用的其余标签：
安全
上面咱们介绍了title标签的用法，接下来咱们继续看一下head标签中可使用的其余标签：服务器
四，meta标签
Meta标签介绍：
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不一样的属性又有不一样的参数值，这些不一样的参数值就实现了不一样的网页功能。
经常使用的meta标签：
- http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
- 2. name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字能够有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="战争热诚">
五，body标签
想要在网页上展现出来的内容必定要放在body标签中。 把咱们以前海燕那一段HTML代码贴过来，保存到一个HTML格式的文件中。
<!DOCTYPE HTML>
<html>
<head>
<title>战争热诚</title>
</head>
<body>
<h1>海燕</h1>
<p>在苍茫的大海上，</p>
<p>狂风卷集着乌云。</p>
<p>在乌云和大海之间，</p>
<p>海燕像黑色的闪电，</p>
<p>在高傲地飞翔。</p>
</body>
</html>
使用浏览器打开，看一下效果：
上面也出现了字体的大小，这是什么呢？ 这里就简单介绍一下。
六，标题标签h1~h6
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 因为 h 元素拥有确切的语义，所以请您慎重地选择恰当的标签层级来构建文档的结构。所以，请不要利用标题标签来改变同一行中的字体大小。相反，咱们应当使用css来定义来达到漂亮的显示效果。 标题标签一般用来制做文章或网站的标题。
h1~h6标签的默认样式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>战争热诚</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
请看上面代码 <h1>和<h2>书写在一行上展现，可是在浏览器的效果倒是换行了，以下：
文本样式标签主要用来对HTML页面中的文本进行修饰，好比加粗，斜体，线条样式等等，，，，
1. `<b></b>`：加粗 2. `<i></i>`：斜体 3. `<u></u>`：下划线 4. `<s></s>`：删除线 5. `<sup></sup>`：上标 6. `<sub></sub>`：下标
如今若是想在一段文字中特别强调某几个字，这时候就能够用到`<em>`或`<strong>`标签。
这两个标签都是表示强调，可是二者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。
在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，咱们一般会推荐你们使用`<strong>`表示强调。
七，段落标签p
<p>,paragraph的简写。定义段落
<body>
<p>咱们大多数都是想法太多实践太少，或者简单点说就是想坐享其成</p>
<p>为了改变本身，我决定好好学习，多作事情，少说话</p>
</body>
浏览器展现特色：
- 跟普通文本同样，但咱们能够经过css来设置当前段落的样式
- 是否又独占一行呢？ 答案是的 块级元素
超连接标签a
href:要链接的资源路径 格式以下: href="http://www.baidu.com" target: _blank : 在新的窗口打开超连接. 框架名称: 在指定框架中打开链接内容. name: 定义一个页面的书签. 用于跳转 href : #id.（锚）
超级连接<a>标记表明一个连接点，是英文anchor（锚点）的简写。它的做用是把当前位置的文本或图片链接到其余的页面、文本或图像
<body>
<h1>
<!-- a连接 超连接
target:_blank 在新的网站打开连接的资源地址
_self 在当前网站打开连接的资源地址
title: 鼠标悬停时显示的标题
-->
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下载包</a>
<a href="mailto:zhaoxu@tedu.cn">联系咱们</a>
<!-- 返回页面顶部的内容 -->
<a href="#">跳转到顶部</a>
<!-- 返回某个id -->
<a href="#p1">跳转到p1</a>
<!-- javascript:是表示在触发<a>默认动做时，执行一段JavaScript代码，
而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</h1>
</body>
- target:_blank 在新的网站打开连接的资源地址
- target：_self 在当前网站打开连接的资源地址
- title: 表示鼠标悬停时显示的标题
连接其余表现形式：
- 目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操做(rar、zip等)
- 电子邮件连接 前提：计算机中必须安装邮件客户端，而且配置好了邮件相关信息。 例如：
<ahref="mailto:zhaoxu@tedu.cn">联系咱们</a> - 返回页面顶部的空连接或具体id值的标签 例如：
<a href="#">内容</a>或<a href="#id值">内容</a> - javascript:是表示在触发
<a>默认动做时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a> - javascript:;表示什么都不执行，这样点击
<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a
八，列表标签ul，ol
<ul>: 无序列表
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
网站页面上一些列表相关的内容好比说物品列表、人名列表等等均可以使用列表标签来展现。一般后面跟<li>标签一块儿用，每条li表示列表的内容
<ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表
<!-- 无序列表 type能够定义无序列表的样式-->
<ul type="circle">
<li>个人帐户</li>
<li>个人订单</li>
<li>个人优惠券</li>
<li>个人收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type能够定义有序列表的样式 -->
<ol type="a">
<li>个人帐户</li>
<li>个人订单</li>
<li>个人优惠券</li>
<li>个人收藏</li>
<li>退出</li>
</ol>
ol标签的属性：
type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
列表标识的起始编号
- 默认为1
ul标签的属性： type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
九，盒子标签div
<div>可定义文档的分区 division的缩写 译：区 <div> 标签能够把文档分割为独立的、不一样的部分,请看下面代码咱们将他们进行分区
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>经常使用标签一</title>
</head>
<body>
<div id="wrap">
<div class="para">
<p style="height: 1000px" id="p1">段落</p>
</div>
<div class="anchor">
我是普通的文本
<h1>
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下载包</a>
<a href="mailto:zhaoxu@tedu.cn">联系咱们</a>
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到p1</a>
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</h1>
</div>
<!-- <h2>战争热诚</h2>
<h3>战争热诚</h3>
<h4>战争热诚</h4>
<h5>战争热诚</h4>
<h6>战争热诚</h6> -->
<div class="para">
<!-- 定义段落 一般指文章一段内容 -->
<p>好好学习，每天向上</p>
<p>有时候把，我以为有些人真的厉害，为何那么厉害呢</p>
<p>有时候把，又以为本身超级笨，为何本身那么笨呢</p>
</div>
<div class="lists">
<!-- 无序列表 -->
<ul type="circle">
<li>个人帐户</li>
<li>个人订单</li>
<li>个人优惠券</li>
<li>个人收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<ol type="a">
<li>个人帐户</li>
<li>个人订单</li>
<li>个人优惠券</li>
<li>个人收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代码能够下面的层次结构
<div id='wrap'> <div class='para'></div> <div class='anchor'></div> <div class='para'></div> <div class='lists'></div> </div>
咱们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，因此div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你能够当作给这个区域起个名字。id是惟一的，一个页面中不能有两个重复的id，跟身份证号码同样，class能够设置一样的属性值，而且能够设置多个，例如class=’para n1‘
十，图片标签<img>
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
一个网页除了有文字，还会有图片。咱们使用<img/>标签在网页中插入图片。
语法：
<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意：
- src设置的图片地址能够是本地的地址也能够是一个网络地址。
- 图片的格式能够是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还能够为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
<div>
<span>与行内元素展现的标签<span>
<span>与行内元素展现的标签<span>
<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
<img src="./finance-right.png" alt="人工智能实战" style="width: 200px;height: 200px">
</div>
- 浏览器查看效果：行内块元素
- 5. 与行内元素在一行内显示
- 6. 能够设置宽度和高度
- 7. span标签能够单独摘出某块内容，结合css设置相应的样式
十一，表格标签table
表格由<table> 标签来定义。每一个表格均有若干行（由 <tr> 标签订义），每行被分割为若干单元格（由<td>标签订义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等。
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好经过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不经常使用): 为表格进行分区.
<div class="table"> <table> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> </tr> </thead> <!--表格主体--> <tbody> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是td--> <td></td> </tr> <tr> <td></td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td></td> </tr> </tfoot> </table> </div>
表格行和列的合并
rowspan 合并行(竖着合并) colspan 合并列(横着合并)
小练习：
<body>
<div class="table">
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<td rowspan="3">上午</td>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan ="2">下午</td>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</div>
</body>
十二，表单标签 form
表单是一个包含表单元素的区域
表单元素是容许用户在表单中输入内容，好比：文本域(textarea)、输入框(input)、单选框（）
表单的做用
表单用于显示、手机信息，并将信息提交给服务器
1，语法
<form>容许出现表单控件</form>
表单标签<form>
表单用于向服务器传输数据。
表单可以包含 input 元素，好比文本字段、复选框、单选框、提交按钮等等。
表单还能够包含textarea、select、fieldset和 label 元素。
1.表单属性
HTML 表单用于接收不一样类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的全部内容都应该在该标签中.
action: 表单提交到哪. 通常指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）做相应处理，好比https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2.表单元素
<input> 标签的属性和对应值
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(须要配合js使用.) button和submit的区别？
file 提交文件：form表单须要加上属性enctype="multipart/form-data"
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通讯时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不一样的输入类型，value 属性的用法也不一样：
type
=
"button"
,
"reset"
,
"submit"
-
定义按钮上的显示的文本
type
=
"text"
,
"password"
,
"hidden"
-
定义输入字段的初始值
type
=
"checkbox"
,
"radio"
,
"image"
-
定义与输入相关联的值
checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(须要配合js使用.) button和submit的区别？
file 提交文件：form表单须要加上属性enctype="multipart/form-data"
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通讯时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客
户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不一样的输入类型，value 属性的用法也不一样：
|
1
2
3
4
5
|
type
=
"button"
,
"reset"
,
"submit"
-
定义按钮上的显示的文本
type
=
"text"
,
"password"
,
"hidden"
-
定义输入字段的初始值
type
=
"checkbox"
,
"radio"
,
"image"
-
定义与输入相关联的值
|
checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.
上传文件注意两点：
1 请求方式必须是post
2 enctype="multipart/form-data"
<select> 下拉选标签属性
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：
value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<textarea> 文本域
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行
<label>
<label for="www">姓名</label> <input id="www" type="text">
<fieldset>
<fieldset> <legend>登陆吧</legend> <input type="text"> </fieldset>
属性见下表：
表单控件分类，见下图：
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用户名称：
<input type="text" name="txtUsename" value="请输入用户名称" readonly>
</p>
<p>
用户密码：
<input type="password" name="txtUsepwd">
</p>
<p>
确认密码：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--单选框-->
<p>
用户性别：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--复选框-->
<p>
用户爱好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 乐
<input type="checkbox" name="chkhobox" value="乐" checked>
</p>
<!-- 按钮 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>
<!--文件选择框-->
<p>
请上传文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介绍：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--选择框-->
<!--滚动列表 multiple设置之后实现多选效果，ctrl+鼠标左键进行多选-->
<p>籍贯：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工做城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
</form>
十三，其余标签
换行标签 <br>
<br>标签用来将内容换行，其在HTML网页上的效果至关于咱们平时使用word编辑文档时使用回车换行。
分割线 <hr>
<hr>标签用来在HTML页面中建立水平分隔线，一般用来分隔内容
特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 全部连续的空格或空行都会被算做一个空格。须要注意的是，HTML代码中的全部连续的空行（换行）也被显示为一个空格。
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>战争热诚的博客</title> </head> <body> <p> 好好学习 咱们会挣好多钱的 </p> </body> </html>
上面的代码在浏览器中最终的显示效果为：
因此HTML代码对缩进的要求并不严格，咱们一般使用缩进来让咱们的代码结构更清晰，仅此而已。
特殊字符
在上一个实例中，咱们演示了HTML中输入空格、回车都是没有做用的。要想输入空格，须要用特殊符号 -- 。
经常使用的特殊字符：
HTML特殊符号对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx
- 1. Html介绍,标签的语法
- 2. Emmet 语法介绍
- 3. Markdown语法介绍
- 4. Scala语法介绍
- 5. WebForm语法介绍
- 6. drools语法介绍
- 7. scss语法介绍
- 8. ES6语法介绍
- 9. Smali语法介绍
- 10. Markdown 语法介绍
- 更多相关文章...
- • 网站主机 介绍 - 网站主机教程
- • SQLite 语法 - SQLite教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
- • Kotlin学习（一）基本语法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Html介绍,标签的语法
- 2. Emmet 语法介绍
- 3. Markdown语法介绍
- 4. Scala语法介绍
- 5. WebForm语法介绍
- 6. drools语法介绍
- 7. scss语法介绍
- 8. ES6语法介绍
- 9. Smali语法介绍
- 10. Markdown 语法介绍