HTML基础学习(一)—HTML
一、HTML的介绍
HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。
HTML是最基础的网页语言，它是通过标签定义的语言，代码是由标签所组成的。
<!DOCTYPE html> <html> <head> <!-- 1.放置一些属性信息，辅助信息。 2.引入一些外部的文件(css js)。 3.它里面的内容会先加载。 --> <meta charset="UTF-8" /> <title>这是HTML标题</title> </head> <body> <font color="red">这是网页正文</font> </body> </html>
二、HTML标签的使用
1.排版标签
(1)<br/>
换行。
(2)<p></p>
段落标签，在开始和结束的位置上留一个空行。
属性: align="left/center/right"对齐方式。
(3)<hr/>
一条水平线。
(4)div
声明一块区域。
<div>数据</div>
(5)span
声明一块区域。
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
---------------------p标签测试---------------------
<p>
HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。
</p>
---------------------hr标签测试---------------------
<hr align="left" width="50%"/>
---------------------div标签测试---------------------<br>
<div>这是div区域1</div>
<div>这是div区域2</div>
---------------------span标签测试---------------------<br>
<span>这是span区域1</span>
<span>这是span区域2</span>
</body>
</html>
结果:
2.字体标签
(1)<font></font>
中间放文字，设置文字的颜色大小。
sieze:字号大小最大值7，最小值1。
(2)标题标签
<h1></h1>
……字体从大到小……
<h7></h7>
(3)<b></b>
粗体。
(4)<i></i>
斜体。
3.列表标签
数据对齐格式化。
(1)<ol></ol>
有序列表。
(2)<ul></ul>
无序列表。
<!DOCTYPE html> <html> <head> <title>HTML学习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h2>有序列表</h2> <ol type="a"> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ol> <h2>无序列表</h2> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> </body> </html>结果:
4.图片标签
<img />
属性:
src: 文件的位置。
width:文件宽度。
height: 文件高度。
alt: 文件的说明文字。
5.超链接标签
<a></a>
(1)链接资源
href="" 必须指定协议，默认为file文件协议。
(2)定位资源
name 锚点
<a name="top">顶部</a>
<a name="center">中间</a>
<a href="#top">回到顶部</a>
6.表格标签
<!DOCTYPE html> <html> <head> <title>HTML学习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <table border="1" width="50%" align="center" cellpadding="8"> <caption>用户列表</caption> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr align="center"> <td>AAA</td> <td>男</td> <td>22</td> </tr> <tr align="center" > <td>BBB</td> <td>女</td> <td>21</td> </tr> <tr align="center" > <td colspan="3"> 人数总计: </td> </tr> </table> </body> </html>结果:
7.表单标签
<form></form>
(1)form标签中常见的属性
action: 指定表单组件数据发送的位置。如果没有定义action属性，那么默认提交到当前页面。
method: 定义表单提交的方式。只有两种常用 get post.如果没有指定method，默认就是get提交方式。
(2)input标签中type的类型如下
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
(3)两个特殊的
A:<select>
选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
<option>:子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。
B: <textarea>
多行文本框。如：个人信息描述。
