前端学习之HTML 目录一. web标准二. 浏览器介绍三. 开发工具介绍四. HTML介绍1. HTML的概述2. HTML中的网络术语：五. HTML颜色介绍六. HTML的规范1. 编写html的规范2. html的基本语法特征七. html结构详解1. 文档声明头2. 头标签a. meta标签b. title标签八. 字体标签九. 排版标签1. 段落标签2. 块级标签和行内标签3. 换行标签4. 水平线标签5. 内容居中标签(已废弃)6. 预定义(预格式化)标签十. 超链接标签1. 外部链接2. 锚链接3. 邮件链接4. 特殊的几个链接5. 超链接的属性十一. 图片标签1. 能插入的图片类型2. src属性3. 标签的其他常用属性4. 注意事项十二. 特殊字符十三. 列表标签1. (无序列表)标签2. (有序列表)标签3. (定义列表)标签十四. 标签1. 单元格的合并2. 3. ,和标签十五. form表单(结合js使用)1. get方式2. post方式3. enctype4. 输入标签(文本框)5. 标签6. : 下拉表标签7. 标签: 多行文本输入框</a></li></ul></li><li><a href="#十六-快捷键">十六. 快捷键</a></li></ul></div></p> <hr> <h3 id="一-web标准">一. web标准</h3> <ul> <li> <p>(1) web准备介绍:</p> <ul> <li>w3c: 万维网联盟组织, 用来制定web标准的机构(组织)</li> <li>web标准: 制作网页遵循的规范</li> <li>web标准规范的分类: 结构标准, 表现标准, 行为标准</li> <li><code>结构: html</code> <code>表示: css</code> <code>行为: Javascript</code></li> </ul> </li> <li> <p>(2) web标准总结:</p> <ul> <li>结构标准: 相当于人的身体. html就是用来制作网页的</li> <li>表现标准: 相当于人的衣服. css就是对网页进行美化的</li> <li>行为标准: 相当于人的动作. JS就是让网页动起来, 具有生命力的</li> </ul> </li> </ul> <hr> <h3 id="二-浏览器介绍">二. 浏览器介绍</h3> <table> <thead> <tr> <th style="text-align:center">浏览器</th> <th style="text-align:center">内核</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">IE</td> <td style="text-align:center">trident</td> </tr> <tr> <td style="text-align:center">Chorme</td> <td style="text-align:center">blink</td> </tr> <tr> <td style="text-align:center">火狐</td> <td style="text-align:center">gecko</td> </tr> <tr> <td style="text-align:center">Safari</td> <td style="text-align:center">webkit</td> </tr> </tbody> </table> <p>PS: <code>浏览器内核</code>也就是浏览器所采用的<code>渲染引擎</code>, 渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息. <strong>渲染引擎是兼容性问题出现的根本原因.</strong></p> <hr> <h3 id="三-开发工具介绍">三. 开发工具介绍</h3> <p> Sublime Text、Webstorm</p> <hr> <h3 id="四-html介绍">四. HTML介绍</h3> <h4 id="1-html的概述">1. HTML的概述</h4> <ul> <li>(1) html全称Hypertext Markup Language, 翻译为超文本标记语言, 它不是一种编程语言, 而是一种描述性的标记语言, 用于描述超文本内容的显示方式. 比如字体、颜色、大小等. <ul> <li>超文本: 音频, 视频, 图片被称为超文本</li> <li>标记: <英文单词或者字母>称为标记, HTML页面都是由各种标记组成的</li> </ul> </li> </ul> <p><strong>作用</strong>: HTML是负责描述文档语义的语言.</p> <ul> <li>(2) html是一个纯文本文件(就是用.txt文件改名而成), 用一些标签来描述文字的语义, 这些标签在浏览器里面是看不到的, 因此称为"超文本", 所以就是"超文本标记语言"了. 所以, 接下来, 我们肯定要学习一堆html中的标签对儿, 这些标签对儿能够给文本不同的语义.<br> 比如, 面试官问你, h1标签有什么作用?<br> 正确答案: h1是一个标题标签, 给文本增加主标题的语义.<br> 错误答案: 给文字加粗、加黑、变大.</li> </ul> <p><strong>注意</strong>: HTML语言不是一个编程语言(有编译过程), 而是一个标记语言(没有编译过程), HTML页面直接由浏览器解析执行</p> <h4 id="2-html中的网络术语：">2. HTML中的网络术语：</h4> <ul> <li> <p>网页: 由各种标记组成的一个页面就叫网页.</p> </li> <li> <p>主页(首页): 一个网站的起始页面或者导航页面.</p> </li> <li> <p>标记: <code><p></code>称为开始标记, <code></p></code>称为结束标记, 也叫标签. 每个标签都规定好了特殊的含义.</p> </li> <li> <p>元素: <code><p></code>内容<code></p></code> 称为元素.</p> </li> <li> <p>属性: 给每一个标签所做的辅助信息.</p> </li> </ul> <hr> <h3 id="五-html颜色介绍">五. HTML颜色介绍</h3> <ul> <li> <p>颜色表示方式有如下3种:</p> <ul> <li>(1) 纯英文单词表示: red, green, blue, orange, gray等</li> <li>(2) 十进制表示: rgb(255,0,0)</li> <li>(3) 十六进制表示: #ff0000, #00ff00, #0000ff等</li> </ul> </li> <li> <p><strong>RGB色彩模式:</strong></p> </li> </ul> <p>自然界中所有的颜色都可以用红, 绿, 蓝(RGB)这三种颜色波长的不同强度组合而得, 这就是人们常说的三原色原理.</p> <p>RGB三原色也叫加色模式, 这是因为当我们把不同光的波长加到一起的时候, 可以得到不同的混合色. 例如: 红+绿=黄色, 红+蓝=紫色, 绿+蓝=青色.</p> <p>在数字视频中, 对RGB三基色各进行8位编码就构成了大约1678万种颜色, 这就是我们常说的真彩色. 所有显示设备都采用的是RGB色彩模式.</p> <p>RGB各有256级(0-255)亮度, 256级的RGB色彩总共能组合出约1678万种色彩, 即256×256×256=16777216.</p> <hr> <h3 id="六-html的规范">六. HTML的规范</h3> <p>HTML是一个弱势语言</p> <p>HTML不区分大小写</p> <p>HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符, 比如dos系统)</p> <ul> <li><strong>HTML的结构</strong>: <ul> <li>声明部分: 主要作用是用来告诉浏览器这个页面使用的是哪个标准(是HTML5标准).</li> <li>head部分: 将页面的一些额外信息告诉服务器, 不会显示在页面上</li> <li>body部分: 我们所写的代码必须放在此标签內</li> </ul> </li> </ul> <h4 id="1-编写html的规范">1. 编写html的规范</h4> <ul> <li>a. 所有标记元素都要正确的嵌套, 不能交叉嵌套. 正确写法举例: <code><h1><font></font></h1></code></li> <li>b. 所有的标记都必须小写</li> <li>c. 所有的标记都必须关闭 <ul> <li>双边标记: <code><span></span></code></li> <li>单边标记: <code><br></code>转成<code> <br/></code>, <code><hr></code>转成<code><hr/></code>, 还有<code><img src="URL"/></code></li> </ul> </li> <li>d. 所有的属性值必须加引号. 例如: <code><h1 id="head"></h1></code></li> <li>e. 所有的属性必须有值. 例如: <code><input type="radio" checked="checked"/></code></li> </ul> <h4 id="2-html的基本语法特征">2. html的基本语法特征</h4> <ul> <li><strong>a. html对换行不敏感, 对tab不敏感</strong></li> </ul> <p>HTML只在乎标签的嵌套结构, 嵌套的关系. 至于谁嵌套了谁, 谁被谁嵌套了, 和换行, tab无关. 换不换行, tab不tab, 都不影响页面的结构.</p> <p>也就是说, HTML不是依靠缩进来表示嵌套的, 它只关注标签的包裹关系. 但是, 我们发现有良好的缩进, 代码更易读. 所以要求大家都正确缩进标签.</p> <ul> <li><strong>b. 空白折叠现象</strong></li> </ul> <p>HTML中所有的文字之间, 如果有"空格, 换行, tab"都将被折叠为一个空格显示.</p> <ul> <li><strong>c. 标签要严格封闭</strong></li> </ul> <hr> <h3 id="七-html结构详解">七. html结构详解</h3> <h4 id="1-文档声明头doctype">1. 文档声明头<!DOCTYPE...></h4> <p>任何一个标准的html页面, 第一行一定是一个以<code><!DOCTYPE...></code>开头的, 这一行就是文档声明头, DocType Declaration, 简称DTD. 此标签可告知浏览器文档使用哪种HTML或XHTML规范.</p> <ul> <li><strong>PS:</strong> <ul> <li>XHTML: Extensible Hypertext Markup Language, 可扩展超文本标注语言.</li> <li>XHTML的主要目的是为了取代HTML, 也可以理解为HTML的升级版.</li> <li>HTML的标记书写很不规范, 会造成其它的设备(ipad、手机、电视等)无法正常显示.</li> <li>XHTML与HTML4.0的标记基本上一样的.</li> <li>XHTML是严格的、纯净的HTML.</li> </ul> </li> </ul> <h4 id="2-头标签head">2. 头标签<code><head></code></h4> <ul> <li>head标签都放在头部分之间. 这里面包含了: <code><title></code>, <code><meta></code>, <code><link></code>, <code><style></code>: <ul> <li><code><title></code>: 指定整个网页的标题, 在浏览器最上方显示</li> <li><code><meta></code>: 提供有关页面的基本信息</li> <li><code><link></code>: 定义文档与外部资源的关系</li> <li><code><style></code>: 定义内部样式表与网页的关系</li> </ul> </li> </ul> <h5 id="a-meta标签">a. meta标签</h5> <p>元素可提供有关页面的元信息(meta-information), 针对搜索引擎和更新频度的描述和关键词.</p> <p><code><meta></code>标签提供了元数据, 元数据也不显示在页面上, 但会被浏览器解析.</p> <p>META元素通常用于指定网页的描述, 关键词, 文件的最后修改时间, 作者, 和其他元数据.</p> <p>元数据可使用于浏览器(如何显示内容或重新加载页面), 搜索引擎(关键词), 或其他web服务.</p> <p><strong>meta标签的组成</strong>: meta标签有两个属性, 它们分别是<code>http-equiv</code>属性和<code>name</code>属性, 不同的属性又有不同的参数值, 这些不同的参数值就实现了不同的网页功能.</p> <p>(1) http-equiv属性</p> <p>它用来向浏览器传达一些有用的信息, 帮助浏览器正确地显示网页内容, 与之对应的属性值为content, content中的内容其实就是各个参数的变量值。如下:</p> <pre><code class="language-html"><!--重定向2秒后跳转到对应的网址,注意分号--> <meta http-equiv="refresh" content="2; URL=http://www.baidu.com"> </code></pre> <pre><code class="language-html"><!--每30秒刷新当前页面--> <meta http-equiv="refresh" content="30"> </code></pre> <pre><code class="language-html"><!--指定文档的内容类型和编码类型 --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </code></pre> <pre><code class="language-html"><!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> </code></pre> <p>(2) name属性</p> <p>主要用于页面的关键字和描述, 是写给搜索引擎看的, 关键字可以有多个用逗号隔开, 与之对应的属性值为content, content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的. 如下:</p> <pre><code class="language-html"><!--为搜索引擎定义关键词,能够提高搜索命中率,让别人能够找到你--> <meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript"> </code></pre> <pre><code class="language-html"><!--为网页定义描述内容,百度搜索结果就能显示这些内容,这个技术叫做SEO(search engine optimization),搜索引擎优化--> <meta name="description" content="免费 Web & 编程 教程"> </code></pre> <pre><code class="language-html"><!--让我们网页支持移动端,移动设备优先(了解即可)--> <meta name=viewport content="width=device-width,initial-scale=1"> </code></pre> <pre><code class="language-html"><!--定义网页作者--> <meta name="author" content="Runoob"> </code></pre> <h5 id="b-title标签">b. title标签</h5> <p>主要用来告诉用户和搜索引擎这个网页的主要内容是什么, 搜索引擎可以通过网页标题, 迅速的判断出当前网页的主题. 如: <code><title>百度一下,你就知道</title></code>, 效果如下:</p> <p><img src="https://img2018.cnblogs.com/blog/1464512/201811/1464512-20181109203658219-975637059.png" alt="" loading="lazy"></p> <hr> <h3 id="八-字体标签">八. 字体标签</h3> <p>字体标签包含：<strong><code><h1>~<h6></code></strong>, <code><font></code>, <code><u></code>, <code><b></code>, <strong><code><strong></code></strong>, <strong><code><em></code></strong>, <code><sup></code>, <code><sub></code></p> <ul> <li> <ol> <li>标题: 标题使用<code><h1></code>至<code><h6></code>标签进行定义. <code><h1></code>定义最大的标题, <code><h6></code>定义最小的标题.</li> </ol> </li> <li> <ol start="2"> <li>字体标签<code><font></code>(已废弃)</li> </ol> </li> <li> <ol start="3"> <li>粗体标签<code><b></code>或<code><strong></code>(已废弃)</li> </ol> </li> <li> <ol start="4"> <li>下划线标记<code><u></code>, 中划线标记<code><s></code>(已废弃)</li> </ol> </li> <li> <ol start="5"> <li>斜体标记<code><i></code>或<code><em></code>(已废弃)</li> </ol> </li> <li> <ol start="6"> <li>上标<code><sup></code>, 下标<code><sub></code></li> </ol> </li> </ul> <p>上下标这两个标签容易混淆. 我们可以这样记忆: b的意思是"bottom底部".如下示例代码:</p> <pre><code class="language-html">5<sup>2</sup> 8<sub>2</sub> </code></pre> <p>效果显示:</p> <p><img src="https://img2018.cnblogs.com/blog/1464512/201811/1464512-20181109203716000-1172827654.png" alt="" loading="lazy"></p> <hr> <h3 id="九-排版标签">九. 排版标签</h3> <h4 id="1-段落标签p">1. 段落标签<code><p></code></h4> <p>段落: 是英文paragraph的缩写</p> <p>注意: <code><p></code>标签是一个文本级标签, 即<code><p></code>里面只能放文字, 图片, 表单元素, 其他的一律不能放.</p> <h4 id="2-块级标签div和行内标签span">2. 块级标签<code><div></code>和行内标签<code><span></code></h4> <p>div和span是非常重要的标签, div的语义是division“分割”; span的语义就是span“范围, 跨度”. CSS课程中你将知道, 这两个东西, 都是最最重要的“盒子”.</p> <p>如果单独在网页中插入这两个元素, 不会对页面产生任何的影响. 这两个元素是专门为定义CSS样式而生的. 或者说, <code>div+CSS</code>可以用来实现各种样式.</p> <p><code><div></code>在浏览器中, 默认是不会增加任何的效果的, 但是语义变了, <code><div></code>中的所有元素是一个小区域.</p> <p><code><div></code>标签是一个<strong>容器级</strong>标签, 里面什么都能放, 甚至可以放<code><div></code>自己.</p> <p><code><span></code>也是表达“小区域, 小跨度”的标签, 但是是一个<strong>文本级</strong>的标签.</p> <p>就是说, <code><span></code>里面只能放置文字, 图片, 表单元素. <code><span></code>里面不能放<code><p></code>, <code><h></code>, <code><ul></code>, <code><dl></code>, <code><ol></code>, <code><div></code>.</p> <h4 id="3-换行标签br">3. 换行标签<code><br/></code></h4> <p>当你打算结束一行, 而又不想开始一个新的段落时, <code><br/></code>标签就派上用场了. 无论你将它置于何处, <code><br/></code>标签都会产生一个强制的换行. 注意<code><br/></code>没有结束标签, 把<code><br></code>标签写为<code><br/></code>是经得起未来考验的做法, XHTML和XML都接受在打开的标签内部来关闭标签的做法.</p> <h4 id="4-水平线标签hr">4. 水平线标签<code><hr/></code></h4> <p>水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分.</p> <h4 id="5-内容居中标签center已废弃">5. 内容居中标签<code><center></code>(已废弃)</h4> <p><code><center></code>代表是一个标签, 而不是一个属性值了. 只要是在这个标签里面的内容, 都会居于浏览器的中间, 到H5里面, <code><center></code>标签不建议使用.</p> <h4 id="6-预定义预格式化标签pre">6. 预定义(预格式化)标签<code><pre></code></h4> <p><strong>含义</strong>: <code><pre></code>标签将保留其中的所有的空白字符(空格, 换行符), 原封不动的输出结果(告诉浏览器不要忽略空格和空行)</p> <p><strong>注意</strong>: 真正排网页过程中, <code><pre></code>标签几乎用不着, 但在PHP中用于打印一个数组时使用.</p> <p><strong>PS</strong>: Chrome浏览器是世界上HTML5支持最好的浏览器, 提供了非常好的开发工具, 非常适合我们开发人员使用. 审查元素功能的快捷键是F12.</p> <hr> <h3 id="十-超链接标签a">十. 超链接标签<code><a></code></h3> <h4 id="1-外部链接">1. 外部链接</h4> <p>外部链接: 链接到外部文件. 如下示例:</p> <pre><code class="language-html"><a href=“new.html”>点击进入到新网页</a> </code></pre> <pre><code class="language-html"><a href=“http://www.baidu.com” target=“_blank”>进入百度</a> </code></pre> <p>a是英语anchor"锚"的意思, 就好像这个页面往另一个页面扔出了一个锚. a是一个文本级的标签.</p> <p>href是英语hypertext reference超文本地址的缩写. 读作“喝瑞夫”, 不要读作“喝夫”.</p> <h4 id="2-锚链接">2. 锚链接</h4> <p>锚链接: 指给超链接起一个名字, 作用是在本页面或者其他页面的不同位置进行跳转. 比如说, 在网页底部有一个向上的箭头, 点击箭头后回到顶部, 这个就是利用到了锚链接.</p> <p>首先我们要创建一个锚点, 也就是说, 使用name属性或者id属性给那个特定的位置起个名字. 如下示例:</p> <pre><code class="language-html"><h1 id="top" name="top">这是顶部标题</h1> <a href="#top">回到顶部</a> </code></pre> <p>上述代码中, <code><h1></code>标签元素这个锚叫做top. 然后在底部设置超链接a, 点击时将回到顶部(此时, 网页中的url的末尾也出现了<code>#top</code>), 注意href值中的<code>#</code>不要忘记了, 表示跳到名为top的特定位置, 这是规定.</p> <p>如果我们将<code><a></code>标签的代码改成<code><a href="new.html#top">回到顶部</a></code>, 就表示, 点击之后, 跳转到new.html页面的top锚点中去.</p> <p><strong>注意</strong>: name属性是HTML4.0以前使用的, id属性是HTML4.0后才开始使用. 为了向前兼容, name和id这两个属性都要写上, 并且值是一样的.</p> <h4 id="3-邮件链接">3. 邮件链接</h4> <p>代码举例:</p> <pre><code class="language-html"><a href="mailto:zhaoxu@tedu.cn">联系我们</a> </code></pre> <p>效果: 点击之后, 会弹出outlook, 作用不大.</p> <p>前提: 计算机中必须安装邮件客户端, 并且配置好了邮件相关信息.</p> <h4 id="4-特殊的几个链接">4. 特殊的几个链接</h4> <ul> <li>a. 返回顶部的位置:</li> </ul> <pre><code class="language-html"><a href="#">跳转到顶部</a> </code></pre> <ul> <li>b. 与JavaScript有关:</li> </ul> <p>(1) <code>JavaScript:;</code> 表示什么都不执行, 这样点击<code><a></code>时就没有任何反应, 例如:</p> <pre><code class="language-html"><a href="javascript:;">内容</a> </code></pre> <pre><code class="language-html"><!--我们可以这样写来阻止a标签的默认点击行为--> <a href="javascript:void(0);">内容</a> </code></pre> <p>(2) <code> javascript:</code>是表示在触发<code><a></code>默认动作时, 执行一段javascript代码. 例如:</p> <pre><code class="language-html"><a href="javascript:alert(1)">内容</a> </code></pre> <h4 id="5-超链接的属性">5. 超链接的属性</h4> <ul> <li><strong>herf</strong>: 目标url</li> <li><strong>title</strong>: 悬停文本</li> <li><strong>name</strong>: 主要用于设置一个锚点的名称</li> <li><strong>target</strong>: 告诉浏览器用什么方式来打开目标页面; target属性有以下几个值: <ul> <li><code>_self</code>: 在同一个网页中显示(默认值)</li> <li><code>_blank</code>: 在新的窗口中打开</li> <li><code>_parent</code>: 在父窗口中显示</li> <li><code>_top</code>: 在顶级窗口中显示</li> </ul> </li> </ul> <p>blank就是“空白”的意思, 表示新建一个空白窗口. 为啥有一个<code>_</code>, 这就是人为的规定, 没啥好解释的.</p> <p>也就是说, 如果不写<code>target=”_blank”</code>那么就是在相同的标签页打开, 如果写了<code>target=”_blank”</code>, 就是在新的空白标签页中打开.</p> <hr> <h3 id="十一-图片标签img">十一. 图片标签<code><img></code></h3> <p><code><img></code>: 代表的就是一张图片. img是自封闭标签, 也称为单标签.</p> <h4 id="1-能插入的图片类型">1. 能插入的图片类型</h4> <ul> <li> <p>能够插入的图片类型有: jpg(jpeg), gif, png, bmp. 各类型之间有什么区别, 介绍css时再讲.</p> </li> <li> <p>不能往网页中插入的图片格式有: psd, ai.</p> </li> </ul> <h4 id="2-src属性">2. src属性</h4> <p><strong>src属性</strong>: 图片的相对路径和绝对路径.</p> <p>html页面不是直接插入图片, 而是插入图片的引用地址, 所以也要把图片上传到服务器上.</p> <p>这里涉及到图片的一个属性: src属性, 它指图片的路径.</p> <p>在写图片路径时, 有两种写法: <strong>相对路径</strong>, <strong>绝对路径</strong></p> <ul> <li><strong>a. 相对路径</strong></li> </ul> <p>相对于当前页面所在的路径. 两个标记<code>.</code>和<code>..</code>分别代表当前目录和父级目录. 如下示例:</p> <pre><code class="language-html"><!-- 当前目录中的图片 --> <img src="2.jpg"> <img src="./2.jpg"> </code></pre> <pre><code class="language-html"><!-- 上一级目录中的图片 --> <img src="../2.jpg"> </code></pre> <ul> <li> <p><strong>b. 绝对路径</strong></p> <ul> <li>(1) 以盘符开始的绝对路径, 如下示例:</li> </ul> <pre><code class="language-html"><img src="C:UsersaaaDesktophtml-01images1.jpg"> </code></pre> <ul> <li>(2) 网络路径, 如下示例:</li> </ul> <pre><code class="language-html"><img src="http://www.baidu.com/2016040102.jpg"> </code></pre> </li> <li> <p><strong>总结</strong>:</p> <ul> <li>相对路径的好处: 站点不管拷贝到哪里, 文件和图片的相对路径关系都是不变的.</li> <li>相对路径使用有一个前提, 就是网页文件和你的图片, 必须在一个服务器上.</li> </ul> <pre><code class="language-css">问题: 我的网页在C盘,图片却在D盘,能不能插入呢? 答案: 用相对路径不能,用绝对路径也不能. </code></pre> <ul> <li>注意: 可以使用<code>file://</code>来插入, 但是这种方法, 没有任何意义! 因为服务器上没有所谓c盘, d盘.</li> </ul> </li> <li> <p><strong>综上</strong>:</p> <ul> <li>无论是在<code><a></code>标签, <code><img></code>标签, 如果要用路径, 只有两种路径能用, 就是相对路径和绝对路径.</li> <li>相对路径, 就是<code>../image/</code>这种路径. 从自己出发, 找到别人.</li> <li>绝对路径, 就是<code>http://</code>开头的路径.</li> <li>绝对不允许使用<code>file://</code>开头的东西, 这个是完全错误的!</li> </ul> </li> </ul> <h4 id="3-img标签的其他常用属性">3. <code><img></code>标签的其他常用属性</h4> <ul> <li> 宽度</li> <li>height: 高度</li> <li>title: 提示性文本, 公有属性, 也就是鼠标悬停时出现的文本</li> <li>align: 指图片是水平对齐方式, 属性值可以是: left, center, right</li> <li>alt: 当图片显示不出来的时候, 代替图片显示的内容. alt是英语 alternate "替代"的意思.(有的浏览器不支持)</li> </ul> <h4 id="4-注意事项">4. 注意事项</h4> <ul> <li> <p>a. 文本级的标签显示在浏览器上时, 不管你的图片多高, 它总会底边对齐, 这是一种现象: <strong>"高矮不齐, 底边对齐"</strong></p> </li> <li> <p>b. 如果想要保证图片等比例缩放, 请只设置width和height中其中一个</p> </li> <li> <p>c. 如果想实现图文混排的效果, 请使用align属性, 取值为left或right</p> </li> <li> <p>d. 如果想点击图片的时候跳转到某个链接, 应该是:</p> </li> </ul> <pre><code class="language-html"><a href="跳转的目标地址"> <img src="images/bojie.jpeg" alt="波姐" title='波多野结衣'> </a> </code></pre> <hr> <h3 id="十二-特殊字符">十二. 特殊字符</h3> <p><code> </code>: 空格(non-breaking spacing, 不断打空格),记住！！！</p> <p><code><</code>: 小于号(less than), 记住！！！</p> <p><code>></code>;: 大于号(greater than), 记住！！！</p> <p><code>&</code>: 符号&</p> <p><code>"</code>: 双引号</p> <p><code>'</code>: 单引号</p> <p><code>©</code>: 版权©, 记住！！！</p> <p><code>™</code>: 商标™</p> <p>比如说, 你想把<code><p></code>作为一个文本在页面上显示, 直接写<code><p></code>是肯定不行的, 因为这代表的是一个段落标签, 所以这里需要用到特殊字符. 代码应该这么写:</p> <pre><code class="language-html">这是一个HTML语言的<p>标签 </code></pre> <p>效果显示:</p> <p>这是一个HTML语言的<p>标签</p> <hr> <h3 id="十三-列表标签">十三. 列表标签</h3> <h4 id="1-ul无序列表标签">1. <code><ul></code>(无序列表)标签</h4> <p>ul( unordered list )无序列表, ul下的子元素只能是li( list item ),如下示例:</p> <pre><code class="language-html"><ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> </code></pre> <ul> <li><strong>总结</strong>: <ul> <li><code><li></code>不能单独存在, 必须包裹在<code><ul></code>里面, 反过来说, <code><ul></code>的"儿子"不能是别的东西, 只能是<code><li></code>.</li> <li>列表之间是可以互相嵌套的(<code><li></code>是一个块级标签, <code><li></code>里面什么都能放,甚至可以再放一个<code><ul></code>)</li> <li>type属性在html4.01中已经废弃, html5不支持</li> </ul> </li> </ul> <h4 id="2-ol有序列表标签">2. <code><ol></code>(有序列表)标签</h4> <p><code><ol></code>( ordered list )有序列表, <code><ol></code>下的子元素只能是<code><li></code>, 如下示例:</p> <pre><code class="language-html"><ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> </code></pre> <ul> <li> <p><strong>总结:</strong></p> <ul> <li><code><ol></code>和<code><ul></code>就是语义不一样, 怎么使用都是一样的</li> <li>type和start属性html4.01中已经废弃, html5不支持</li> <li><code><ol></code>这个东西用的不多,如果想要表达顺序, 大家一般也用<code><ul></code>. 如下示例:</li> </ul> <pre><code class="language-html"><ul> <li>1. 第一项</li> <li>2. 第二项</li> <li>3. 第三项</li> </ul> </code></pre> </li> </ul> <h4 id="3-dl定义列表标签">3. <code><dl></code>(定义列表)标签</h4> <p>dl( definition list )没有属性, dl的子元素只能是dt和dd.</p> <p><code><dl></code>标签与<code><dt></code>(定义项目/名字)和<code><dd></code>(描述每一个项目/名字)一起使用. 如下示例:</p> <pre><code class="language-html"><dl> <dt>站点信息</dt> <dd>意见反馈</dd> <dd>关于我们</dd> <dd>免责声明</dd> <dd>文章归档</dd> </dl> </code></pre> <pre><code class="language-html"><dl> <dt>Coffee</dt> <dd>- back hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </code></pre> <ul> <li><strong>总结:</strong> <ul> <li><code><dt></code>(definition title)列表的标题, 这个标签是必须写的.</li> <li><code><dd></code>(definition description)列表的列表项, 如果不需要它, 可以不加.</li> <li>定义列表用法很灵活, 可以用一个dt配多个dd, 也可以让每一个dl里只有一个dt和dd.</li> <li>dt, dd都是块级标签, 想放什么都可以, 所以现在应该更加清晰的知道: 用什么标签, 不是根据样子来决定, 而是根据语义(语义本质上是结构)来决定.</li> </ul> </li> </ul> <hr> <h3 id="十四-table标签">十四. <code><table></code>标签</h3> <p>表格标签用<code><table></code>表示, 一个表格<code><table></code>是由每行<code><tr></code>组成的, 每行是由<code><td></code>或者<code><th></code>组成的, 所以我们要记住, 一个表格是由行组成的(行是由列组成的), 而不是由行和列组成的. 如下表格示例:</p> <pre><code class="language-html"><table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </code></pre> <h4 id="1-单元格的合并">1. 单元格的合并</h4> <p>如果要将两个单元格合并, 那肯定就要删除一个单元格.</p> <ul> <li> <p><strong>横向合并:</strong> colspan, 例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置.</p> </li> <li> <p><strong>纵向合并:</strong>rowspan, 例如rowspan="2"表示单元格在垂直方向上占据两个单元格的位置.</p> </li> </ul> <pre><code class="language-html"><table border="1"> <tr> <th colspan="2">userinfo</th> </tr> <tr> <td >First Name:</td> <td>Bill Gates</td> </tr> <tr> <td rowspan="2">Telephone:</td> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </code></pre> <h4 id="2-caption">2. <code><caption></code></h4> <p><code><caption></code>: 表格的标题, 使用时和<code><tr></code>标签并列, 如下示例:</p> <pre><code class="language-html"><table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </code></pre> <h4 id="3-theadtbody和tfoot标签">3. <code><thead></code>,<code><tbody></code>和<code><tfoot></code>标签</h4> <ul> <li>这三个标签有与没有的区别: <ul> <li>a. 如果写了, 那么这三部分的代码<strong>顺序可以任意</strong>, 浏览器显示的时候还是按照thead, tbody, tfoot的顺序依次来显示内容; 如果不写, 那么浏览器解析并显示表格内容的时候是按照代码的从上到下的顺序来显示的.</li> <li>b. 当表格非常强大内容非常多的时候, 如果用thead, tbody, tfoot标签的话,那么<strong>数据可以边获取边显示</strong>; 如果不写, 则必须等表格的内容全部从服务器获取完毕才能显示出来.</li> </ul> </li> </ul> <hr> <h3 id="十五-form表单结合js使用">十五. form表单(结合js使用)</h3> <p>表单标签用<code><form></code>表示, 用于与服务器的交互. 表单就是收集用户信息的, 就是让用户填写和选择的.</p> <ul> <li> <p><strong>属性:</strong></p> <ul> <li>action: 指定表单数据的处理程序, 一般是PHP, 如:</li> </ul> <pre><code class="language-html">action="login.php"; </code></pre> <ul> <li>method: 表单数据的提交方式, 一般取值: get(默认)和post</li> </ul> </li> </ul> <p><code><form></code>标签里面的action属性和method属性: action属性就是表示将表单提交到哪里; method属性表示用什么http方法提交, 有get和post两种.</p> <h4 id="1-get方式">1. get方式</h4> <p>get方式将表单数据以<code>name="value"</code>形式追加到action指定的处理程序的后面, 两者用<code>?</code>隔开, 每一个表单的<code>name='value'</code>间用<code>&</code>符号隔开.</p> <ul> <li> <p><strong>特点:</strong></p> <p>只适合提交少量数据, 并且不太安全(不要提交敏感数据), url中能够看到提交的数据, 提交的数据类型只限于ASCII字符.</p> </li> </ul> <h4 id="2-post方式">2. post方式</h4> <p>post方式将表单数据直接(隐藏, url中不显示)发送到action指定的处理程序中. post发送的数据url不可见. action指定的处理程序可以获取到表单数据.</p> <ul> <li> <p><strong>特点:</strong></p> <p>可以提交海量信息, 相对来说安全一些, 提交的数据格式是多样的(word, excel, rar, img).</p> </li> </ul> <h4 id="3-enctype">3. enctype</h4> <p>enctype表示表单数据的编码方式(加密方式), 取值可以是: <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>. enctype只能在post方式下使用, 例如:</p> <pre><code class="language-html"><form action="" method="post" enctype=""></form> </code></pre> <ul> <li><code>application/x-www-form-urlencoded</code>指默认加密方式, 除了上传文件之外的数据都可以.</li> <li><code>multipart/form-data</code>表示上传附件时, 必须使用这种编码方式.</li> </ul> <h4 id="4-input输入标签文本框">4. <code><input></code>输入标签(文本框)</h4> <p><code><input></code>输入标签用于接收用户输入, 例如: <code><input type="text"/></code></p> <p><strong>属性:</strong></p> <ul> <li> <p>a. <code>type="属性值"</code>:</p> <ul> <li>(1) <code>text(默认)</code>: 文本类型</li> <li>(2) <code>passwword</code>: 密码类型</li> <li>(3) <code>radio</code>: 单选按钮, 名字相同的按钮作为一组进行选择</li> </ul> <p><mark>注意</mark>: 单选按钮, 天生是不能互斥的, 如果想互斥, 必须要有相同的name属性. name就是"名字".</p> <ul> <li> <p>(4) <code>checkbox</code>: 多选按钮, 名字相同的按钮作为一组进行选择</p> </li> <li> <p>(5) <code>checked</code>: 将单选按钮或多选按钮默认处于选中状态. 当<code><input></code>标签的<code>type="radio"</code>时, 可以用这个属性. 属性 值也是checked, 可以省略.</p> </li> <li> <p>(6) <code>hidden</code>: 隐藏框, 在表单中包含不希望用户看见的信息</p> </li> <li> <p>(7) <code>button</code>: 普通按钮, 结合js代码进行使用</p> </li> <li> <p>(8) <code>submit</code>: 提交按钮, 传送当前表单的数据给服务器或其他程序处理. 这个按钮不需要写value自动就会有“提交”文字. 这个按钮真的有提交功能. 点击按钮后, 这个表单就会被提交到form标签的action属性中指定的那个页面中去.</p> </li> <li> <p>(9) <code>reset</code>: 重置按钮, 清空当前表单的内容, 并设置为最初的默认值</p> </li> <li> <p>(10) <code>image</code>: 图片按钮, 和提交按钮的功能完全一致, 只不过图片按钮可以显示图片</p> </li> <li> <p>(11) <code>file</code>: 文件选择框.</p> <p><mark>提示</mark>: 如果要限制上传文件的类型, 需要配合JS来实现验证. 对上传文件的安全检查: 一是扩展名的检查, 二是文件数据内容的检查.</p> </li> </ul> </li> <li> <p>b. <code>name</code>: 表单的名称, 用于JS来操作或控制表单时使用</p> </li> <li> <p>c. <code>value=”内容”</code>: 表示文本框里的默认内容(已经被填好了的)</p> </li> <li> <p>d. <code>id</code>: 指表单的名称, 用于JS来操作或控制表单时使用</p> </li> <li> <p>e. <code>size="50"</code>: 表示文本框内可以显示五十个字符, 一个英文或一个中文都算一个字符</p> </li> <li> <p>f. <code>readonly</code>: 文本框只读, 不能编辑. 因为它的属性值也是readonly, 所以属性值可以不写. 用了这个属性之后, 在google浏览器中, 光标点不进去; 在IE浏览器中, 光标可以点进去, 但是文字不能编辑.</p> </li> <li> <p>g. <code>disabled</code>: 文本框只读, 不能编辑, 光标点不进去. 属性值可以不写.</p> </li> </ul> <h4 id="5-label标签">5. <code><label></code>标签</h4> <p>我们先来看这样一段代码:</p> <pre><code class="language-html"><input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女 </code></pre> <p>对于上面这样的单选框, 我们只有点击那个单选框(小圆圈)才可以选中, 点击“男”, “女”这两个文字时是无法选中的. 于是, label标签就派上了用场.</p> <p>本质上来讲, “男”, “女”这两个文字和<code><input></code>标签是没有关系的, 而label就是解决这个问题的. 我们可以通过label把汉字包裹起来.</p> <p><strong>解决方法如下:</strong></p> <pre><code class="language-html"><input type="radio" name="sex" id="nan" value=”man” /><label for="nan">男</label> <input type="radio" name="sex" id="nv" value=”women” /><label for="nv">女</label> </code></pre> <p>上方代码中, input元素要有一个id, 然后label标签有一个for属性, 和input标签的id相同, 那么这个label和input就有绑定关系了. 任何表单元素都有label.</p> <h4 id="6-select-下拉表标签">6. <code><select></code>: 下拉表标签</h4> <p><code><select></code>标签里面的每一项用<code><option></code>表示. select就是"选择", option就是"选项".</p> <p><code><select></code>标签和<code><ul></code>, <code><ol></code>, <code><dl></code>一样, 都是组标签.</p> <p><strong>属性:</strong></p> <ul> <li><code><select></code>标签的属性: <ul> <li><code>multiple</code>: 可以对下拉列表中的选项进行多选. 没有属性值.</li> <li><code>size="2"</code>: 如果属性值大于2, 则列表为滚动视图. 默认属性值为1, 即下拉视图.</li> </ul> </li> <li><code><option></code>标签的属性: <ul> <li><code>selected</code>: 预选中. 没有属性值.</li> </ul> </li> </ul> <p><strong>代码示例:</strong></p> <pre><code class="language-html"><select multiple="" size=”2”> <option>小学</option> <option>初中</option> <option selected="">高中</option> <option selected="">大学</option> <option>研究生</option> </select> </code></pre> <h4 id="7-textarea标签-多行文本输入框">7. <code><textarea></code>标签: 多行文本输入框</h4> <ul> <li> <p>属性:</p> <ul> <li><code>name</code>: 提交给服务器的key值</li> <li><code>value</code>: 提交给服务器的值</li> <li><code>rows="4"</code>: 指定文本区域的行数</li> <li><code>cols="20"</code>: 指定文本区域的列数</li> <li><code>readonly</code>: 只读</li> </ul> </li> <li> <p>代码示例:</p> </li> </ul> <pre><code class="language-html"><textarea name="txtInfo" rows="4" cols="20" value=””>路飞学城</textarea> </code></pre> <hr> <h3 id="十六-快捷键">十六. 快捷键</h3> <ul> <li> <p>emeet语法:</p> <ul> <li><code>！</code>+<code> tab</code></li> <li><code>ul</code>><code>li</code>*5 + <code>tab</code></li> <li><code>div</code>><code>p</code>*3 + <code>tab</code></li> <li><code>div</code>#<code>main</code> + <code>tab</code></li> <li><code>div.login</code> + <code>tab</code></li> </ul> </li> </ul>