WEB前端 HTML

番茄西红柿发布于2019-04-23 13:34 / 1503人阅读

摘要：它俩都提到了超文本。什么是超文本我理解的超文本就是区别于文本，普通文本就是纯文字。说完了超文本，那标记语言是什么意思标记就是，给文本打上标签，代表是什么东西。

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
                        数学
                        英语

	Monday	Tuseday	Wednesday	Thursday	Friday
AM	数学	音乐	物理	生物	历史
语文	数学	英语	地理	化学
PM	历史	语文	数学	英语	地理
语文	数学	英语	地理	化学
Night	数学	英语

首先table中合并都是在单元标签td中的colspan rowspan熟悉来设置的。
colspan表明这个单元占据指定数的列，那么它所在的行tr的其它单元格数相应减少。
rowspan表明这个单元占据指定数的行，那么它的下一行在这个单元同列的单元就不用再有了。

GPU云服务器云服务器前端web前端前端web前端课程 web前端前端开发前端web前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2042.html

前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

邹立鹏 2019-08-30 10:56 评论0 收藏0
web前端和后端的区别在哪？

摘要：前端和后端是计算机行业最常用的两个术语在某种程度上，它们成了流行语。前端开发人员也称为前端设计师，他们可以创建一个没有任何后端开发的站点。前端和后端是计算机行业最常用的两个术语；在某种程度上，它们成了流行语。它们决定了你作为软件开发人员的工作类型、你使用的技术以及你得到的报酬。那么，让我们来谈谈这两个术语之间的区别，它们...

xuxueli 2021-11-22 15:24 评论0 收藏0
精读《现代 js 框架存在的根本原因》

摘要：官方规范估计很难出现现代框架的设计了，因为官方设计中前端三剑客是相互分离的方案，为了解决现阶段前端框架的问题，必须由完全接管，这几乎就是，或者支持语法的，可这与最初网页设计思路是违背的。现代前端框架正在告诉我们新的三剑客虚拟虚拟。 1 引言深入思考为何前端需要框架，以及 web components 是否可以代替前端框架？原文地址，建议先阅读原文，或者阅读概述。 2 概述现在前端...

coordinate35 2019-08-22 17:23 评论0 收藏0
前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0