HTML简介
前端工程师参照产品的效果图来开发页面(也可叫界面)，效果图是由UI设计师用Photoshop/firework来设计的，为了方便与UI设计师对接工作、辅助页面开发，需掌握一定的PS。把效果图布局成页面，需要用到HTML语言和CSS语言，页面功能的开发需要用到javascript,为了快速开发和系统开发，还需要学习一些前端的javascript库和框架。
HTML：Hyper Text Markup Language 超文本标记语言
①简易
②可扩展
③平台无关
④全网通用，其是SGML的一种规范
CSS：Cascading Style Sheets 层叠样式表
注：①HTML中的标签属性与CSS中的样式属性不同，但其部分属性的名称可能相同，如HTML标签属性width='200[px]'与CSS样式属性style='width:200px'在效果上相同，注意不能混淆，有很多HTML标签属性已经不被建议使用，应该使用CSS的样式属性来定义HTML元素的布局和显示属性。
②在HTML标签中，标签属性的通用格式为 属性名='属性值'
③在CSS样式属性中，其通用格式为 样式属性名:属性值(内联样式中表示为style='样式属性名:属性值')
HTML文档整体结构：HTML文档第一行为<!DOCTYPE html>文档声明（是HTML5的版本声明，若无则会按照怪异模式编码），第二行与结尾分别为<html lang=“en/zh-CN”> </html>定义文档整体，<body>内进行编写网页上显示的内容。
标题标签：<h1></h1>共有6种，<h6></h6>。
段落标签：<p></p>，HTML将文本渲染成网页时不识别换行符，需要手动输入<br />，其会将源代码中所有的空行和空格都识别为一个空格，如果需要添加多个空格，则只能使用字符实体（flask中escape函数提供了将HTML文本’<,>, '转变为字符实体的方法）
注释标签：<!-- xxxxxx -->其中xxxx即为被注释的内容。
水平线标签：<hr />可用于分隔内容，在网页中显示为一条水平线。
引用标签：<q>短引用，在网页中显示为双引号；<blockquote>长引用，显示为缩进的内容；<abbr title='xxx'>x</abbr>title的内容在鼠标悬停在x上时显示。
占位标签：lorem ipsum/The quick brown fox jumps over the lazy dog 没有实际意义，只是用来占位。
图片标签：①是一个自关闭元素，alt属性也称alt text，是当图片无法加载时显示的替代文本，可以直接指定宽度和高度，若只指定一个，则会按照图片默认的长宽比压缩或拉伸，若两个都指定，则按照指定的尺寸显示 <img src=‘url’ alt=‘xxxx’, width=200(px), height=200 />（最后的斜杠是新版标准要求的自封闭）
②可在其他标签中添加background='url'来作为背景图片（平铺模式，即不改变图片本身大小），可使用align='bottom/top/middle/left/right'定义图片与文本的对齐方式，可使用<map/area>定义图像地图中的可点击区域。
③在很多情况下，推荐弃用修改显式格式的标签属性，改用CSS属性。
锚点a标签：用于跳转和链接，并可保存位置信息：
①页面内跳转，<a href=‘#xxx’>跳转</a>定义a元素，<a id/name=‘xxx’> </a>定义书签保存跳转位置；
②页面间跳转，<a href=‘url’ target='_blank'>跳转</a>定义a元素，可跳转至url链接并打开一个新标签页('_blank'作用)，'_top'时可跳转至目标url页首；
③页面间跳转， <a href=‘url#xxx’>跳转</a>意为跳转至url页面的id/name为xxx的锚点所在的位置。(注意若要打开非本地文件/url则需添加http://)
表格标签：①<table>用于定义表格，<tr>table row表示一行，<td>table data表示内容，<th>table header表示表头（显示为粗体居中），<table border='2'>给表格增加边框(整个表格的外边框)，<caption>给表格增加标题放置于<table>内，<th colspan/rowspan='2'>表示占用两列/行单元格(相应的单元格无需再写)；
②单元格边距(cellpadding，控制单元格大小)与单元格间距(cellspacing，控制单元格与单元格之间距离)<table cellpadding='20'>；
③向表格/单元格内添加背景颜色(bgcolor='red')，添加背景图片(background='url')（平铺），添加框架样式<table frame='box'>；
④使用align/valign='left/right top/bottom'定义单元格内内容的水平/垂直排列方式，默认居中，使用<table width='400'>定义表格单元格的宽度和高度；
⑤表格内可以包含其他标签但不可以包含标题标签，默认状态下表格会根据输入的内容自动分列并控制列宽，一般设计表格时，一行一行输入。
注：所有的表格标签都不是自关闭标签，需要指定关闭位置，表格的大部分样式属性都应该通过CSS来控制。
列表标签：①<ul>创建无序列表（unordered list），列表中的元素用<li>来标记，<ul type='disc/circle/square'>分别代表实心圆/空心圆/方块标记；
②<ol>用于创建有序列表（ordered list），<ol type='a/A'>表示以a/A开始计数，默认整数1开始，支持罗马数字，列表可以嵌套；
③自定义列表，<dl>开始自定义列表，<dt>自定义列表项，<dd>自定义列表项的内容。
注：所有的列表标签都不是自关闭标签，需要指定关闭位置。
块元素与内联元素：块元素意为在显示时通常以新行开始或结束如<h1>/<h2>/<p>等，内联元素意为在显示时通常不会以新行开始；<div>是一个块级元素，浏览器会在其前后拆行，用于文档布局和对大的内容块进行样式设计；<span>是内联元素，用于为部分文本设置样式属性。
响应式web设计：Responsive Web Design，即以可变尺寸传递网页，对于平板和移动设备是必须的。(一个简单的方式是使用float属性，将多个div的float属性全设为left，则当浏览器尺寸变化时会自动下移)也可以使用Bootstrap框架。
框架标签：<frameset cols/rows='20%, 40%, 40%'>表示将页面竖直/水平分为3部分，在其下使用框架标签<frame src='url.html'>使用其他html文件组成这个页面，若下属的框架有可见边框，则用户可以拖动，可以禁止拖动。
iframe标签：用于在网页内显示网页，<iframe src='url' width='200' height='200' frameborder='0' name='xxx'></iframe>，意为设置宽高200像素无边框，并通过锚点a元素的name属性，将a元素指向的链接在iframe内联框架中打开。
HTML脚本元素：<script type='text/javascript'></script>用于定义客户端脚本可将脚本语句写入其中，也可通过src属性指向外链，type规定脚本的MIME类型，关于script标签将在javascript简介中详细描述。
HTML头部元素： ①<head>元素是所有头部元素的容器，里面负责对网页进行一些设置（定义网页的编码格式，选择器，外链CSS样式文件，JavaScript文件等，设置的内容不会显示在网页上）；
②定义标题<title>标签的内容会显示在标题栏，并提供页面被添加到收藏夹时显示的标题，搜索引擎会使用标题将网页的结构和内容编制索引，但不会显示在网页上；
③<base>标签为页面上的所有链接规定默认地址或默认目标(target，意为规定在何处打开链接文档，_blank表示在新标签页中打开)；
④<link>标签最常用于链接外部样式表<link rel='stylesheet', type='text/css', href='mystyle.css'>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择，其中rel属性规定当前文档与被链接文档之间的关系(stylesheet意为外部样式表)，type属性规定被链接文档的 MIME 类型，常用’text/css’与’text/javascript’，href属性意为链接url；
⑤<style>标签用于规定HTML 元素在浏览器中呈现的样式，CSS的元素/类/ID选择器和外部样式表都在此中规定<style type='text/css'>；
⑥<meta>标签提供关于 HTML 文档的元数据，其不会显示在页面上，但是对于机器是可读的，meta 元素一般被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据，<meta> 标签始终位于 head 元素中，例如<meta charset="utf-8" /> <meta name="author" content="xxx" />。
HTML实体元素：由于HTML将一些符号设置为特殊文本，因此若需要在页面中显示需要输入其实体元素，例如：空格( )大于(>)小于(<)乘号(×)等。
HTML标签的多重属性：每个前标签都可以添加多种标签属性和选择器，用空格隔开即可。
表单（form）元素：用于收集所有类型的用户输入，其下有多种属性和多种元素。
属性：
①action属性，其指定了表单提交到服务器的地址<form action=‘url’>xxx</form>，其可以是站点外的绝对路径url，也可以是站点内的相对路径/文件路径；
②method属性，method='get/post'，get方法将提交的参数直接放入url中，post方法将其置入请求头中以表单形式提交；
③name属性规定了表单元素的名称；
④target属性规定在何处打开url，与a元素的页面跳转相同；
⑤enctype属性规定发送表单数据之前如何进行编码，默认为application/x-www-form-urlencoded，当要上传多媒体文件时，设置为multipart/form-data，但注意此时发送的为form格式数据，在某些框架中可能会丢失其中非多媒体的参数；
⑥id属性，每一个元素的id属性在html文档中唯一；
⑦dir属性，dir='ltr/rtl’默认为ltr即从左到右，规定元素内容的文本方向；
标签：
①<textarea>标签：<textarea rows='' cols=''>其中可定义文本域的宽高，必须用</textarea>结束，否则会将其下的所有内容置入文本域中；
②<input>标签：<input type='' name=''>，其属性有：
name(定义input元素的名称，即变量名),
size(定义输入框的宽度),
maxlength(定义输入最大字符数),
value(定义input元素的值，且在不同的type下有不同的含义
Ⅰtype=“button”, “reset”, “submit” - 定义按钮上的显示的文本
Ⅱtype=“text”, “password”, “hidden” - 定义输入字段的初始值
Ⅲtype=“checkbox”, “radio”, “image” - 定义与输入相关联的值，即提交给后台服务器的值)
readonly(只读,不可输入)
required(不能为空)
width/height(当type为image时定义字段的宽/高度),
max/min(定义输入字段的最大/小值),
checked(默认选中),
disabled(加载时不可用),
alt(规定图像的替代文本)
type属性定义input元素类型：
button(定义按钮，多用于启动js)，
submit(定义提交按钮，用于向form的action属性指定页面发送数据)，
reset(清空/重置页面)
text(用于定义可输入的文本框)，
password(用于定义密码字段)，
hidden(定义隐藏字段，对用户不可见)，
checkbox(定义复选框，即一个表单中可选择多个),
radio(定义单选框，即一个表单中只能选择一个)，
image(定义图像形式的提交按钮，一般有src/alt)，
file(用于文件上传，accept='jpg/gif'规定提交的文件类型)
③<fieldset>标签：用于将表单内的元素分组(使用方框框起来)，其中需要<legend>xxx</legend>标签为表单命名；
④<select>标签：用于创建下拉选项列表，
Ⅰ在其中使用<option selected='selected'>xxx</option>创建下拉选项，默认选中
Ⅱ在其中使用<optgroup label='xx'>可以对下拉选项进行分组，label意为组名，注意只是分组但不可选中；
⑤<datalist>标签：为input元素提供选项，使用input元素中的list属性指定datalist的id属性，其下拉选项用<option>定义；
⑥<label>标签：没有呈现特殊效果，但可以为鼠标用户提供可用性，<label for='input的id属性'>，可以做到点击label元素时选中其for属性关联的input元素上；
⑦<botton>标签：<button>xx</button>，其与input中type为button区别在于可以对按钮的设置更灵活，如可以使用图片/更改字号/增加css样式等。
HTML元素的id与name属性：
①比较通俗的解释是id类似于身份证号唯一标识一个元素，name类似于名字可以重复；
②在用途上name用于标识元素的内容，id用于标记这个元素本身；
③在XML中建议以id取代name用于标识，因此除form/frame/iframe及其下属标签(input/textarea等)中使用name用于提交内容/标识框架之外，其它元素都使用id来唯一标识本元素。
一句话总结：name用于与服务器交互，id用于标识html文档内部元素。
一些XHTML的要求：为了可移植性更好，代码更规整使更多类型的浏览器/设备支持，①全部属性名都要小写，②属性值必须加双引号，③属性不能简写，如input标签中的readonly/required应写为readonly: ‘readonly’，④标签必须关闭，自关闭标签应写为<br />，⑤在name非必要情况下，使用id代替name属性。
关于href属性与src属性：①href是链接(同步加载，不影响当前文档的加载，且a元素中的href（超链接，链接至用于匹配的url）与link元素中的href（链接至本地的css文件）不同)；
②src是引入(需要全部加载文件，src链接的文件是html文档的一部分，script中的src(链接并加载js文件)与img中的src（链接本地文件并加载）与iframe中的src（链接至用于匹配的url在网页中显示)类似)；
注意：对于浏览器来说，本地服务器的url匹配与本地文件查找并不冲突，在Django中是强制要求了对于静态文件的访问必须带有/static，直接在地址栏中输入文件路径也可以不经过匹配直接访问到本地文件，一般所有的网络框架都会为静态文件的引用强制性添加一个前缀，防止混淆。
此文简单的描述了HTML的一些基本标签和功能，下面是一些比较特殊的标签，其中一部分不常用，且不被建议使用。
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
