HTML01

一、引言

1.1HTML概念

网页，是网站中的一个页面，通常网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称HTML文件。

二、HTML简介

2.1什么是HTML

HTML全称：Hyper Text Markup Language（超文本标记语言）

  • 超文本∶页面内可以包含图片、链接，甚至音乐、程序等非文字元素
  • 标记∶标签，不同的标签实现不同的功能
  • 语言∶人与计算机的交互工具

2.2 HTML能做什么

HTML使用标记标签来描述网页，展示信息给用户

2.3HTML书写规范

  • HTML标签是以尖括号包围的关键字
  • HTML标签通常是成对出 现的，有开始就有结束
  • HTML通常都有属性，格式∶属性=属性值（多个属性之间空格隔开）
  • HTML标签不区分大小写，建议全小写

三、HTML基本标签

3.1结构标签

  1. <html>∶根标签
  2.     <head>∶ 网页头标签
  3.         <title></title>∶页面的标题
  4.     </head>
  5.     <body>
  6.     </body>∶ 网页正文
  7. </html>
属性名 代码 描述
text 设置网页正文中所有文字的颜色
bgcolor 设置网页的背景色
background 设置网页的背景图

颜色的表示方式∶

  • 第一种方式∶用表示颜色的英文单词，例，red green blue
  • 第二种方式∶用16进制表示颜色，例，#00000 #ff#325687#377405

3.2 排版标签

  • 可用于实现简单的页面布局
  • 注释标签∶
  • 换行标签∶
  • 段落标签∶
    • 特点∶段与段之间有空行
    • 属性∶ align对齐方式（lert、center、right）
  • 水平线标签∶
    • 属性∶
      • width∶水平线的长度（两种∶第一种∶像素表示;第二种，百分比表示）
      • size∶水平线的粗细（像素表示，例如∶10px）
      • color∶水平线的颜色
      • align∶水平线的对齐方式

3.3块标签

使用CSS+DIV是现下流行的一种布局方式

标签 代码 描述
div
行级块标签，独占一行，换行
span 行内块标签，所有内容都在同一行

3.4基本文字标签

属性名 代码 描述
size 用于设置字体的大小，最小1号，最大7号
color 用于设置字体的颜色
face 用于设置字体的样式

3.5文本格式化标签

使用标签实现标签的样式处理

标签 代码 描述
b 粗体标签
strong 加粗
em 强调字体
i 斜体
small 小号字体
big 大号字体
sub 上标标签
sup 下标标签
del 删除线

3.6标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签 代码 描述
h1

| 1号标题，最大字号 | | h2 |

| 2号标题 | | h3 |

| 3号标题 | | h4 |

| 4号标题 | | h5 |

| 5号标题 | | h6 |

| 6号标题，最小字号 |

3.7列表标签（清单标签）

无序列表∶使用一组无序的符号定义，

    1. <ul type="circle">
    2.     <li></li>
    3. </ul>
    属性值 描述 用法举例
    1 数字类型
      A 大写字母类型
        a 小写字母类型
          I 大写古罗马
            i 小写古罗马

              列表嵌套∶无序列表与有序列表相互嵌套使用

              1. 代码举例：
              3. <ol>
              4.     <1i></li>
              5.     <li></li>
              6.     </li>
              7.         <ul>
              8.             <li></li>
              9.         </ul>
              10.     </1i>
              11. </ol>

              3.8图形标签

              在页面指定位置处中引入一幅图片，03HTML - 图1

              属性名 描述
              src 引入图片的地址
              width 图片的宽度
              height 图片的高度
              border 图片的边框
              align 与图片对齐显示方式
              alt 提示信息
              hspace 在图片左右设定空白
              vspace 在图片的上下设定空白

              3.9 链接标签

              • 在页面中使用链接标签跳转到另一页面
                • 标签∶
                • 属性∶href跳转页面的地址（跳转到外网需要添加协议）
              • 设置跳转页面时的页面打开方式，target属性
                • _blank在新窗口中打开。
                • _self在原空口中打开
              • 指向同一页面中指定位置
                • 定义位置∶
                • 指向∶

              3.10表格标签

              普通表格（table，tr，td）

              1. <table>
              2.     <tr>
              3.         <td></td>
              4.     </tr>
              5. </table>

              表格的列标签（th）∶内容有加粗和居中效果

              1. <table>
              2.     <tr>
              3.         <th></th>
              4.     </tr>
              5. </table>

              表格的列合并属性（colspan）∶在同一行内同时合并多个列

              1. <table>
              2.     <tr>
              3.         <td colspan=""></td>
              4.     </tr>
              5. </table>

              表格的行合并属性（rowspan）∶在同一列跨多行合并

              1. <table>
              2.     <tr rowspan="">
              3.         <td></td>
              4.     </tr>
              5. </table

              四、综合案例

              image.png

              五、HTML表单标签

              html表单用于收集不同类型的用户输入数据

              5.1form元素常用属性

              • action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
              • method∶请求方式∶ get 和post
                • get:
                  • 地址栏，请求参数都在地址后拼接 path?name-“张三”&password-“123456”
                  • 不安全
                  • 效率高
                  • get请求大小有限制，不同浏览器有不同，但是大约是2KB;一般情况用于查询数据
              • post:
                • 地址栏∶请求参数单独处理
                • 安全可靠些
                • 效率低
                • post请求大小理论上无限；一般用于插入删除修改等操作
              • enctype∶表示是表单提交的类型
                • 默认值∶application/x-www-form-urlencoded普通表单
                • multipart/form-data 多部分表单（一般用于文件上传）

              5.2 input元素

              作为表单中的重要元素，可根据不同type值呈现为不同状态

              属性值 描述 代码
              text 单行文本框
              password 密码框
              radio 单选按钮
              checkbox 复选框
              date 日期框
              time 时间框
              datetime 日期和时间框
              email 电子邮件输入
              number 数值输入
              file 文件上传
              hidden 隐藏域
              range 取值范围
              color 取色按钮
              submit 表单提交按钮
              button 普通按钮
              reset 重置按钮
              image 图片提交按钮

              5.3 select 元素（下拉列表）

              • 单选下拉列表∶
              • 默认选中属性∶selected=”selected”
              1. <select>
              2.     <option selected="selected">内容</option>
              3.     ...
              4.     <option></option>
              5. </select>
              • 多选下拉列表属性∶
              • 多选列表∶multiple=”multiple”
              1. <select multiple="multiple">
              2.     <option></option>
              3. </select>

              5.4 textarea元素（文本域）

              多行文本框∶

              5.5 综合示例

              image.png

              六、HTML框架标签

              • 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
              • 使用框架的缺点∶
                • 开发人员必须同时跟踪更多的HTML文档
                • 很难打印整张页面

              6.1框架结构标签frameset

              • 框架结构标签（）用于定义如何将窗口分割为框架
              • 每个 frameset 定义了一系列行或列
              • rows/columns 的值规定了每行或每列占据屏幕的面积

              6.2框架标签frame

              每个 frame 引入一个 html 页面

              1. <frameset cols="*,*">
              2.     <frame src="info1.html"/>
              3.     <frame src="info2.html"/>
              4. </frameset>

              6.3基本的注意事项

              • 不能将标签与标签同时使用
              • 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在标签中加入∶noresize=”noresize”

              6.4综合案例

              image.png

              七、HTML的其它标签和特殊字符

              7.1其他标签

              1. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
              3. <!--该网页的描述-->
              4. <meta http-equiv="description" content="this is my page">
              6. <!--该网页的编码-->
              7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
              9. <!--href∶引入css文件的地址-->
              10. <link rel="stylesheet" type="text/css" href="./styles.css">
              12. <!--src∶ js的文件地址-->
              13. <script type="text/javascript" src=""></script>

              7.2 特殊字符

              1. 占位符∶空格 - &nbsp;

              HTML02

              一、排版标签：

              1.1标题：

              1. <h1>标题</h1> #一共有6个标题，最大是h1，最小是h6

              1.2链接：

              1. <a href="https://www.baidu.com" target="_blank">百度搜索</a>

              创建链接，target为可选参数未新建页面跳转，默认直接跳转新页面。

              1.3空链接:

              href=”#” #表示空链接，用于页面还未做出来时占位。

              1.4换行

              这是内容
              换行 break单词。换行和

              不同，换行紧凑，段落P间隔大。

              1.5布局标签:

              1. <div>内容</div> 一个独占一行 <span>内容</span>多个只占一行

              1.6文本格式化标签:

              1. <i></i>和<em></em> 文字倾斜 
              2. <b></b>和<strong></strong> 加粗 
              3. <s></s>和<del></del> 删除线 
              4. <u></u>和<ins></ins> 下划线

              1.7图像标签

              1. <img src="图片路径" />

              1.8属性

              alt=”无法显示图片” #无法显示图片是的文字内容
              title=”照片描述” #停留在图片上的文字内容
              width=”300” #图片宽
              height=”600” #图片高
              borde=”10” #图像边框宽度

              1.9注释

              1. <!-- 这是注释 --> #注释ctrl+/

              1.10路径：

              1. <img src="../images/one.jpg" /> #../代表上一目录

              1.11描点：

              1. <a href="#start"> 这个是描点连接 </a> #去锚点地方 
              2. <h5 id="start">这个正文内容，跳转过来的地方</h5> #设置锚点名

              记忆方法： id=xxx 给这个地方标记一个名称（被动）
              去一个描点的地方（主动）

              1.12base标签

              1. <base target="_bank" > #标识所有连接均为_bank属性，一般写在head里面

              1.13预格式化文本：

              按照书写格式来显示 

              1. <pre>
              2.     这个格式化的文字 
              3. 这里的文字     这里的字体 
              4. </pre>

              1.14特殊字符：

              空格  
              < <
              > >

              二、表格：

              1. <table> #大表格 
              2.   <caption>个人信息表</caption> #表格标题 
              3.   <tr>
              4.     <th>标题1</th> 
              5.     <th>标题2</th> 
              6.     <th>标题3</th> 
              7.   </tr> 
              8.   <tr> #表格里的一行 
              9.     <td>中文</td> 一行里的一格，写多少个就有多少格 
              10.     <td>英文</td> #td改成th，表示表头，文字为加粗居中 
              11.     <td>法语</td> 
              12.   </tr> 
              13. </table>

              2.1表格属性：

              1. border 表格边框像素，默认0,表格透明 
              2. cellspacing 单元格之间的空白间距，默认2 
              3. cellpadding 单元格内容与边框的距离，默认1 
              4. width 总体宽度 
              5. height 总体高度 
              6. align 对齐方式，left,center,right 
              7. th，表示表头，文字为加粗居中

              2.2合并单元格：

              跨行合并：rowspan=”合并单元格个数”
              跨列合并：colspan=”合并单元格个数”
              和并时合并单元格不同，这个属于跨列或跨行扩展单元格，被扩展部分不需要预先写好单元格。
              例如：colspan=”3” 等于横着扩展3个合并的单元格，所有右边2个格子不需要写代码

              colspan=”3”————-不需要写代码————不需要写代码 td td td
              || td td td
              11 |——-不需要代码|——-不需要代码 11
              ```` ```` ``` ```

              2.3表格划分结构

              顶部是表格thead，中间内容只表格tbody，底部tfoot

              三、列表：

              无序列表：前面无序号的，叫无序列表。

                unordered 无序，list （ul)
                有序列表：前面有数字序号，叫有序。
                  ordered 有序，list（ol) 

                  1. <ul> #无序是 
                  2.   <li>苹果</li> 
                  3.   <li>香蕉</li> 
                  4.   <li>雪梨</li> 
                  5. </ul>

                  有序示例：
                  1. 苹果
                  2. 香蕉
                  3. 雪梨
                  无序示例： 

                  1.   - 苹果 
                  2.   - 香蕉 
                  3.   - 雪梨

                  3.1自定义列表：

                  definition 定义 list (dl) 

                  <dl> # dl开头自定义列表 
  <dt>广东省：</dt> #dt ,t相当于title标题 
  <dd>珠海市</dd> #dd下级的内容 
  <dd>江门市</dd> 
</dl>

                  示例效果：
                  广东省：
                  珠海市
                  江门市

                  3.2表单：

                  input控件 

                  用户名：<input type="text" value="默认显示的文本">

                  image.png
                  image属性需要 src=”url”
                  button 属性需要value=”按钮名称”
                  同一个单选按钮radio 需要给予同一个name=”aihao”,证明这些radio都是一个组

                  3.3label标签：

                  • 用于绑定单个元素，点击label标签的时候，会跳转到绑定的输入框上。
                  • 用label包含input控件
                    • 用法1：label包含代码块
                  • 用法2：先指定标签跳转 
                    <label for="user">用户名</label> 
<input id="user" type="text" value="输入用户名">

                    3.4文本域

                    文本域<textarea></textarea>
                    2.3下拉列表 
                    <select > 
<option selected="selected">广东</option> #selected默认选中 
</select>

                    3.5表单域：

                    把表单的所有内容，写在表单域里，属于一个整体提交信息
                    cation提交的位置，method，提交方式get或post，name区分不同的表单域 
                    <form action="url" method="get" name="zhuce">
表单的内容代码 
</form>
                    代表一块区域，用于布局页面
                    是一个内联，例如

                    这个是标题的内容

                    这样CSS改变h3样式，
                    而span里的内容独立一个样样式。