一.基础知识

1.使用标签的形式来识别网页中不同的组成部分(标签就是元素)

  1. <html></html>--根标签 页面中最大的标签
  2. <head></head>--头部标签，head中必须设置title
  3. <title></title>--文档的标题标签 
  4. <body></body>--主体标签

2.超文本：指超链接（使用超链接可以跳转到另一个页面）

3.标签一般成对出现，但是也存在单独的，称为自结束标签

4.注释在查看页面源代码的时候可以看见 注释不能嵌套

5.属性：在标签中可以设置属性 属性是一组名值对

6.文档类型声明：<!doctype html> (写在页面最顶部，提示浏览器我们的是HTML5)

  1. <!DOCTYPE html>
  2. <html lang="en">--定义当前文档内容显示的语言，en表示英语，zh-CN为中文
  3. <head>
  4.     <meta charset="UTF-8">--字符集
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="shortcut icon" href="./img/favicon.ico">//引入网站图标
  9. </head>
  10. <body>
  11. </body>
  12. </html>

7.标签不区分大小写

8.编码：将字符转换为二进制码的过程

9.解码：将二进制码转换为字符的过程

10.字符集：编码和解码所采用的规则叫做字符集

常见字符集：ASCII-美国

ISO88591-欧洲

GB2312-中国

GBK-中国

UTF-8-万国码（最通用）

11.乱码问题：编码解码采用的字符集不同会产生乱码

12.实体：就是转义字符的意思

13.行内元素和块元素：

（1）在页面中独占一行的元素称为块元素（blockquote element）：标题标签,p,div,ul,ol,li等
（2）在页面中不独占一行的元素称为行内元素(inline element)：a,span,em,strong,ins等

  • 行内元素转为块元素：用display：block;//设置css样式来改变
  • 块元素转为行内元素：用display：inline;//设置css样式来改变
  • 转为行内块元素：用display：inline-block;//设置css样式来改变

（3）一般情况下，会在块元素内放行内元素，但不会在行内元素中放块元素
（4）块元素中基本什么都可以放
（5）链接标签里不能再放链接标签
（6）行内块元素：同时具有块元素和行内元素的特点。例如img,input,td等元素
（6）p元素中不能放任何块元素

14.记事本编译默认字符格式为gb2312

15.浏览器在解析时，会对不符合规范的内容进行修正，修正后的内容要在开发者工具查看（不规范例如:p内嵌套了块元素；标签写在根元素外；根标签出现了除head和body之外的其他子元素）

16.绝对路径和相对路径

（1）./表示当前目录（可省略不写）

（2）../表示上一级目录

17.id属性（每个id必须唯一）：id值必须字母开头

二.基本语法

1.两种自结束标签

  1. <img>
  2. <img />

2.注释

  1. <!--
  2. 注释内容
  3. 注释是用来解释说明的，也可以将不想显示的内容隐藏
  4. -->

3.属性

  1. <!--
  2. 属性只可以在开始标签和自结束标签设置
  3. 属性可以没有值 一个标签可以有多个属性
  4. 属性必须根据文档规定写 不可以瞎写 有属性值用引号 单引号双引号均可
  5. 下面的color size就是固定的 不是自己规定的
  6. font标签内的文字就会三号字体 红色显示出来
  7. -->
  8. <!--特别注意 尽量不使用font 将这些控制元素样式的工作交给css -->
  9. <h1>属性<font color="red" size="3">学习</font></h1>

4.实体：&+特殊含义字符+；

  1. <!--比如连续多个空格 浏览器识别不出来 就要用转义字符 -->
  2. <p>今天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;星期五</p>
  3. <!--需要几个就写出来几个 上面代表五个空格-->
  4. <!--字母左右两侧的<>会被识别为标签-->
  5. a<b>c<!--就会识别为b标签-->
  6. <!--解决方法 加空格或使用实体-->
  7. a < b > c
  8. a&gt;b&lt;c

image.png

5.标签：用于设置一些元数据

  1. <!--字符集的设置 Charset指定字符集-->
  2. <meta Charset="utf-8">
  3. <!--name用于指定数据名称  content用于指定用户的内容-->
  4. <!--Keywords用于指定关键字-->
  5. <!--拿京东举例 搜索关键字如下 在浏览器搜索关键字就会出现京东-->
  6. <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
  7. <!--description用于对网站的描述-->
  8. <!--依旧拿京东举例 -->
  9. <meta name="description"
  10.           content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
  11. <!--将页面重定向到另一个网站-->
  12. <meta http-equiv="refresh" content="3;url=http://123.com"
  13. <!--三秒后跳转到url指定的这个新网站-->

image.png

6.标签的内容会显示在搜索超链接的文字上</h4><pre><code class="lang-html"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/27997679/1650438705001-bfd6684c-af25-43ee-813c-64c5e8dc2fcc.png#clientId=ud5671c44-5d9f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=138&id=u6ce43b10&margin=%5Bobject%20Object%5D&name=image.png&originHeight=138&originWidth=810&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31887&status=done&style=none&taskId=u10153465-bb43-4b3d-8d1b-036ba020481&title=&width=810" alt="image.png"> <a name="ReFY8"></a></p> <h4 id="51omwd"><a name="51omwd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7.标题标签 ：块元素</h4><pre><code class="lang-html"><!--共有六级标题--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!--段落标签--> <p>段落</p> <!--标题分组标签--> <hgroup> <h1>一级标签</h1> <h2>二级标签</h2> </hgroup> </code></pre> <p><a name="gpKic"></a></p> <h4 id="9u9t1j"><a name="9u9t1j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8.用于强调的标签（格式化标签）</h4><pre><code class="lang-html"><!--em标签用于表示语音语调的加重，会有字体倾斜效果 它是行内元素--> <em>段落</em> <!--strong标签用于表示强调，会有字体加粗的效果 它是行内元素--> <p>今天是<strong>星期五</strong></p> <!--del标签表示删除线 它是行内元素--> <p>这是<del>删除线</del></p> <!--ins标签表示下划线 它是行内元素--> <p>这是<ins>下划线</ins></p> </code></pre> <p><a name="DdPyr"></a></p> <h4 id="2pizf4"><a name="2pizf4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.用于引用的标签</h4><pre><code class="lang-html"><!--长引用用blockquote 块元素 会换行且缩进显示--> <p>子曰：<blockquote>学而时习之，不亦说乎</blockquote></p> <!--短引用用q 行内元素 不会换行，但会缩进显示--> <p>子曰：<q>学而时习之，不亦说乎</q></p> </code></pre> <p><a name="HAWU8"></a></p> <h4 id="c8cz4b"><a name="c8cz4b" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.换行标签：自结束标签</h4><pre><code class="lang-html"><p>子曰：学而时习之，<br>不亦说乎</p> <!--想换几行就写几个 单独出现 没有</br>--> </code></pre> <p><a name="z5sIT"></a></p> <h4 id="151wn6"><a name="151wn6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.分区块的标签</h4><pre><code class="lang-html"><!--header表示网页的头部--> <!--main表示网页的主体 通常一个网页只有一个--> <!--footer表示网页的底部--> <!--nav表示页面的导航--> <!--aside表示和主体相关的其他内容（侧边栏）--> <!--article表示一个独立的文章--> <!--section表示一个独立的区块 上边的标签都不能表示时用section--> <!--div 无语义 块元素 就表示一个区块--> <!--span 行内元素 无语义 一般用于页面中选中文字--> <header></header> <main></main> <footer></footer> <nav></nav> <aside></aside> <article></article> <section></section> <div></div> <span></span> </code></pre> <p><a name="i8wFu"></a></p> <h4 id="ag4dos"><a name="ag4dos" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.列表（list）</h4><pre><code class="lang-html"><!--有序列表 用ol标签创建 使用li标签表示列表项--> <ol> <li>一</li> <li>二</li> <li>三</li> </ol> <!--无序列表 用ul标签创建 使用li标签表示列表项--> <ul> <li>一</li> <li>二</li> <li>三</li> </ul> <!--定义列表 用dl标签创建 使用dt表示定义的内容 用dd对内容解释说明--> <dl> <dt>定义列表</dt> <dd>解释会换行缩进显示</dd> </dl> <!--ul用的做多 列表可以嵌套使用--> </code></pre> <p><a name="BdO30"></a></p> <h4 id="5mnnpv"><a name="5mnnpv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>13.超链接（行内元素）-主要作用是跳转</h4><pre><code class="lang-html"><!--超链接用a标签定义 a标签可以嵌套除自身外的所有元素--> <a href="www.baidu.com" target="_self">百度</a> <!--a标签中用href指定跳转到的目标路径--> <!--target属性值可为“_self”或“_blank” _self表示在当前页面打开超链接 _blank表示在新页面打开超链接 --> <!-- 页面翻到底部能点击回到顶部 实现此功能就将href="#" 这样页面不会跳转 直接回到顶部 若想跳转到其他位置 #+id值实现跳转 --> <a href="#">回到顶部</a> <a href="#要跳转标签的属性值">到指定位置</a> 跳转到指定位置需要先给一个标签设置id属性值，把属性值写#后，就会实现跳转 <!--可用#做超链接的占位符--> <a href="#">占位</a> <!--没用作用的超链接属性值设置为javascript:;--> <a href="javascript:;">没有作用的超链接</a> <!--href中填入压缩包.zip或执行文件.exe，点击就会进行下载--> <a href="qq.zip">下载链接</a> </code></pre> <p><a name="Lpnor"></a></p> <h4 id="2q5lmx"><a name="2q5lmx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>13.图片标签-用于引入外部的图片：行内元素</h4><pre><code class="lang-html"><!--用img标签 img属于替换元素（介于块元素和行内元素之间，且具有两种元素的特点）--> <!--src属性是图像标签的必需属性,属性值为图片的路径--> <img src="./a.png"> <!--alt属性,属性值为对图片的描述 搜索引擎会根据alt搜索 一般在图片加载不出来时才显示--> <img src="./a.png" alt="描述"> <!--title属性，属性值就是鼠标移到图像上会显示的文字信息--> <img src="./a.png" alt="描述" title="提示文本信息"> <!--width，height为图片的宽度和高度 单位是像素 只调节宽度或高度 另一个属性会等比例变化 一般情况下，不建议修改图片大小 --> </code></pre> <p><a name="ru4kf"></a></p> <h4 id="3zlfzc"><a name="3zlfzc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>14.图片的格式</h4><pre><code class="lang-html"><!--图片的四种格式 1.jpg(jpeg):一般用来显示照片 支持的颜色丰富 不支持动图和透明效果 2.gif:颜色单一的图片，动图 支持的颜色少 支持简单透明和动图 3.png:支持颜色丰富，支持复杂透明 不支持动图（网页中常用） 4.webp:谷歌推出的格式 具有以上所有优点且占内存小 缺点是兼容性不好 base64:不是图片格式 将照片使用base64编码，可以将图片转为字符，通过字符的形式引入图片 一般需要图片跟网页一同加载时使用 图片格式选取原则：效果一样用小的 效果不同用效果好的 --> </code></pre> <p><a name="PD0OQ"></a></p> <h4 id="evqwm5"><a name="evqwm5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>15.内联框架（网页嵌套）</h4><pre><code class="lang-html"><!--src指嵌套进来的网页 width，height设置宽度和高度 framebroder表示嵌入页面是否要边框 它的值只能取0（无边框）或1（有边框） --> <iframe src="网址" width="200" height="200" frameborder=0></iframe> </code></pre> <p><a name="iRn6m"></a></p> <h4 id="8n34fc"><a name="8n34fc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>16.音视频的导入</h4><pre><code class="lang-html"><!--audio标签用来引入音视频文件 引入后默认不允许用户控制播放暂停--> <!--audio的属性（都不需要给值 允许就写 不允许就不写） controls：是否允许用户控制 autoplay：音视频是否自动播放 loop：是否循环播放 muted：静音播放 --> <audio src="a.mp3" controls autoplay loop></audio><!--这个就是都允许--> <!--这种方式audio标签内加入文字不显示在网页 还可以用source指定文件 source支持文字显示在网页 如下 若无法显示音频 就会显示对不起 请升级浏览器--> <audio controls><!--source引入音频--> 对不起 请升级浏览器 <source src="a.mp3"> <source src="b.mp3"><!--a播放不了就b，b也不行就会输出文字--> </audio> <video controls><!--source引入音频--> <source src="a.mp4"> <source src="b.mp4"> </video> </code></pre> <p><a name="ielUX"></a></p> <h4 id="ao3aw"><a name="ao3aw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>17.按钮标签</h4><pre><code class="lang-html"><button></button>--会生成一个按钮 <button onclick="alert('点击成功');">点我</button> /* 上例按钮显示点我，点击后显示点击成功（alert()是Js代码） */ </code></pre> <p><a name="xgX0s"></a></p> <h1 id="5krgp8"><a name="5krgp8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>三.表格</h1><p><a name="HpiAd"></a></p> <h4 id="ah4kc0"><a name="ah4kc0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.表格的创建</h4><p>（1）创建表格用table标签，tr标签表示行，td标签表示单元格<br />（2）一个table中有几个tr标签就是有几行，一个tr中有几个td就是有几列<br />（3）th标签表示表头（文字会加粗居中） <a name="fw5HT"></a></p> <h4 id="64487p"><a name="64487p" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.创建一个8行6列的表格</h4><pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ border: 1px black solid; border-collapse: collapse; } th{ border: 1px black solid; } td{ border: 1px rgb(61, 38, 38) solid; } a{ text-decoration: none; } </style> </head> <body> <table align="center"> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>下降</td> <td>345</td> <td>123</td> <td><a href="#">贴吧 </a><a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>2</td> <td>盗墓笔记</td> <td>下降</td> <td>124</td> <td>675432</td> <td><a href="#">贴吧 </a><a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>3</td> <td>西游记</td> <td>上升</td> <td>212</td> <td>7654</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>4</td> <td>东游记</td> <td>上升</td> <td>23</td> <td>75645</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>5</td> <td>甄嬛传</td> <td>下降</td> <td>121</td> <td>7676</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>6</td> <td>水浒传</td> <td>上升</td> <td>5765756</td> <td>1231421</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>7</td> <td>三国演义</td> <td>上升</td> <td>234</td> <td>7686</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> </table> </body> </html> </code></pre> <p><a name="CXoXO"></a></p> <h4 id="b3lntf"><a name="b3lntf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.合并单元格</h4><p>（1）横向合并n个单元格：colspan=”n”<br />（2）纵向合并n个单元格：rowspan=”n”<br />（3）写入td标签中</p> <pre><code class="lang-html"> <table border="1" width=300px align="center"> <tr> <td rowspan="2">a1</td> <td>a2</td> <td>a3</td> <td>a4</td> <td>a5</td> </tr> <tr> <td>b2</td> <td>b3</td> <td>b4</td> <td>b5</td> </tr> <tr> <td>c1</td> <td>c2</td> <td>c3</td> <td colspan="2">c4</td> </tr> </table> </code></pre> <p><a name="zMPUo"></a></p> <h4 id="29amqk"><a name="29amqk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.长表格</h4><p>（1）长表格就是将成表格分为三部分：</p> <ul> <li>头部（表头）：用thead标签<ul> <li>thead标签中可以用th标签设置表头，有加粗效果</li></ul> </li><li>主体（数据）：用tbody标签<ul> <li>有几个tbody就有几行</li></ul> </li><li>尾部：用tfoot标签</li></ul> <p>（2）注意：</p> <ul> <li>长表格更改三大部分标签的顺序不会影响表格</li><li><p>就会把tfoot当作尾部，tbody当作主体，thead当作头部，与书写顺序无关</p> <pre><code class="lang-html"><body> <table> <thead> <th>日期</th> <th>收入</th> <td>支出</td> <td>合计</td> </thead> <tbody> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tbody> <tfoot> <td></td> <td></td> <td>合计</td> <td>5</td> </tfoot> </table> </body> </code></pre> <p><a name="FOWKF"></a></p> <h4 id="fiyy8z"><a name="fiyy8z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.表格的样式</h4><p>（1）border-collapse属性：设置边框的距离<br />border-collapse: collapse;设置边框合并<br />（2）边框等还是用之前的选择器<br />（3）tr:nth-child(2n+1）选中tr中的奇数元素<br />（4）若表格中没有tbody，直接使用了tr，那么浏览器会自动创建一个tbody，并将tr放入<br />tr不是table的子元素<br />（5）td标签中的元素默认垂直居中，可以通过vertical-align属性设置<br />vertical-align：middle；是居中<br />text-align：center；文本居中<br />（6）示例：<br /><img src="https://cdn.nlark.com/yuque/0/2022/png/27997679/1652149882958-de7d08cb-f6ab-4bef-b622-86621692ede3.png#clientId=ue23e55b1-87e7-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=830&id=u33ea3cab&margin=%5Bobject%20Object%5D&name=image.png&originHeight=830&originWidth=1524&originalType=binary&ratio=1&rotation=0&showTitle=false&size=204545&status=done&style=none&taskId=u73cd6974-029f-4506-947a-7e6b145e854&title=&width=1524" alt="image.png"> <a name="FWz0j"></a></p> <h1 id="b4qnov"><a name="b4qnov" class="reference-link"></a><span class="header-link octicon octicon-link"></span>四.表单</h1><p><a name="IsGqE"></a></p> <h4 id="4kk9it"><a name="4kk9it" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.表单在现实生活中用于提交数据；在网页中用于将本地的数据提交给远程的服务器</h4><p>（1）完整的表单由表单域，表单控件，提示信息组成</p> </li><li><p>表单域：包含表单元素的区域，用form标签</p> </li><li>表单控件</li><li>提示信息</li></ul> <p>（2）多用于注册页面<br /><img src="https://cdn.nlark.com/yuque/0/2022/jpeg/27997679/1652150624844-a0c2eba8-bf91-434f-aff4-ded7f63376a3.jpeg#clientId=ue23e55b1-87e7-4&crop=0&crop=0&crop=1&crop=1&from=drop&id=u13b87875&margin=%5Bobject%20Object%5D&name=283a1bc222c947f82f9e9e140b0292c.jpg&originHeight=541&originWidth=1391&originalType=binary&ratio=1&rotation=0&showTitle=false&size=113990&status=done&style=none&taskId=u50bd2841-1764-4484-ac0d-fe3fcdde6ea&title=" alt="283a1bc222c947f82f9e9e140b0292c.jpg"> <a name="zzHD8"></a></p> <h4 id="b7rboo"><a name="b7rboo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.创建表单</h4><p>（1）使用form标签（用input，select和textarea标签设置控件）<br />（2）必须知道form的属性</p> <table> <thead> <tr> <th>表单属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>表单要提交的服务器的网址</td> </tr> <tr> <td>method</td> <td>数据的提交方式(get/post…)</td> </tr> <tr> <td>name</td> <td>指定表单的名称</td> </tr> <tr> <td>required</td> <td>设置该属性表示必填</td> </tr> <tr> <td>placeholder</td> <td>表单的提示信息</td> </tr> <tr> <td>autofocus</td> <td>页面加载完毕自动聚焦到指定表单</td> </tr> <tr> <td>autocomplete</td> <td>历史输入记录(on/off)</td> </tr> <tr> <td>maxlength</td> <td>设置输入的最长字符数</td> </tr> <tr> <td>readonly</td> <td>表示该框只读</td> </tr> <tr> <td>disabled</td> <td>表示该框禁用</td> </tr> </tbody> </table> <p>（3）表单可以设置文本框，input标签，想要数据提交到服务器就必须给文本框指定name属性，type为属性值，指定为什么框，value属性是指定默认显示的值</p> <ul> <li>文本框：<input type="text" name="username"> //文本框密码框加入value属性，属性值就是默认填入的值</li><li>密码框：<input type="password" name="password"> //加入value属性，属性值就是默认填入的值</li><li>提交按钮：<input type="submit" value="显示出的文字"> value内填入什么，提交按钮就显示什么</li><li>重置按钮：<input type="reset"> 实现一键清除 重新输入</li><li>普通按钮：<input type="button" value="显示出的文字"> value内填入什么，提交按钮就显示什么,需配合JS使用才有更好的效果 | type属性值 | 描述 | | —- | —- | | button | 定义可点击按钮 | | checkbox | 定义多选框 | | file | 定义输入字段和”浏览”按钮，供文件上传 | | hidden | 定义隐藏的输入字段 | | image | 定义图像形式的提交按钮 | | password | 定义密码字段，该字段中的字符被掩码 | | radio | 定义单选按钮 | | reset | 定义重置按钮（会清除表单中的所有数据） | | submit | 定义提交按钮（会把表单数据发送到服务器） | | text | 定义单行的输入字段 |</li></ul> <p><a name="DNkME"></a></p> <h4 id="1juf7l"><a name="1juf7l" class="reference-link"></a><span class="header-link octicon octicon-link"></span>注：h5新增type类型：</h4><table> <thead> <tr> <th>type属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>search</td> <td>搜索框</td> </tr> <tr> <td>color</td> <td>颜色选择表单</td> </tr> <tr> <td>tel</td> <td>手机号</td> </tr> <tr> <td>email</td> <td>限制用户输入必须为email类型</td> </tr> <tr> <td>url</td> <td>限制用户输入必须为url类型</td> </tr> <tr> <td>date</td> <td>限制用户输入必须为日期类型</td> </tr> <tr> <td>time</td> <td>限制用户输入必须为时间类型</td> </tr> <tr> <td>month</td> <td>限制用户输入必须为月类型</td> </tr> <tr> <td>week</td> <td>限制用户输入必须为周类型</td> </tr> <tr> <td>number</td> <td>限制用户输入必须为数字类型</td> </tr> </tbody> </table> <p>（4）单选按钮：每个声明出现一个按钮，想要实现单选就要给他们设置相同的name属性，不然每个都可以一起选，有多少选项就设置多少个type为radio的input标签</p> <ul> <li><input type="radio" name="abc"> </li><li>一定注意给所有选项加上共同的name属性值</li><li>选择框（单选按钮，多选按钮这类）必须设置一个value属性，value属性最后会作为用户填写的值传递给服务器</li><li>不指定value就不知道选的那个选择框</li><li>可以在标签加入checked 表示默认选择该选项 <input type="radio" name="abc" checked> </li></ul> <p>（5）多选框：就是可以选择多个选项 用type=”checkbox”来声明</p> <ul> <li><input type="checkbox" name="abc"></li><li>也要知道value name</li><li>也可以在标签加入checked 表示默认选择该选项 <input type="checkbox" name="abc" checked> </li></ul> <p>（6）下拉列表：使用select标签创建 也要指定name属性<br /> 下拉列表项：用option标签，需要指定value </p> <ul> <li>加入selected表示默认选择该选项<pre><code class="lang-html"><body> <select> <option value="1" >山东</option> <option value="2">辽宁</option> <option value="3" selected>黑龙江</option>//默认选择该选项 </select> </body> </code></pre> <img src="https://cdn.nlark.com/yuque/0/2022/png/27997679/1652150511620-bab1671a-66ce-4808-a043-202d8c5988cc.png#clientId=ue23e55b1-87e7-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=253&id=u30801553&margin=%5Bobject%20Object%5D&name=image.png&originHeight=253&originWidth=1268&originalType=binary&ratio=1&rotation=0&showTitle=false&size=80209&status=done&style=none&taskId=u641801f3-9b7b-4c1d-8856-a5d1b77a91c&title=&width=1268" alt="image.png"><br />（6）textarea文本域元素：用于大量书写内容，就不能用单行文本框，就要用textarea标签</li></ul> <ul> <li>可以设置属性cols，属性值设置为整数，表示每行容纳多少字符</li><li><p>还可以设置rows，属性值为整数，表示每次显示多少行内容 <a name="Ethdx"></a></p> <h4 id="4gzhrw"><a name="4gzhrw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.补充label标签</h4><p>（1）label标签为input元素定义标注：label标签用于绑定一个表单元素，当点击label标签内文本时，浏览器会自动将焦点移动到对应的表单元素，用来增加用户体验</p> </li><li><p>label标签的for属性必须与相关元素的id值相同</p> <pre><code class="lang-html"><label for="sex"></label> <input type="radio" name="sex" id="sex">//注意是和id相同 </code></pre> <p><a name="aHtkF"></a></p> <h1 id="9ru0o"><a name="9ru0o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>五.Emmet语法-快速生成html代码</h1><p><a name="lS6Px"></a></p> <h4 id="eibegs"><a name="eibegs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.直接输入标签名，不用加<></h4><p><a name="YVa6f"></a></p> <h4 id="dn1h5j"><a name="dn1h5j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.想要多个标签就用<em>；例如三个div就写div</em>3</h4><p><a name="aTlJ2"></a></p> <h4 id="5493ff"><a name="5493ff" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.父级关系用大于号；例如生成ul中有子元素li，ul>li</h4><p><a name="q08g2"></a></p> <h4 id="8ge6n1"><a name="8ge6n1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.生成兄弟元素用+号；例如div+p</h4><p><a name="gUbXi"></a></p> <h4 id="ghn2xf"><a name="ghn2xf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.生成class值用.，id用</h4><p><a name="Z4lPT"></a></p> <h4 id="5uww8w"><a name="5uww8w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6.想要生成的标签有顺序，用$表自增；div.{$}*5生成class值为1-5的div标签</h4><p><a name="xo8S4"></a></p> <h4 id="53p4t5"><a name="53p4t5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7.生成的标签内部内容用{}；例如div{helliworld}</h4><p>注意：配合使用上述语句，可以让编写更高效 <a name="ukW5f"></a></p> <h1 id="7pno6u"><a name="7pno6u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>六.综合练习</h1><p><a name="t1Yau"></a></p> <h4 id="9so4ez"><a name="9so4ez" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.注册页面：<br /><br /></h4><p>```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </p> <link rel="stylesheet" href="/practice/c/demo1.css"> </li></ul> <p></head></p> <p><body> <h3>青春不常在，抓紧谈恋爱</h3> <form> <table width="1000px"> <tr> <td>性别</td> <td><input type="radio" name="sex">男 <input type="radio" name="sex">女 </td> </tr> <tr> <td>生日</td> <td> <select> <option value="0">—请选择年—</option> <option value="1">1998</option> <option value="2">1999</option> <option value="3">2000</option> <option value="4">2001</option> <option value="5">2002</option> <option value="6">2003</option> </select> <select> <option value="0">—请选择月—</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select> <option value="0">—请选择日—</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> </select> </td> </tr> <tr> <td>所在地区</td> <td> <select> <option value="0">北京</option> <option value="1">上海</option> <option value="2">辽宁</option> <option value="3">深圳</option> <option value="4">成都</option> <option value="5">苏州</option> <option value="6">黑龙江</option> </select> </td> </tr> <tr> <td>婚姻状况</td> <td><input type="radio" name="first" checked>未婚 <input type="radio" name="first">已婚 <input type="radio" name="first">丧偶</td> </tr> <tr> <td>学历</td> <td> <select name="school"> <option value="1">幼儿园</option> <option value="2">小学</option> <option value="3">初中</option> <option value="4">高中</option> <option value="5">本科</option> </select> </td> </tr> <tr> <td>喜欢的类型</td> <td> <input type="checkbox" name="second">妩媚的 <input type="checkbox" name="second">可爱的 <input type="checkbox" name="second">小鲜肉 <input type="checkbox" name="second">老腊肉 <input type="checkbox" name="second" checked>都喜欢 </td> </tr> <tr> <td>自我介绍</td> <td> <textarea cols="30" rows="3">自我介绍</textarea> </td> </tr> <tr> <td rowspan="4"></td> <td><input type="submit" value="免费注册"></td> </tr> <tr> <td><input type="radio" checked>我同意注册条款和会员加入标准</td> </tr> <tr> <td><a href="#">我是会员，直接登录</a></td> </tr> <tr> <td> <h4>我承诺</h4> <ul> <li>年满18岁，单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </form></p> <p></body> </html></p> <pre><code><a name="K8wZV"></a> # 七.网站TDK三大标签SEO优化 <a name="Id959"></a> #### 1.SEO(搜索引擎优化)：利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式 <a name="R3ugx"></a> #### 2.SEO的目的：对网站进行深度优化，从而获得免费的流量，进而提高排名 <a name="yNlAn"></a> #### 3.页面必须有以下三个因素用来符合SEO的优化 （1）title：网站标题标签 - 一般写为：网站名+简单介绍 （2）meta标签中的description：网站说明<br />（3）meta标签中的keyword：搜索引擎关键词 <a name="qrHW4"></a> #### 4.示例 ```html <div class="logo"> <h1><a href="/index.html" title="品优购商城">品优购商城</a></h1> </div> //css .logo a{ display: block; width: 171px; height: 61px; background-image: url("../img/logo.png"); font-size: 0px; } </code></pre><p><a name="fmOTw"></a></p> <h1 id="bvjqu5"><a name="bvjqu5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>八.更多网页有关用法可以进网站查询（中文）：<a rel="nofollow" href="https://www.w3school.com.cn/">链接</a></h1>