HTML
文档结构：
<!--声明文档的类型 标记该文档为HTML5的文件-->
<!DOCTYPE html>
<!--页面的根节点-->
<!--html中标签都是闭合标签 闭合标签包含双闭合和单闭合
双闭合：<html></html>
单闭合：<meta/>
-->
<html lang="en">
<head>
<!--包含头部信息 是一个容器：包含style title meta script link等-->
<meta charset="UTF-8">
<!--声明头部的元信息，对我们的文档规定编码格式-->
<title>Title</title>
</head>
<body>
<!--包含浏览器显示的内容标签：div p a img input-->
这是我们的文档结构！哈哈哈
</body>
</html>
head标签
- head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。
meta
- meta常用两个属性：
- http-equiv属性:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
- name属性:主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta http-equiv="refresh" content="5;URL=http://www.baidu.com" />
<!--5秒后重定向（跳转）到百度首页-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--指定文档内容类型和编码类型-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<!--为了SEO优化-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">
link
<!--引入外部样式表-->
<link rel="stylesheet" type="text/css" href="./index.css">
<!--定义网站图标-->
<link rel="icon" href="./fav.ico">
stykle
<!--定义内部样式表-->
<style type="text/css">
</style>
script
<!--定义内容脚本文件-->
<script type="text/javascript">
</script>
<script src="./index.js"></script>
title
<title>跳转个毛啊。不跳了</title><!--文档的标题-->
body标签
- 三种元素：
- 块级元素：独占一行，可设置宽高，如果不设置默认是浏览器的宽度
- 行内元素：在一行内展示，不能设置宽高，它的宽高根据内容去填充
- 行内块元素：在一行内展示，可设置宽高
标题标签
<!--heading:标题h1~h6-->
喵
<!--块级元素：独占一行-->
<h1>哈哈哈</h1>
<h2>哈哈哈</h2>
<h3>哈哈哈</h3>
<h4>哈哈哈</h4>
<h5>哈哈哈</h5>
<h6>哈哈哈</h6>
段落标签
- 浏览器展示特点：
- 跟普通文本一样，但我们可以通过css来设置当前段落的样式
- 是否又独占一行呢？ 答案是的 块级元素
<p>这是段落标签，与标题标签一行，也是独占一行</p>
超链接标签
- 超级链接：标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像
- a标签属于行内标签：在一行内显示
<!--target对应的属性默认是_self 改成_blank在新的标签页打开
title属性：将鼠标移动上去会变成title内容-->
<a href="http://www.baidu.com" target="_blank" title="百度首页">单击跳转到百度首页</a>
<a href="./a.zip">下载这个文件</a>
<a href="mailto:1032298871@qq.com">跳转到邮箱</a>
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到顶部的段落标签</a>
<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
列表标签
- 有序标签:ul
<ul>
<li>我的账户></li>
<li>我的订单></li>
<li>我的优惠卷></li>
<li>我的收藏></li>
<li>退出></li>
</ul>
-
ul标签的属性： type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
-
无序标签:ol
<ol>
<li>我的账户></li>
<li>我的订单></li>
<li>我的优惠卷></li>
<li>我的收藏></li>
<li>退出></li>
</ol>
- ol标签的属性：type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
div标签
-
可定义文档的分区 division的缩写 译：区标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的标签</title>
</head>
<body>
<!--body相关标签-->
<!--heading:标题h1~h6-->
喵
<!--块级元素：独占一行-->
<div class="heading">
<p style="height: 500px" id="p1">顶部</p>
<h1>哈哈哈</h1>
<h2>哈哈哈</h2>
<h3>哈哈哈</h3>
<h4>哈哈哈</h4>
<h5>哈哈哈</h5>
<h6>哈哈哈</h6>
</div>
<div class="p">
<p><b>这是段落标签</b>，与标题标签一行，也是独占一行</p>
</div>
<!--<a href="http://www.baidu.com">单击跳转到百度首页</a>-->
<!--target对应的属性默认是_self 改成_blank在新的标签页打开
title属性：将鼠标移动上去会变成title内容-->
<div class="a">
<a href="http://www.baidu.com" target="_blank" title="百度首页">单击跳转到百度首页</a>
<a href="./a.zip">下载这个文件</a>
<a href="mailto:1032298871@qq.com">跳转到邮箱</a>
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到pi</a>
<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</div>
<div class="lists">
<ul>
<li>我的账户></li>
<li>我的订单></li>
<li>我的优惠卷></li>
<li>我的收藏></li>
<li>退出></li>
</ul>
<ol>
<li>我的账户></li>
<li>我的订单></li>
<li>我的优惠卷></li>
<li>我的收藏></li>
<li>退出></li>
</ol>
</div>
</body>
</html>
- 以上代码结构化：
<body>
<div class="heading">...</div>
<div class="p">...</div>
...
</body>
图片标签![]()
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
- 注意：
- src设置的图片地址可以是本地的地址也可以是一个网络地址。
- 图片的格式可以是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
- 与行内元素在一行内显示
- 可以设置宽度和高度
- span标签可以单独摘出某块内容，结合css设置相应的样式
其他标签
- 换行标签：
标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
- 分割线: < hr>
- < hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容
table(表格)标签
- table-表格
- thead-表格头
- tbody-表格主体
- tr-表格行
- th-表格头里的单元格（默认居中并加粗）
- td-表格主体里的单元格
- tfoot-表格底部主体
- 数据单元格可以包含文本、文本、图片、列表、段落、表单、水平线、表格等等
<!--表格标签-->
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<td rowspan="3">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a href="./03-常用标签.html">跳转至常用标签2</a></td>
</tr>
</tfoot>
</table>
表单：from标签
表单属性
- acction:定义表单被提交时发生的动作，提交给服务器处理程序的地址
- enctype:编码类型，即表单数据进行编码的方式，允许表单将什么养的数据提交给服务器
- 取值：1. application/x-www-form-urlencoded默认。允许将普通字符，特殊字符，都提交给服务端，不允许提交文件
- multipart/form-data 允许将文件提交给服务器
- text/plain 只允许提交普通字符。特殊字符与文件等都无法提交
- method:定义表单提交数据时的方式
- get:默认值，明文提交，所提交的数据可以显示在地址上，安全较低，提交数据有大小限制，最大为2kb
- post:隐式提交，无大小限制
表单控件分类
-
textarea：文本域，允许用户录入多行数据到表单控件
- cols 指定文本区域的烈属，变相设置当前元素的宽度
- rows 指定文本区域的行数，变相设置当前的元素高度
-
select&option：选项框，select为单选框，optopn为多选框
- select的属性：size取值大于1的画，则为滚动列表，否则就是下拉选项框，muliple设置多选，如果该属性出现在select中那么就是允许多选（针对滚动列表）
- option的属性：value选项的值，selected预选中，如果不设置selected，选项框的第一项是默认选中
-
input组元素
- type:
- button 普通按钮
- text 显示用户输入的诗句
- password 密文显示用户输入的诗句
- radio 单选按钮 checkbox复选框
- shubmit 功能固化，负责将表中的表单控件提交给服务器
- file 上传文件所用
- reset 重置按钮
- value 控件的值既要提交给服务器的数据
- name 控件的名称，服务器用
- disabled 该属性只要出现在标签中，表示禁用该控件
- type:
-
lable功能：关联文本与表达元素的，点击文本时，如同点击表单元素一样
- for属性 表示该label相关联表单控件元素的id值
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用户名称：
<input type="text" name="txtUsename" value="请输入用户名称" readonly>
</p>
<p>
用户密码：
<input type="password" name="txtUsepwd">
</p>
<p>
确认密码：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--单选框-->
<p>
用户性别：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--复选框-->
<p>
用户爱好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 乐
<input type="checkbox" name="chkhobox" value="乐" checked>
</p>
<!-- 按钮 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>
<!--文件选择框-->
<p>
请上传文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介绍：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--选择框-->
<!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
<p>籍贯：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
</form>