HTML概述
HTML：超文本标记语言(HyperText Markup Language)
超文本：网页中的内容(超链接，图片，视频…)
标记：标签，就像买东西，东西的标签上有价格，商品名称…
网页是有浏览器解释执行，需要使用标签告诉浏览器如何执行
<a href = "http://www.baidu.com">百度</a>
<b>新浪</b>
学习HTML本质上就是学习各种不同功能的标签，用标签对网页内容进行标记
基本语法
头部区域的标签标签为:
<!--
ctrl+shift+/ 生成注释
声明HTML语言的按本，主要是告诉浏览器，使用HTML的哪个版本为标准来解析网页
<!DOCTYPE html>---表示html5的版本
-->
<!DOCTYPE html>
<!--
<html> 是网页的跟标签，所有内容都需要写在此标签中，标记语言必须有一个跟标签
<head>网页的头
<meta charset="utf-8" /> 设置网页的字符集
<title></title> 网页标题
<link href="img/baidu.ico" rel="icon" /> 标题处图标 rel="icon"指明文件类型
</html>
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="keyword" content="手机，家电" />
<meta name="description" content="免费 Web & 编程 教程" />
<meta name="author" content="jim" />
<title>百度一下，你就知道</title>
<link href="img/baidu.ico" rel="icon" />
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
body是网页的身体，网页中显示的内容都写在此标签中
</body>
</html>
标签HTML中的标记指的就是标签。
HTML使用标记标签来描述网页。
结构：
标签属性:就是标签的特性，可以通过属性设置标签的表现形式
例如：
<body text="red" bgcolor="green">
<b>百度</b>
<br/>新浪
</body>
属性必须写在开始标签中
一个标签可以有多个属性
属性语法：属性名=“属性值”
<标签名 属性名 = “属性值“ >xxx</标签名>
添加多个属性：
<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>
基本常用标签
标题标签<h1></h1>…..<h6></h6>
align="center"控制文字在标签行内的水平位置，left（默认）right center
<h1 align="center">一级标题</h1>
<h2 align="right">二级标题</h2>
<h3>三级标题</h3>
段落标签 <p></p>
<p align="center">
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
<p>
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
<p>
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
换行标签 <br/>
无序列表<ul><li></li></ul> 前面没有序号，有一个默认图标，后期可以使用css替换图标
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
有序列表<ol><li></li></ol> 前面有序号，序号格式可以选择
Default. Decimal numbers (1, 2, 3, 4)
Alphabetically ordered list, lowercase (a, b, c, d)
Alphabetically ordered list, uppercase (A, B, C, D)
Roman numbers, uppercase (I, II, III, IV)
Roman numbers, lowercase (i, ii, iii, iv)
<ol type="A">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
超链接<a></a>
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
href (Hypertext Reference超文本引用) 规定链接指向的页面的
URL(页面 地址) URL(Uniform Resource Locator)统一资源定位符
<a href="http://www.baidu.com">百度</a>
<a href=“login.html” target =“_blank”>登录</a>
target:默认值为_self，_blank是在新窗口打开
target="_self"在当前窗口打开
target="_blank"在新窗口打开
target=“自定义窗口名称”
target="_parent"在上一级窗口打开
target="_top"在最顶级窗口打开
此处与内联框架一起使用，最外层就是最顶级
图像标签<img/>
<body>
<img src=“img/demo.jpg”width=“300”height=“150“border= ” 1 ” />
</ body >
一般不建议使用图片的宽高
img标签在网页中插入图片，只是引用图片地址
<img src="img/hao123.png" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#p1">商品1</a>
<a href="#p2">商品2</a>
<a href="#p3">商品3</a>
<a href="#p4">商品4</a>
<a href="#p5">商品5</a>
<h3><a name="p1">商品1</a></h3>
<img src="img/1.png" />
<h3><a name="p2">商品2</a></h3>
<img src="img/2.png" />
<h3><a name="p3">商品3</a></h3>
<img src="img/3.png" />
<h3><a name="p4">商品4</a></h3>
<img src="img/4.png" />
<h3><a name="p5">商品5</a></h3>
<img src="img/5.png" />
<a href="#top">返回顶部</a>
</body>
</html>
<a href="#top" style="position: fixed;right: 20px;bottom: 20px;">返回顶部</a>
可以把返回顶部固定在右下角，不管怎么滑动，都在右下角
用超链接制作锚点，点击会自动跳到相应位置
表格
表格的基本构成标签
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头，内容默认加粗居中
td标签：表格单元格，内容默认左对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table标签：表格标签
tr标签：表格中的行 table row
th标签:表格的表头 表格中的数据都必须放在单元格中
td标签：表格单元格
表格不仅可以放数据，早期表的还可以用来网页布局
-->
<table border="1">
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>88</td>
<td>77</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>王五</td>
<td>95</td>
<td>85</td>
<td>75</td>
</tr>
</table>
</body>
</html>
表格大小默认是通过内容大小决定，也可以通过width,height设置
cellpadding设置内边距，cellspadding单元格之间的距离，默认是有2个像素
表格合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="500" height="200">
<tr>
<td></td>
<td colspan="2"></td>
<!-- 用一个合并表示两个 -->
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
<!-- 跨行合并，删除另外两行被合并的那一格 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
特殊符号转义
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
例如： 会被解析为b标签，空格,再多的空格都会当一个空格处理。 为了可以使用这些预留字符，我们必须在html中使用字符转义。
表单
form标签：表单 网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终 提交表单,把客户端数据提交至服务器.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表单：表单中有许多可以输入或选择的组件，
用户可以在表单中输入信息，最终将表单的数据提交到服务器，
为后端程序收集数据
form 表单
action="" 提交到服务器的地址
method="get"，http请求提交数据的方式，get,post
input type="text" 单行文本，不能换行
name="" value=""向服务器端提交数据的键值对
placeholder="" 提示信息，不是组件的值
readonly="readonly"只读，可以向服务器提交
disabled="disabled"置灰，禁用，禁用组件后，不会再向服务器提交数据
type="radio"单选组件必须设置name属性相同的为一组,实现互斥
选择性组件需要给设置默认的value
checked="checked"会默认选中该选项
type="checkbox"复选框
<select name="pro">
<option value="101">北京</option>
下拉选择框option是选项，下拉框的name,id,事件等需要在select中定义，而value需要在option中 定义。
type="file"文件选择框
<textarea cols="30" rows="5" name="mark"></textarea>多行文本域
-->
<form action="" method="get">
账号<input type="text" name="account" value="" placeholder="请输入账号"/><br />
密码<input type="password" /><br />
性别<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女<br />
爱好<input type="checkbox" name="hobby" value="运动1" />运动1
<input type="checkbox" name="hobby" value="运动2" />运动2
<input type="checkbox" name="hobby" value="运动3" />运动3
<input type="checkbox" name="hobby" value="运动4" />运动4<br />
省份<select name="pro">
<option value="101">北京</option>
<option value="102">天津</option>
<option value="103">上海</option>
</select>
照片<input type="file" /><br />
备注<textarea cols="30" rows="5" name="mark"></textarea><br />
<!--
按钮组件
type="submit" 触发表单的提交功能
type="reset"重置按钮，让表单回到默认形态
type="button"普通按钮，可以用来触发事件，通过事件调用js函数
-->
<input type="submit" value="登录" />
<input type="reset" />
<input type="button" value="按钮" onclick="alert("sss")" />
</form>
</body>
</html>
内联框架
内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 嵌入一个子集的窗口，并在窗口中指定页面地址 -->
index
<iframe src="child.html" width="500" height="400" frameborder="0"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
child
</body>
</html>
4902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
