目录
- WEB前端 HTML
WEB前端 HTML
TOC
- 什么是html?
- html的固有结构
- 注释
- 什么是标签？
- 标签分类
- 什么是标签属性？
- 适用于大多数HTML标签的属性
- 标签分类
- 常用标签
- 常用引用标签
* head标签中的引用
* body标签中的引用 - table元素中进行行合并和列合并
什么是html?
- hyper text markup language 超文本标记语言。看着是不是想起了HTTP（Hyper Text Transfer Protocol）。它俩都提到了超文本。什么是超文本？
- 我理解的超文本就是区别于文本，普通文本就是纯文字。超文本就是不仅仅是文字，哈哈哈，废话！超文本会包含我们可能需要用到的表格，窗口，图片等在文本中可以表述呈现。
- 所以呢，HTTP就是可以传输超文本文档的协议，可以有图片，视频，包括文档，一种传输协议，支持MIME扩展类型.推荐< >。
- 所以呢，HTML文档就是可以包含其它非存文本媒体，只不过提供这些提供的是超链接方式。
- 说完了超文本，那标记语言是什么意思？标记就是tag，给文本打上标签，代表是什么东西。如h1表示标题。这样浏览器解释器可以通过标签认识这个是文档的什么部件，从而渲染出不同的效果，呈现在显示器上。标记语言还有哪些呢？如XML，MARKDOWN等都是文档标记语言。markdown的效果可能大家都知道。
html的固有结构
文档声明，这个表示文档类型是html5文档
其它的都是固定标签，这个是叫根标签,lang表名元素内容的语言。值是符合标准的语言代码。这里是中国大陆 中文。其最大作用是告诉发生阅读器的发声方式，搜索引擎告诉用户使用哪种语言编写文档等。
头部元素的容器。
头部内容,里面的标签是可选用的。
<meta>
<script>
<style>
<link>
</head>
<body>
页面主体内容，里面的标签是可以选用的。但是其它就是固定标签。
<h1>
<p>
<a>
<img>
...
</body>
</html>
<!-- 这是注释 --> 只有这种注释方式。注释中可以直接使用回车换行。</code></pre>
<h5 id="注释">注释</h5>
<blockquote>
<p><!-- 这里面的就是注释 --></p>
</blockquote>
<ol>
<li>HTML注释不支持嵌套。</li>
<li>HTML注释不能写在HTML标签中。？？？</li>
<li>通常好的注释方式是，要注释某段，一般在这段的前面和后面加上注释；也就是用一个注释对包裹着需要注释的代码段。如下：</li>
</ol>
<pre><code><!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 --></code></pre>
<h4 id="什么是标签">什么是标签？</h4>
<ol>
<li>使用尖括号包裹着，且标签有成对或者单标签。成对标签是两个标签构成，一个开始标签一个叫结束标签，他们之间可以有内容（text,other标签）；单标签只有标签和属性，单标签自己结束。</li>
<li>其实看一个html文档，就是标签和文本，其它都媒体类型都是标签包含着，都看作为标签。</li>
<li>标签用来表示HTML文档的结构的。</li>
<li>标签是可以嵌套的。</li>
<li><p>html标签不区分大小写。</p> <h5 id="标签分类">标签分类</h5> 标签按照有无标识文本：</li>
<li>有文本的，即有开始标签和结束标签，它们之间就是文本内容。</li>
<li><p>无文本的，<\tag name/> ，这种标签是不需要具体标识文本内容的。主要使用它们的属性内容。</p></li>
</ol>
<p>标签（元素）按照类型分：这个类型影响约束标签的一些属性。</p>
<ol>
<li>块标签:block 独占一行 可设置高度，宽度，行高，顶部，底部边距，默认浏览器宽度。</li>
<li>行内标签:inline 在一行中，不可设置高度，宽度，底部，底部边距；可以设置行高line-height.</li>
<li>行内块状标签:inline-block 在一行中，可设置高度，宽度，顶部，底部边距，行高。</li>
</ol>
<p>标签按照head中和body中：<br> pass</p>
<blockquote>
<p>标签可嵌套，但是不是任意标签都可以随意嵌套。<br> 无大小写区别</p>
</blockquote>
<h5 id="什么是标签属性">什么是标签属性？</h5>
<p>说了标签有tag名字，有的标签有包围着text内容，有的单标签就没有text包含。除了前两，还有一个就是标签有属性，就是标签tag会有什么属性，可以存K-V键值对数据结构，来表示标签的属性信息。<br> 那总结下标签有tag，attrs，text 三要素。<br> 自己理解的标签属性：<br> 1.首先，属性能够使得标签信息更多，让标签能个有更多的功能。<br> 2.其次，不同的标签可能有属于自己的属性，但是属性k其实是一个分类，标签针对同一类属性使用相同的k，不同的v还可以将v作为k'，其还能有content对应的值。如meta标签的，http-equiv属性都是http有关的，而其v又作为一个k'，对应后面的content值。所以我所属性扩展出更多属性，就是通过这样做出来的。第一个属性是分类，k的v和后面的content的值才构成了一个k-v的结构。</p>
<p>content和href ，type的特殊共同作用。</p>
<h5 id="适用于大多数html标签的属性">适用于大多数HTML标签的属性</h5>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">属性</th>
<th style="text-align: left;">描述</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">class</td>
<td style="text-align: left;">为html元素定义一个或多个类名classname，类名从样式文件引用</td>
</tr>
<tr class="even">
<td style="text-align: left;">id</td>
<td style="text-align: left;">定义元素标签的唯一id</td>
</tr>
<tr class="odd">
<td style="text-align: left;">sytle</td>
<td style="text-align: left;">行内样式,css样式放在行内</td>
</tr>
<tr class="even">
<td style="text-align: left;">title</td>
<td style="text-align: left;">描述元素标签的额外信息(作为工具条使用)</td>
</tr>
</tbody>
</table>
<h4 id="常用标签">常用标签</h4>
<table>
<thead>
<tr class="header">
<th style="text-align: center;">标签名</th>
<th style="text-align: left;">标签及其内容意思</th>
<th style="text-align: left;">标签属性</th>
<th style="text-align: left;">可嵌套在哪些标签中</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;">html</td>
<td style="text-align: left;">html的固定标签,每个html文档必须有。</td>
<td style="text-align: left;">lang</td>
<td style="text-align: left;">根节点,最外层</td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>head</strong></td>
<td style="text-align: left;">文档头，描述文档各个属性和信息，包括文档标题；内容就是包含其它标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">只能嵌套在html中，且唯一</td>
</tr>
<tr class="odd">
<td style="text-align: center;">title</td>
<td style="text-align: left;">网页标题；内容就是标题文本</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">meta</td>
<td style="text-align: left;">提供页面的原信息；单标签不会包含内容</td>
<td style="text-align: left;">1.http-equiv;2.name3.content存放前两个标签对应的值；</td>
<td style="text-align: left;">嵌套在head标签</td>
</tr>
<tr class="odd">
<td style="text-align: center;">link</td>
<td style="text-align: left;">定义当前文档与外部资源的关系，可以链接个图标icon</td>
<td style="text-align: left;">1.rel 必须，表明连接的是是什么；2.href 外部文档的位置url；3.type MIME类型，规定链接文档的类型；单标签</td>
<td style="text-align: left;">嵌套在head标签中</td>
</tr>
<tr class="even">
<td style="text-align: center;">base</td>
<td style="text-align: left;">定义所有下面所有链接默认的连接目标地址;单标签</td>
<td style="text-align: left;">href；target</td>
<td style="text-align: left;">嵌套在head标签</td>
</tr>
<tr class="odd">
<td style="text-align: center;">style</td>
<td style="text-align: left;">定义css样式</td>
<td style="text-align: left;">type</td>
<td style="text-align: left;">可在head中</td>
</tr>
<tr class="even">
<td style="text-align: center;">body</td>
<td style="text-align: left;">包含标签;内容就是标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">只能嵌套在html中</td>
</tr>
<tr class="odd">
<td style="text-align: center;">h1</td>
<td style="text-align: left;">表示标题；独占一行；块标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">标题只有1-6级别,在body标签中</td>
</tr>
<tr class="even">
<td style="text-align: center;">p</td>
<td style="text-align: left;">表示段落paragraph的简写；独占一行；块标签；浏览器会在段落前后添加空行</td>
<td style="text-align: left;">style;id给块命名,名字唯一</td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">b</td>
<td style="text-align: left;">加粗；行内标签;</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">strong</td>
<td style="text-align: left;">加粗强调;行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">同b,但是strong为盲人阅读器提供了重读的效果</td>
</tr>
<tr class="even">
<td style="text-align: center;">i</td>
<td style="text-align: left;">斜体;行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">em</td>
<td style="text-align: left;">斜体；行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">同i</td>
</tr>
<tr class="even">
<td style="text-align: center;">s</td>
<td style="text-align: left;">删除线；行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">u</td>
<td style="text-align: left;">下划线标签；行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">sup</td>
<td style="text-align: left;">上标；行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">sub</td>
<td style="text-align: left;">下标；行内标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">a</td>
<td style="text-align: left;">超链接标签anchor锚点;行内标签;对文本、图片链接到其它文本或页面或图片</td>
<td style="text-align: left;">target:_blank新页面打开;_slef当前页;_top跳出框架;title;href</td>
<td style="text-align: left;">可嵌套在块标签中</td>
</tr>
<tr class="odd">
<td style="text-align: center;">li</td>
<td style="text-align: left;">列表中一条记录;块标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">嵌套在ol和ul标签中</td>
</tr>
<tr class="even">
<td style="text-align: center;">ul</td>
<td style="text-align: left;">无序号列表，前面点号；块标签</td>
<td style="text-align: left;">type:none,circle,square,disc默认</td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">ol</td>
<td style="text-align: left;">有序号列表，前面是序号；块标签</td>
<td style="text-align: left;">type:1,a,A,i,I；style:list-type:none</td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">div</td>
<td style="text-align: left;">分区division,把文档分割成独立的不同的部分；块标签；想象成其它元素容器</td>
<td style="text-align: left;">id唯一标识，class分类</td>
<td style="text-align: left;">分区还可再分区</td>
</tr>
<tr class="odd">
<td style="text-align: center;">span</td>
<td style="text-align: left;">内联元素也叫inline行内元素;用来给文本容器；用来设置样式</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">img</td>
<td style="text-align: left;">图片；行内块；</td>
<td style="text-align: left;">src;target;title;style</td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">br</td>
<td style="text-align: left;">换行标签；</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">hr</td>
<td style="text-align: left;">水平线</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">span</td>
<td style="text-align: left;">将包含的内容摘出，用css表示</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">特殊字符</td>
<td style="text-align: left;">®</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">map</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;">和img有映射关系</td>
</tr>
<tr class="even">
<td style="text-align: center;">area</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;">嵌套在map标签里</td>
</tr>
<tr class="odd">
<td style="text-align: center;">form</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">input</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">label</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">select</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">option</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">textarea</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">table</td>
<td style="text-align: left;">表格标签，包裹thead tbody tfoot;</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">thead</td>
<td style="text-align: left;">表格头标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">tbody</td>
<td style="text-align: left;">表格体标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">tfoot</td>
<td style="text-align: left;">表格脚标签</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">tr</td>
<td style="text-align: left;">表格的一行</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">td</td>
<td style="text-align: left;">表格的一个单元；单元可以设置rowspan/colspan来表名表格单元占据几个行或者列</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
</tbody>
</table>
<h4 id="常用引用标签">常用引用标签</h4>
<h5 id="head标签中的引用">head标签中的引用</h5>
<pre><code># 引用外部css文件
<link rel='stylesheet' href='url'/>
# 引入外部js文件
<script src='url'></script>
# 引入网站标签页图标
<link rel='icon' href='url'/></code></pre>
<h5 id="body标签中的引用">body标签中的引用</h5>
<pre><code># 在body中最后引入js文件
<script src='url'></script></code></pre>
<h4 id="table元素中进行行合并和列合并">table元素中进行行合并和列合并</h4>
<p>做一个课程表</p>
<pre><code><!DOCTYPE HTML>
<html lang='zh-CN'>
<head>
<meta charset='utf-8'/>
<link rel='icon' href='url' />
<title>表格
Monday
Tuseday
Wednesday
Thursday
Friday
AM
数学
音乐
物理
生物
历史
语文
数学
英语
地理
化学
PM
历史
语文
数学
英语
地理
语文
数学
英语
地理
化学
Night
数学
英语
首先table中合并都是在单元标签td中的colspan rowspan熟悉来设置的。
colspan表明这个单元占据指定数的列，那么它所在的行tr的其它单元格数相应减少。
rowspan表明这个单元占据指定数的行，那么它的下一行在这个单元同列的单元就不用再有了。