学习笔记—HTML基础标签
html的概念
概念：
html 是用来描述网页的一种语言。
- html 指的是超文本标记语言 (hyper text markup language)
- html 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- html 使用标记标签来描述网页
作用：
在浏览器中数据需要使用友好的格式展现给用户。
告诉浏览器接收到的数据使用什么样的数据组织形式进行显示。
使用：
html的标准文档规范
html的标签
互联网的三大基石
url：统一资源定位符（唯一的定位一个网络资源）
http：超文本传输协议（规范了浏览器和服务器之间数据交互格式）
html：超文本标记语言（有效的组织数据在浏览器端的显示）
html的文档声明
文件名.html 或 文件名.htm
html的标准文档结构
<html>
<head>
<!--
主要是配置 浏览器显示数据的配置信息
例如：字符编码等
一般是给浏览器进行使用
-->
</head>
<body>
<!--给用户进行数据展示-->
</body>
</html>
标签学习
head标签
<head>
<title></title>
<meta />
<link />
</head>
网页标题标签：
<title>title</title>
编码格式标签：
<meta http-equiv="content-type" content="text/html;charset=utf-8">
网页搜索优化标签：
<!--网页关键字--> <meta name="keywords" content="关键字" /> <!--网页描述--> <meta name="description" content="网页描述" /> <!--作者--> <meta name="author" content="殇央" />
网页指定跳转标签：
<meta http-equiv="refresh" content="3;url=https://i.cnblogs.com/shangyang" />
文本标签
标题标签h1...h6:
块级标签，自动换行。标题标签会将其中的文本加粗加黑显示，并从1到6依次减弱。
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
段落标签 p：
块级标签，自动换行。表示文本的段落，段落通常在可视媒体中表示为文本块。段间距较大。
<p>这是一个段落。</p>
换行标签 br：
换行符。换行间距较小。
<br />
水平线标签 hr：
块级标签。表示段落级元素之间的主题划分，会在浏览器中添加一条横线。
<hr />
空格符  ：
空格符，告诉刘浏览器在此出输出一个空格。可在标签内使用。
 ；
列表标签
列表项目标签 li：
<li> 标签定义列表项目。
<li>列表项</li>
无序列表 ul：
表示html页面中项目的无序列表，一般会以项目符号（黑色实心圆）列表呈现。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
有序列表 ol：
在 html 中表示有序列表，是 ordered lists 的缩写。reversed属性可以指定列表倒序。
<ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> <ol reversed> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol>
自定义列表 dl dt dd：
<dl> 标签代表一个描述列表。<dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。
<dt> 标签定义一个描述列表的项目/名字。<dd> 标签被用来对一个描述列表中的项目/名字进行描述。
<dl>
<dt>编程语言</dt>
<dd>java</dd>
<dd>c++</dd>
<dt>数据库</dt>
<dd>mysql</dd>
<dd>orcale</dd>
</dl>
图片标签
图片标签 img：
行内元素，不自动换行。用于展示 html 页面中的图像。<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上讲，图像并不会插入 html 页面中，而是链接到 html 页面上。<img> 标签的作用是为被引用的图像创建占位符。
<img src="http://images.cnblogs.com/cnblogs_com/shangyang/1431105/o_background.jpg" alt="background" width="42" height="42" />
<!-- src:规定显示图像的 url。 alt:规定图像的替代文本。 width:规定图像的宽度。 height:规定图像的高度。
宽度或高度如果只设置一个会等比例缩小或放大。 -->
超链接标签
超链接标签 a：
<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
<a> 标签最重要的属性是 href 属性，用于创建指向另外一个文档的链接（或超链接）。
<a href="https://www.cnblogs.com/shangyang/" target="framename">欢迎来到殇央的博客</a>
<!--
target:规定在何处打开目标 url。
值： _blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
-->
表格标签
一个 html 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行，<th> 元素定义表头，该标签中的内容会以粗体显示。<td> 元素定义表格单元。
<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>123</td>
<td>145</td>
</tr>
</table>
<!--
table属性：
border:规定表格单元边框的像素。
th属性：
colspan：规定表头单元格可横跨的列数。
rowspan：规定表头单元格可横跨的行数。
-->
内嵌标签
内嵌标签 iframe：
会创建包含另外一个文档的内联框架，有效地将另一个 html 页面嵌入到当前页中。
iframe标签可以在当前网页加载其他网页的资源。src属性规定在 <iframe> 中显示的文档的 url。
<iframe src="https://www.baidu.com/" width="600" height="600" scrolling="yes">
<p>您的浏览器不支持iframe 标签。</p>
</iframe>
<!--
height:规定 <iframe> 的高度。
width：规定 <iframe> 的宽度。
scrolling：规定是否在 <iframe> 中显示滚动条。
值：
auto：在需要的情况下出现滚动条（默认值）。
yes ：始终显示滚动条（即使不需要）。
no ：从不显示滚动条（即使需要）。
-->
表单域标签
表单标签
表单标签 form：
<form> 标签用于创建供用户输入的 html 表单。使用 <form> 标签可以向服务器传输数据。
当点击提交数据时，form标签会将用户输入的数据按照method指明的提交方式提交给action属性所指明的提交地址。
<form name="login" action="/login" method="post">
<input type="submit" value="登录"/>
</form>
<!--
属性：
name:规定表单的名称。
action：规定当提交表单时向何处发送表单数据。
method:规定用于发送表单数据的 http 方法。
enctype:属性规定在将表单数据发送到服务器之前如何对其进行编码。
值：
application/x-www-form-urlencoded：默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ascii hex 值）。
multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain：将空格转换为 "+" 符号，但不编码特殊字符。
-->
input标签
行内元素，不自动换行。<input> 标签用于创建交互式控件，这类控件是基于 web 表单的，它可以接收用户的数据、信息。
<input> 标签规定了用户可以在其中输入数据的输入字段。
type 属性规定要显示的 <input> 元素的类型。name 属性规定 <input> 元素的名称。value属性指定 <input> 元素 value 的值。
提交的数据以name-value键值对的形式提交。
<form name="login" action="/login" method="post">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="pwd"><br />
e-mail: <input type="email" name="usremail"><br />
<!--name 值相同的单选框只能选择一个值 -->
性别：<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="男">男 <br />
选择一个文件: <input type="file" name="img"><br />
<input type="checkbox" name="vehicle[]" value="bike">我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="car">我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="boat">我有一艘船<br>
选择你喜欢的颜色: <input type="color" name="favcolor"><br />
生日: <input type="date" name="bday"><br />
<input type="submit" value="登录"/>
<input type="reset" value="重新输入" />
</form>
<!--
type属性:
text:默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
password:定义密码字段（字段中的字符会被遮蔽）
email:定义用于 e-mail 地址的字段。
radio:定义单选按钮。
file:定义文件选择字段和 "浏览..." 按钮，供文件上传。
button:定义可点击的按钮（通常与 javascript 一起使用来启动脚本）。
checkbox:定义复选框。
color:定义拾色器。
date:定义 date 控件（包括年、月、日，不包括时间）。
datetime:定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 utc 时区）。
datetime-local:定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
hidden:定义隐藏输入字段。
image:定义图像作为提交按钮。
month:定义 month 和 year 控件（不带时区）。
number:定义用于输入数字的字段。
range:定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
search:定义用于输入搜索字符串的文本字段。
tel:定义用于输入电话号码的字段。
time:定义用于输入时间的控件（不带时区）。
url:定义用于输入 url 的字段。
week:定义 week 和 year 控件（不带时区）。
reset:定义重置按钮（重置所有的表单值为默认值）。
submit:定义提交按钮。
-->
文本标签
<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 css 的 height 和 width 属性。
<textarea name="text" cols="40" rows="40" wrap="hard"> 文本框 </textarea>
<!--
属性：
cols：规定文本区域内可见的列数。
rows：规定文本区域内可见的行数。
wrap：规定在表单提交时文本区域中的文本是如何换行的。
值：
soft：在表单提交时，textarea 中的文本不换行。默认。
hard：在表单提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须指定 cols 属性。
-->
下拉列表
<select> 元素用来创建下拉列表。
<select> 元素中的 <option> 标签定义了列表中的可用选项。
<select name="语言">
<option value="java">java</option>
<option value="c++">c++</option>
<option value="html">html</option>
<option value="css">css</option>
</select>
<!--
disabled属性：当该属性为 true 时，会禁用下拉列表。
-->
<optgroup> 标签用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时，对相关的选项进行组合会使处理更加容易。
<select>
<optgroup label="前端">
<option value="html">html</option>
<option value="css">css</option>
</optgroup>
<optgroup label="后台">
<option value="java">java</option>
<option value="c++">c++</option>
</optgroup>
</select>
<!--
label属性：为选项组规定描述。
-->