1.1HTML的简述
1.1.1HTML是什么
-
HTML：（Hyper Text Markup Language） 超文本标记语言
-
文本：相当于记事本里写的文字。 展示信息
-
超文本：超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字
-
语言：工具。
-
标记：标签
1.1.2HTML的作用
- HTML是由标签所组成的语言，能展示超文本效果
- HTML是用来写网页的，是设计页面的基础。
1.1.3HTML的语言特性
- HTML代码是由头和体组成
<html>
<head>
<title> 标题</title>
</head>
<body>需要展示给用户看的信息内容</body>
</html>
<html>标签就相当于 java类 大括号
<head>中存放的都是网页的说明性内容，例如标题
-
HTML文件的扩展名为html或者htm。Htm是老的命名规范，html的新的
-
HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
-
HTML标签通常由开始标签和结束标签组成。例如:<font>内容体</font>
开始标签和结束标签之间的内容叫做内容体 -
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如：
自关闭 -
HTML标签不区分大小写，为了方便阅读，建议使用小写。
-
HTML标签是有属性的，格式为：属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号
-
HTML标签建议包裹嵌套，不建议交叉嵌套。如下图所示
语言特性图解.png
1.1.4 编译器的选择
- 选择使用Hbuilder
- 自己百度入门教程（炒鸡简单）
1.2 HTML的基本标签
1.2.1字体标签和格式化标签
- <font>
- 字体标签，用于展示效果中修饰文字样式
- <font 属性名=”属性值”>文字</font>
- size:控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效
- color：控制字体颜色. 使用英文设置（例如：red,blue…）
- face：控制字体类型。只能设置系统字库中存在的字体类型
- 代码及其结果
<body>
今天天气<font color="red" size="4" face="楷体">好晴朗</font>
</body>
font.png
-
- HTML源码中换行，浏览器解析时会自动忽略。
- 换行标签，用于展示效果中换行
- 代码及其结果
<body>
窗前明月光
窗前明月光
<br />
窗前明月光
</body>
br.png
- <p></p>
- 段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
- align:段落内容的对齐方式
默认是left， 内容居左
Right 右
Center 居中
- 代码及其结果
<body>
窗前明月光
<p>疑是地上霜</p>
<p align="right">举头望明月</p>
<p align="center">低头思故乡</p>
</body>
p.png
- <h1></h1>
- 标题标签，用于展示效果中划分标题
- 其中<h1>最大，<h6>最小
- 代码及其结果
<body>
<h1>李白和杜甫是一个时代的</h1>
<h2>李白和杜甫是一个时代的</h2>
<h3>李白和杜甫是一个时代的</h3>
<h4>李白和杜甫是一个时代的</h4>
<h5>李白和杜甫是一个时代的</h5>
<h6>李白和杜甫是一个时代的</h6>
</body>
h1.png
-
- HTML源码中的多个空格，效果中最终会合并成一个。
空格符号，用于展示效果中显示一个空白的位置
- HTML源码中的多个空格，效果中最终会合并成一个。
- 代码及其结果
<body>
李 白
<br />
李 白
</body>
nbsp.png
- HTML注释
- 用于注释HTML源码，不在HTML效果中展示。
只能在源码中看到，页面展示效果中是没有 - 格式：
- 用于注释HTML源码，不在HTML效果中展示。
1.2.2 图片标签
-
<img/>
-
用于在页面效果中展示一张图片。
- src：指明图片的路径。（必有属性）
- 图片路径的写法：
-
内网路径：
- 绝对路径：文件在硬盘上的具体位置。【不建议使用】
例如：C:\ JavaWeb001_html\img\c_1.jpg - 相对路径：从引入者所在目录出发。【建议使用相对路径】
例如：../img/c_1.jpg
../表示上一层目录
./表示当前目录
- 绝对路径：文件在硬盘上的具体位置。【不建议使用】
-
互联网路径：
必须前面加上http://
例如：http://www.baidu.com/xxx.jpg
-
- width：图片宽度
- height：图片的高度
- 宽度和高度的设置：
- 默认单位是px，像素。例如：width=”400” 其实设置的是 width=”400px”。固定设置方式
- 百分比设置。例如：width=”50%”。 是父标签的百分比。 动态改变的。
-
代码及其结果
<body>
<img src="img/龙王的工作.jpg" />
<img src="img/龙王的工作.jpg" width="50%"/>
</body>
属性自己试 不想对萝莉下手
imag.png
-
列表标签
- 无序列表标签，用于在效果中定义一个无序列表
- <ul></ul>
- 列表条目项标签，用于在效果中定义一个列表的条目
- <li></li>
- 有序列表标签，用于在效果中定义一个有序列表
- <ol></ol>
- 其中 type 属性可以改变列表符号
- start 可以选择开始序号
-
代码及其结果
<body>
<ul type="square">
<li>五花牛肉</li>
<li>小炒肉</li>
<li>梅花肉</li>
</ul>
<ol type="a">
<li>五花牛肉</li>
<li>小炒肉</li>
<li>梅花肉</li>
</ol>
</body>
ulol.png
1.2.3 超链接标签
- <a></a>
- 超链接标签，用于在效果中定义一个可以点击跳转的链接
- href：超链接跳转的路径 (必有属性)
- 内网本机路径：相对路径和绝对路径
- 互联网路径：http://地址
本页：默认跳转到本页 - 超链接正常工作：
- a标签中必须有内容
- a标签必须有href属性
- 代码及其结果
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.jianshu.com">简书</a>
</body>
a.png
- 注意：
- a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
- a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片
1.2.4 表格标签
- <table></table>
- 表格标签，用于在效果中定义一个表格
- border：设置表格的边框粗细
- width：设置表格的宽度
- <tr></tr>
- 表格的行标签，用于在效果中定义一个表格行
- <td></td>
- 表格的单元格标签，用于在效果中定义一个表格行中的单元格
- 表格书写顺序
表的入门书写顺序.png
- 定义一个表格 <table></table>
- 定义表格中的一行 <tr></tr>
- 在表格一行中定义单元格 <td></td> 内容就可以写在单元格中
- 代码及其结果
<body>
<table border="1" align="center">
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>小米</td>
<td>100</td>
<td>98</td>
<td>68</td>
</tr>
<tr>
<td>小话</td>
<td>13</td>
<td>94</td>
<td>62</td>
</tr>
</table>
</body>
table.png
-
<th></th>
- 表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
- <th>和<td>唯一区别：<th>内容 居中加粗
-
单元格合并
<td>或者<th>都有两个单元格合并属性：
- colspan：跨列合并单元格
- rowspan：跨行合并单元格
- 合并步骤：
-
确定合并哪几个单元格，确定是跨列合并还是跨行合并
在第一个出现的单元格上书写 合并单元格属性
合并几个单元格，属性值就书写几
被合并的单元格必须删掉 -
熟练以后可以只用这样写
-
这不做演示了 你们自己做 我已经习惯直接写了！！！！
-
<table width="100%" border="1" align="center">
<tr align="center" >
<td rowspan="2" >
<img src="img/big01.jpg"/ width="100%">
</td>
<td colspan="3">
<img src="img/middle01.jpg" width="100%"/>
</td>
<td align="center">
<img src="img/small03.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small02.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small03.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
</tr>
<tr>
<td align="center">
<img src="img/small03.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small02.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small02.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small02.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small02.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
<td align="center">
<img src="img/small02.jpg">
<br />
<a href="index.html">蒸锅</a>
<br />
￥299
</td>
</tr>
</table>
合并.png
1.2.5 块标签
- <span></span>
- 行级的块标签，用于在效果中 一行上定义一个块，进行内容显示。
- span有多少内容，就会占用多大空间。
- Span不会自动换行 适用于少量数据展示
- 代码及其结果
<body>
<span>我是小熊1111111111111</span>
<span>我是小熊2222222222222</span>
</body>
span.png
-
<div></div>
- 块级的块标签，用于在效果中 定义一块，默认占满一行，进行内容的显示
- 默认占满一行
- 会自动换行
- 适用于大量数据展示
-
代码及其结果
<body>
<div>我是小熊1111111111111</div>
<div>我是小熊2222222222222</div>
</body>
div.png
- Div和span的应用场景图解
divspan应用场景.png
1.2.6 框架标签
- 框架标签：<frameset>
- <frameset> 标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签<frame>来确定页面的位置。
- <frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。
- <frameset>和<body>两个不能共存。
- rows属性和cols属性取值：值1,值2,值3,….. 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。
- 框架子标签：<frame>
- <frame>标签，用于设置<frameset>框架集中的一个页面（框架）。
- src属性：确定页面的路径
- noresize属性：框架分隔先不能移动
- target属性：确定需要显示的页面在何处显示
- <frame>标签，用于设置<frameset>框架集中的一个页面（框架）。
- 代码及其结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,85%">
<frame src="top.html" noresize="noresize"/>
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>
frameset.png
1.3表单标签详解
1.3.1输入项标签
- <input/>标签
- type:设置该标签的种类
- text:文本框。 默认
- password:密码框。 内容为非明文
- radio:单选框。 在同一组内有单选效果
- checkbox:复选框。 在同一组内有复选效果
- submit:提交按钮。用于控制表单提交数据
- reset:重置按钮。 用于将表单输入项恢复到默认状态
- file:附件框。用于文件上传。
- hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
- button:普通按钮。需要和JS事件一起用
- name: 单选框、复选框进行数据的分组。
- 设置该标签对应的参数名
某个表单输入项需要通过参数列表提交，就必须设置name属性
- 设置该标签对应的参数名
- value:设置该标签对应的参数值。
- 作为按钮的名字
- value属性的设置策略：
- 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入
- 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
- checked:设置单选框/复选框的默认选中状态
- readonly:设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交
- disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交
- type:设置该标签的种类
1.3.2 选择标签
- <select></select>标签 定义一个选择框
- name: 设置该标签对应的参数名
- multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选。
- <option></option>标签
- 选项标签，用于为一个选择框添加一个选项
- alue:设置需要提交的参数值。
- selected:设置选项的默认选中状态
- 注意事项：
- Option的内容体一般是用来进行展示
- 参数值 应该是option的value属性值
1.3.3文本域标签
-
<textarea></textarea>标签
-
表单输入项标签之一，用户可以在该标签上 通过输入 进行数据的输入。
- name: 设置该标签对应的参数名
-
文本域和文本框区别：
- 文本框不能换行，文本域可以
- 文本框参数值是value属性，文本域参数值是标签的内容体
1.3.4表单标签
-
<form></form>标签。
- 用于在效果中定义一个表单，用于提交用户填写的数据。
-
action:将数据提交到何处。
- 默认提交到本页。
- 本机内网路径：
- 相对路径：
- 绝对路径： - 互联网路径：
- http://www.baidu.com/xxx
-
method:将数据以何种方式提交
-
默认为：get
-
提交方式可定义：get 或者 post
-
Get提交方式特点：把数据拼接到地址栏上
-
Post提交方式特点：没有把提交数据拼接到地址栏上。请求体
-
Get和post提交方式区别：
-
get提交的参数列表拼接到了地址栏后面
-
post方式不会 拼接地址栏
- get方式提交的数据 敏感信息不安全
Post方式提交的数据 相对安全 - get方式提交的数据量 有限的
Post方式从理论上提交的数据量 无限大
- get方式提交的数据 敏感信息不安全
-
尽量使用post方式提交表单
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="Demo2.html" method="get">
用户名:
<input type="text" name="name" value="请输入名字" />
<br />
密码:
<input type="password" name="password" />
<br />
<input type="radio" name="gender" / value="男" checked="checked">男
<input type="radio" name="gender" / value="女">女
<br />
<input type="checkbox" name="222" value="篮球" />篮球
<input type="checkbox" name="222" value="足球" checked="checked" />足球
<input type="checkbox" name="222" value="乒乓球" />乒乓球
<br /> 附件:
<input type="file" />
<br /> 隐藏域:
<input type="hidden" />
<br />
<select name="location">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="江苏">江苏</option>
</select>
<br /> 备注:
<textarea name="备注" cols="30" rows="5">不支持富文本</textarea>
<br />
<input type="submit" />
<input type="reset" />
<input type="button" value="射击" />
</form>
</body>
</html>
集中事例.png
网友评论