概述
HTML(Hypertext Markup Language)简称超文本标记语言,不区分大小写。
HTML文档结构
HTML文档由4个主要的标签组成,分别是<html>、<head>、<title>和<body>。一个标准的HTML5文档如下所示:
<!DOCTYPE HTML> <html> <head> <title>标题</title> </head> <body> <P>这是内容</p> </body> </html>
1.<html>标记
<html>标记是网页的根标签,是HTML文件的开头,所有的HTML文件都是以<html>标记开头,以</html>标记结束。HTML页面内所有的标签都要放入<html>和</html>内。
2.<head>标记
<head>标记是HTML文件的头标记,作用是放置HTML文件的信息。如CSS样式代码可以放在<head>标记内。
<head>标记内还可以添加如下元素标签:<style>,<meta>,<link>,<script>,<noscript>,<base>
- <style>标签
<style>标签用于定义HTML文档的CSS样式。
- <meta>标签
<meta>标签用于描述一些基本的元数据,元数据不会显示在页面上,但会被浏览器解析。如HTML文档的描述,关键词,作者,字符集等等。如下所示:
为搜索引擎定义关键字 <meta name="keywords" content="HTML,CSS,XML,XHML,JavaScript"> 为网页定义描述内容 <meta name="description" content="HTML网页"> 定义网页的作者 <meta name="author" content="网页作者“> 每30秒刷新当前页面 <meta http-equiv="refresh" content="30">
- <link>标签
<link>标签用于引入HTML文档的外部CSS样式文件,如下所示:
<link rel="stylesheet" type="text/css" href="myCss.css">
- <script>标签
<script>标签用于加载脚本文件
- <title>标签
<title>标签用于定义文档标题。
- <base>标签
<base>标签用于描述基本的连接地址或连接目标。该标签会作为HTML文档中所有的连接标签默认连接。如下所示:
<base href="https://www.baidu.com" target="_blank">
3.<title>标记
<title>标记是用于定义网页的标题。
4.<body>标记
<body>标记是HTML页面的主体标记。网页中所有的内容都定义在<body>标记内。
常用标签
按照功能排序如下所示:
基础 <!DOCTYPE> 定义文档类型 <html> 定义一个HTML文档 <title> 定义网页标题 <body> 文档的主体 <h1>到<h6> 定义HTML标题,数字越小,字体也越小。 <p> 定义一个段落 <br /> 换行 <hr /> 水平线 <!-- --> 注释 格式 <abbr> 缩写 <address> 定义文档作者或者拥有者的联系信息 <b> 定义粗体文本 <big> 定义大号文本,HTML5已结废弃 <blockquote> 定义块引用 <center> 定义居中文本,HTML5不再支持。 <cite> 定义引用 <code> 定义计算机代码文本 <em> 定义强调文本 <i> 定义斜体文本 <mark> 定义带有记号的文本 <progress> 定义运行中的任务进度 样式/节 <style> <div> <span> 定义文档中的节
img,若只设置高或者宽时,图片会按照等比例进行缩放。
类选择器
id选择器
常见的特殊字符
表示一个空格 > 表示一个大于符号(>) < 表示一个小于符号(<)
列表标签
无序列表ul
- 语法
<ul> <li>...</li> </ul>
- 属性
type type属性有三种类型值:
circle:空心圆圈
disc:实心圆圈(默认)
square:实心正块
有序列表ol
- 语法
<ol> <li>...</li> </ol>
- 属性
type type属性有5种类型值:
1:阿拉伯数字(默认)。1、2、3、4、5.....
a:小写英文字母。a、b、c、d......
A:大写英文字母。A、B、C、D......
i:小写罗马字母。i、ii、iii、iv、v......
I:大写罗马字母。I、II、III、IV、V.....
样式
去掉<li>元素前面的type属性可以使用:list-style:none;
表格标签
语法
<table border="" cellspacing="" cellpadding=""> <tr> <th>Header</th> </tr> <tr> <td>Data</td> </tr> </table>
tr代表表格的每一行记录,th代表表格的每列的标题,td代表每列的数据。
标签
<table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格的单元 <caption> 定义表格的标题 <colgroup> 定义表格列的组 <col> 定义表格列的属性 <thread> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚 例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> table{ border: 1px solid #4169E1; border-collapse: collapse; /*折疊边框线*/ } th,td{ width: 70px; height: 30px; text-align: center; } th{ background-color: mistyrose; } </style> <title>表格</title> </head> <body> <table border="" cellspacing="" cellpadding=""> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>职业</th> <th colspan="2">联系方式</th> </tr> <tr> <td>91202</td> <td>James</td> <td>男</td> <td>未知</td> <td>15023234444</td> <td>1502</td> </tr> <tr> <td>91202</td> <td>Marias</td> <td>男</td> <td>未知</td> <td>15393234823</td> <td>1502</td> </tr> </table> </body> </html>
效果如下所示:
表单标签
语法
<form action="" method="post" name="" onSubmit="" target=""> //... <input type="submit" value=""/> </form>
属性如下所示:
action 用来指定处理表单数据程序的URL地址 method 有两种属性值
get:表示将输入的数据追加在action指定的url地址后面,并传送到服务器
post:表示按照HTTP协议中的post传输方式传送到服务器
name 指定表单的名称,可以自定义值 onSubmit 指定当用户点击提交按钮时触发的事件 target 指定输入数据结果显示在哪个窗口,其属性值可以设置如下:
_blank:表示在新的窗口中打开目标文件
_self:表示在同一个窗口中打开,默认
_parent:表示在上一级窗口大家,一般在使用框架页面时使用
_top:表示在浏览器的整个创建中打开,忽略任何框架。
<input>标签
<input type="" disabled="" checked="" width="" height="" maxLength="" readonly="" size="" src="" usemap="" alt="" name="" value="" placeholder=""/>
属性值如下:
type 用于指定类型,有如下值:
text:代表文本框
password:代表密码域
file:代表文件域
radio:代表单选按钮
checkBox:代表复选框
submit:代表提交按钮
reset:代表重置按钮
button:代表普通按钮
hidden:代表隐藏域
image:代表图像域,使得图片可以单击
disabled 用于指定输入标签是否为不可用(不可点击编辑) checked 用于指定输入标签是否被选中,用于单选框和复选框,值为checked表示选中 maxlength 用于指定输入标签可输入的文字个数 readonly 用于指定输入标签是否为只读(不可编辑),值为readonly表示只读 size 用于指定输入标签的宽度,当type属性值为text和password时,以文字的个数为单位;为其他值时,以像素为单位。 src 当type为image时有效,用于指定图片的来源 usemap 当type为image时有效,为图片设置热点地图 alt 当type为image时有效,用于指定当图片无法显示时显示的文字 name 用于指定输入子弹的名称 placeholder 用于在输入标签里面显示的提示 value 用于指定输入标签默认的数据值。当type值为checkbox和radio时,不可省略此属性值。其他可省略。 案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .name,.password{ width: 220px; height: 29px; border-radius: 6px; border: 1px solid black; background: mistyrose; } </style> </head> <body> <form action="#" method="post"> 姓名:<input class="name" name="stuName" maxlength="11" placeholder="请输入学号"/><br /> 密码:<input class="password" name="stuPwd" maxlength="10" placeholder="请输入名字"/><br /> 性别:input type="radio" name="stuSex" value="1" checked="checked"/>男 <input type="radio" name="stuSex" value="0"/>女<br /> 爱好:<input type="checkbox" name="hobby"/>音乐 <input type="checkbox" name="hobby" />蹦迪 <input type="checkbox" name="hobby"/>运动<br /> 城市:<select name=""> <option value="" selected="selected">重庆</option> <option value="">北京</option> <option value="">上海</option> <option value="">天津</option> </select><br /> 头像:<input type="file" name="" id="" value="头像" /><br /> 自我介绍:</span><textarea name="" rows="13" cols="39"></textarea><br /> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>
效果图如下所示:
<select>下拉框标签
- 语法
<select name="" size="" multiple="" disabled=""></select>
属性值如下所示:
name 用于指定列表框的名称 size 用于指定列表框的显示的选项数量,超出该数量的选项通过滚动条查看 disabled 用于指定列表框不可使用(点击,变成灰色) multiple 用于指定列表框支持多选 selected 用于指定<option>被选中
- 案例
<select name=""> <option value="cq" selected="selected">重庆</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="tj">天津</option> </select>
<textarea>多行文本标签
- 语法
<textare cols="" rows="" name="" disabled="" readonly="" wrap=""></textarea>
属性值如下所示:
name 用于指定多行文本框的名称,当表单提交后,在服务器端获取表单数据时应用 cols 用于指定多行文本框的显示列数(宽度) rows 用于指定多行文本框的显示行数(高度) wrap 用于指定多行文本框的文字是否自动换行,其值如下:
hard:默认值,表示自动换行
soft:表示自动换行,如果文字超过cols指定的列数就自动换行,但提交到服务器时换号符不会被提交
iff:表示不自动换行。
超链接标签
语法
<a href="" ></a>
图片标签
语法
<img src="" width="" height="" border="" alt="提示文字"/>
去除超链接的下划线使用:text-decroation:none;
HTML布局
1.使用DIV元素布局
2.使用HTML5的网站布局
HTML5 提供的新语义元素定义了网页的不同部分,如下所示:
header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 aside 定义内容之外的内容(比如侧栏) footer 定义文档或节的页脚 details 定义额外的细节 summary 定义 details 元素的标题 3.使用表格的HTML布局
HTML音频
使用HTML5的多媒体标签:
<audio> 标签定义声音,比如音乐或其他音频流。 <embed> 标签定义嵌入的内容,比如插件。
HTML视频
使用HTML5的多媒体标签:
<video> 标签定义声音,比如音乐或其他音频流。 <embed> 标签定义嵌入的内容,比如插件。