一.HTML简介
1.什么是HTML
-
介绍：HTML 是用于描述网页的超文本标记语言，它并非编程语言，而是标记语言，通过标记标签来描述网页。其中，超文本包含文本、图片、视频、音频及链接等。
-
在浏览器中执行
文件名称 文件类型 所能存放的内容 qyiao.txt 文本文件 文字 qyiao.doc Word文档 文字、图片、超链接、表格 qyiao.xls Excel表格 文字、图片、超链接、表格 qyiao.html 超文本 文字、图片、超链接、表格、音频、视频
2.HTML基本结构
-
<!DOCTYPE html> //定义文档类型为html <html leng="zh"> //指定页面语言，这路zh表示文字的显示形式为中文，en为英文，也可以不写 <head> //页面头部部分的 起始标签 <meta charest="utf-8"> //字符集（编码格式）为utf-8 <title>HTML</title> //定义页面的标题，将显示在浏览器的标题栏或选项卡上 </head> //页面头部部分的 结束标签 <body> //页面主体部分的 起始标签 <H1>HTML基础</H1> //级别为1的标题元素，用于显示页面的主要标题 <p>HTML超文本标记语言</p> //段落元素，用于显示一段文本内容 </body> //页面主体部分的 结束标签 </html> //用于结束html标签，表示HTML文档的结束
二.HTML语法
1.HTML标签语法
-
- HTML元素 由开始标签和结束标签组成。
- 位于开始标签和结束标签中间的文本是元素的内容。
- HTML标签 有开始必须有结束。如果是没有内容的标签（空标签），用 />来结束。
- 标签具有属性， 属性用来表示标签的性质和特征。属性要在开始标签中指定。
2.HTML常用标签
-
说明 表示 单双标签 标题标签 h1-h6 双标签 段落标签 p 双标签 超链接标签 a 双标签 表单标签 form 双标签 表单元素标签 input 单标签 图片标签 img 单标签
A.标题标签
-
<h1></h1> //双标签 <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
B.段落标签
-
<p>这是一个段落</p> //双标签 <p align="center">段落水平居中</p> -
属性 值 描述 align left、center、right 设定水平对齐方式
C.超链接
-
<a href=""></a> //双标签 <a href="https://www.baidu.com">title</a> -
属性 值 描述 href url 设定链接地址 target _blank 设定在何处打开链接 title text 设定链接提示信息
D.图片标签
-
<img src=""/> //单标签 <img src="1.jpg" alt="图片加载失败"/> -
属性 值 描述 src url 设定图片地址 alt text 当图片无法显示时，显示出此信息 width px、% 设定图片宽度 height px、% 设定图片高度 -
如何指定图片地址？
情形 写法 图片在同一级目录 <img src="1.jpg" alt=""/>
<img src="./1.jpg" alt=""/>图片在上一个目录 <img src="../1.jpg" alt=""/>
3.表格
-
IDE快速生成表格
table>tr*4>td*4 //tr是行 td是列 -
表格结构
<table width="300" border="1"> <tr> //第一行 <td>学号</td> //第一列 <td>姓名</td> //第二列 <td>性别</td> //第三列 <td>年龄</td> //第四列 </tr> <tr> //第二行 <td>101</td> //第一列 <td>张三</td> //第二列 <td>男</td> //第三列 <td>18</td> //第四列 </tr> <tr> //第三行 <td>102</td> //第一列 <td>李四</td> //第二列 <td>女</td> //第三列 <td>17</td> //第四列 </tr> <tr> //第四行 <td>103</td> //第一列 <td>王五</td> //第二列 <td>男</td> //第三列 <td>19</td> //第四列 </tr> </table>
4.特殊字符
-
特殊字符 实体字符 空格 小于号 < 大于号 > 引号 " 版权号 ©
三.form表单
1.form标签
-
<form action="#" method="get"> 账号：<input type="text" name="username"><br><br> //<br>表示换行 密码：<input type="password" name="password"><br><br> <input type="submit" value="提交"> </form> -
属性 值 描述 action url 设定表单提交地址 method get、post 设定表单数据提交方式 enctype multipart/form-data 表单包含文件上传控件时，必须使用该值
2.input标签
-
<input type="text" name="username"> -
属性 值 描述 type text、password、radio、checkbox、submit、button、reset、image 、file、hidden 设定元素类型 name name 设定元素名称 value value 设定元素的值 maxlength number 设定字符最大长度 -
type属性值
属性值 具体描述 text 文本框 password 密码框 radio 单选框 checkbox 复选框 submit 提交按钮 button 普通按钮 reset 重置按钮 image 图片按钮 file 文件域 hidden 隐藏域
3.textarea标签
-
<textarea></textarea> //多行文本框 <textarea name="content" cols="30" rows="10"></textarea> -
属性 值 描述 cols number 设定文本框列数（宽度） rows number 设定文本框行数（高度）
4.select标签
-
<select></select> //下拉列表框 <select name="city"> <option value="bj" selected="selected">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> <option value="gz">广州</option> </select> -
属性 值 描述 selected selected 设定默认选择项