今日任务
- 了解什么是标记语言
- 了解HTML主要特性，主要变化以及发展趋势
- 了解HTML的结构标签
- 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签）
1. 网站信息页面
需求分析:
我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息
技术分析:
HTML概述:
HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行
<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
HTML的主要作用:
设计网页的基础,HTML5
HTML语法规范
<!--
1. 上面是一个文档声明
2. 根标签 html
3. html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息
体部分 : 主要来放置我们的HTML页面内容
4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
5. 标签不区分大小写, 官方建议使用小写
-->
2. 网页基本元素
- DOCTYPE声明：告诉浏览器，我们要使用什么规范
<title>标签：网页标题<meta>标签：描述性标签，用来描述网站的一些信息
<!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>
</head>
<body>
</body>
</html>
3. 网页基本标签
标题标签 , 段落标签 , 换行标签 , 水平线标签 , 字体样式标签 , 注释和特殊符号
标题标签：<h1></h1> 至六级
段落标签：<p></p>
换行标签 ：<br />
水平线标签：<hr />
字体样式标签：粗体<strong></strong> 斜体<em></em>
注释和特殊符号： 注释：<!-- -->
空格： 大于号：> 小于号：< 版权符：©
特殊符号
空格 大于号 小于号 和号 引号 撇号
其他特殊字符表
分 英镑 日元 节 版权 注册商标 乘号 除号
4. 图像标签
<img src="path" alt="text" title="text" width="x" height="y" />
src：图像地址（必填）
alt：图像替代文字（必填）
title：鼠标悬停提示文字（选填）
width：图像宽度（选填）
height：图像高度（选填）
../ --上一级目录
<!--图像标签 练习:-->
<!--src:图片地址
相对地址：
../ 上一级目录
绝对地址：
-->
<img src="../images/timg.jpg" alt="图像" title="悬停文字" width="200" height="200">
5. 链接标签
1、页面间链接：从一个页面链接到另一页面
<a href="path" target="目标窗口位置">链接文本或图片</a>
href：链接路径，表示要跳转到哪个网页
target：链接在哪个窗口打开 常用值：_self（在自己的网页中打开）、_blank（在新标签中打开）
<!--链接标签：
<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开
_blank：在新的标签页打开
_self:在自己的网页中打开
-->
<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br>
<!--图像超链接-->
<a href="http://www.baidu.com">
<img src="../resource/images/timg.jpg" alt="图像" title="悬停文字" width="200" height="200">
</a>
2、锚链接（例如：回到顶部）
<a name="top"></a>
<a href="#top">回到顶部</a>
<a href="test2.html#down">去测试页面的底部</a>
6. 列表
<!--有序列表-->
<ol>
<li>Java</li>
<li>python</li>
<li>运维</li>
</ol>
<!--无序列表-->
<ul>
<li>Java</li>
<li>python</li>
<li>运维</li>
</ul>
<!--自定义列表
dl：标签
dt:列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>python</dd>
<dd>运维</dd>
<dt>位置</dt>
<dd>北京</dd>
<dd>珠海</dd>
</dl>
7. 表格
<!--表格
行：tr
列：td
colspan:跨列
rowspan:跨行
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
8. 表单
<!--初识表单post和get提交
method:规定如何发送表单数据，常用值：：post、get
get方式提交：可以在url中看到提交的信息
post方式提交：比较安全，可以传输大文件
action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址，提交跳转
-->
<form method="get" action="2.基本标签.html">
<!--文本输入框：text-->
<p>姓名：<input type="text" name="username"></p>
<!--密码框：password-->
<p>密码：<input type="password" name="password"></p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</form>
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox（多选）、radio（单选）、submit、reset、file、hidden、image和button，默认为text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
<!--多选框-->
<p> 爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="book" name="hobby">看书
<input type="checkbox" value="swimming" name="hobby">游泳
<input type="checkbox" value="write" name="hobby">写作
</p>
下拉框：
<select name="列表名称">
<option value="选项的值" selected>中国</option>
<option value="选项的值">美国</option>
<option value="选项的值">英国</option>
</select>
文件域：
<input type="file" name="file">
9. 文本框和单选框
<!--单选框标签：
input type="radio"
value：单选框的值
name：表示组，name相同为一个组，即只能选择一个
-->
<radio>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</radio>
文本域：
<textarea name="textarea"></textarea>
10. 按钮和多选框
<!--按钮-->
<p> 按钮：
<input type="button" name="btn1" value="点击查看">
</p>
<!--下拉框-->
<p>国家：
<select name="country">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="ruishi" selected>瑞士</option>
</select>
</p>
11. 表单的应用
只读：
<p>姓名：<input type="text" name="username" value="lisa" readonly></p>
禁用：可以放到任何地方
<input type="radio" value="boy" name="sex" disabled/>男
隐藏域：
<p>密码：<input type="password" name="password" hidden value="123456"></p>
placeholder 提示信息
required 元素不能为空，应用于所有的文本框中
pattern 正则表达式
<p>姓名：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>姓名：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p> 自定义邮箱：
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
form表单总结
<!--
form:
action: 跳转的路径
method：
get:数据在地址栏
post:数据在请求体中
input:
name属性 必须得写 写了之后数据才会被接收传输到后台
type:
text 普通文本
password 密码
radio 单选框 -checked 默认选择
checkbox 复选框 -checked 默认选择
email 邮箱
file 上传文件
submit 提交按钮
reset 重置按钮
hidden 隐藏域 （使用该属性存值）
placeholder 提示信息
required 元素不能为空，应用于所有的文本框中
pattern 正则表达式
mailto 邮件链接
select：下拉框
option 选项 -selected 默认选择
-->
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
