目录
一、HTML概述
HTML是指超文本标记语言(HyperText Markup Language)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)
浏览器可以解析标签,浏览器根据不同的HTML标签,解析成我们看到的网页
二、HTML基本语法
2.1文档声名
html5的文档声明
<!DOCTYPE html>
如果不声明解析网页时会产生一些不可预期的行为,所以我们应该避免出现。
<Head>标签包含了所有头部标签
头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>
<title>标签可定义网页的标题
<meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新
频度的描述和关键词。
<meta> 标签位于文档的头部 <meta charset="utf-8" />
标题处添加图标
<link rel="icon" href="ico地址">
html的基本结构:
<html>…</html>标签标记 HTML 文档的开始和结束
<body>…</body> 标签包含文本、图像和链接。
<head>…</head> 标签包括标题和其他说明信息。
具体实现如下:
<!-- 对html语言的版本进行声名
当前为版本5
-->
<!DOCTYPE html>
<!-- 所有的标记语言必须有一个根标签
所有的网页内容都必须写在html标签中
-->
<html>
<!-- 对网页整体进行一些设置 -->
<head>
<!-- 设置网页编码形式 -->
<meta charset="utf-8">
<!-- 设置网页的标题 -->
<title>我的网页</title>
<!-- 设置网页图标-->
<Link rel="icon" href="img/baidu.ico"/>
</head>
<!-- 将网页的内容写在<body> </body>标签中 -->
<body>
我的网页
</body>
</html>
2.2标签
HTML
中的标记指的就是标签。 HTML使用标签来描述网页。
结构:
<
标签名
>
标签内容
</
标签名
>
闭合标签
(
有标签内容
)
<
标签名
/>
自闭合标签
(
无标签内容
)
2.2.1标签属性
标签可以拥有属性。属性进一步说明了该标签的显示或使用 如:<body text=”red”>
1.
属性的格式 :属性名
= “
属性值
“
2.
属性的位置:
<
标签名 属性名
= “
属性值
“ >xxx</
标签名
>
3.
添加多个属性:
<
标签名 属性名
= “
属性值
“
属性名
= “
属性值
“ >xxx </
标签名
>
2.2.2基本常用标签
标题标签
<h1></h1>…..<h6></h6>
段落标签 <p> </p>
换行标签 <br/>
列表
无序列表
<ul><li> </li></ul>
有序列表
<ol><li> </li></ol>
超链接 <a> </a>
HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是
通过连接来访问其他网页资源。
<a href=“http://www.baiduc.om” target=“_blank”>百度</a>
<a href=“login.html” target =“_blank”>登录</a>
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
target 打开链接文档的位置
图像标签
<img/>
具体实现如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>段落一</p>
<p>段落二</p>
<!-- 列表标签 -->
<!-- 无序列表标签 -->
<!-- type = disc circle square -->
<ul type="square">
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<!-- 有序列表标签 -->
<ol>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ol>
<!-- 超链接标签 href="链接" target = "打开方式"-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<!-- 图像标签 src="图片地址"-->
<img src="img/baidu.ico"/>
</body>
</html>
2.2.3特殊符号转义
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如 < 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html标签。
例如:<b> 会被解析为b标签; 空格 再多的空格都会当一个空格处理。
为了可以使用这些预留字符,我们必须在html中使用字符转义。
小于号< < 大于号> > 空格  
版权(C)© 商标(TM) &trade
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 特殊符号转义符 -->
你 好 <!-- 空格 -->
<!-- 版权 -->
©
<!-- 注册商标 -->
®
<!-- 左右括号 -->
<b>标签的作用是加粗文本;
</body>
</html>
运行结果:
2.3表格
2.3.1表格的基本构成标签
table标签:表格标签 tr标签:表格中的行 th标签:表格的表头 td标签:表格单元格
表格的基本结构
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
2.3.2表格的属性
width 设置表格的宽
height 设置表格的高
cellspacing 设置表格中单元格与单元格之间的距离
cellpadding 设置表格中单元格的内边距
align 设置单元格中内容的水平位置
valign 设置单元格中内容的垂直位置
cospan 用于合并某一行的单元格
rowspan 用于合并某一列的单元格
具体实现如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表格标签 border="像素" cellspacing="设置单元格与单元格之间的距离" cellpadding="设置内边距"-->
<table border="3" cellspacing="0" cellpadding="0" height="100" width="300">
<tr>
<th >编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<!-- 该单元格跨列合并3个单元格 -->
<th colspan="3">跨列合并</th>
</tr>
<tr>
<!-- 该单元格跨行合并2个单元格 -->
<th rowspan="2">跨行合并</th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
运行结果:
2.4表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.
<form>标签 :表单 属性:action 指定提交后,由服务器上哪个程序处理
method 指定向服务器提交的方法
2.4.1 表单-文本
2.4.2 表单-其他表单
2.4.3下拉框
2.4.4多行文本域
2.4.5按钮
具体实现如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表单 action ="提交后端的地址" method="提交到后端的方式 "-->
<form action="" method="get">
<!-- 单行文本框 -->
用户名:<input type="text" name="user" placeholder="请输入用户名!" value="123" readonly="readonly" /><br/>
<!-- 密码框 -->
密码:<input type="password" name="password" placeholder="请输入密码!" /><br/>
<!-- 单选框 圆圈 -->
性别:男 <input type="radio" name="gender" value="男" />
女<input type="radio" name="gender" value="女"/><br/>
<!-- 多选框 方块 -->
选课:语文 <input type="checkbox" name="course" value="语文"/>
数学 <input type="checkbox" name="course" value="数学"/>
英语 <input type="checkbox" name="course" value="英语"/>
物理 <input type="checkbox" name="course" value="物理"/><br/>
<!-- 下拉框 -->
年级:<select name="grade">
<option value="一年级" >一年级</option>
<option value="二年级">二年级</option>
<option value="三年级">三年级</option>
</select><br/>
附件:<input type="file" /><br/>
<!-- 多行文本框 -->
地址:<textarea cols="30" row="5">你好</textarea>
<!-- 提交按钮 点击后可以将表单内容提交到后端 -->
<input type="submit" value="提交"/>
<!-- 普通按钮 可以添加监听-->
<input type="button" value="普通按钮"/>
<!-- 重置按钮 点击后可以将表单初始化 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>
运行结果: