01-HTML基本介绍
本篇主要介绍HTML相关标签的使用,以及其常用标签的作用等介绍。
一、HTML的介绍
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
其基本结构为:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--指定编码格式 --> <title>HTML标题</title> </head> <body> <h1>hello world</h1> </body> </html>
这便是一个最简单的HTML文档,其主要包含:
<!DOCTYPE html>:第一行是文档声明;
<html></html> :“<html>”标签和最后一行“</html>”定义html文档的整体;
<head></head> :“<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,
头部常加的:https://blog.csdn.net/chunchun1230/article/details/79925886
<body></body>:“<body>”内编写网页上显示的内容。
二、HTML常用标签
通常我们将HTML标签分为块元素标签和内联元素标签,即:
块元素:在布局中默认会独占一行,块元素后的元素需换行排列。
内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。
2.1 常见的块元素标签:
1、标题标签: h1 -- h6 ,即一级标题到六级标题;
2、段落标签:<p></p>
4、盒子标签: <div></div> ,通常用于布局;
5、列表标签:
<ul> <li>列表标签</li> <li>列表标签</li> </ul>
6、表格标签
<table> <!--表格标签--> <tr> <!-- 行 --> <th>name</th> <!-- 表头单元格 --> <th>age</th> <th>gender</th> </tr> <tr> <td>alex</td> <!-- 普通单元格 --> <td>35</td> <td>male</td> </tr> </table>
7、表单标签
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<form action="http://www..." method="get"> <p><label>姓名:</label><input type="text" name="username" /></p> <p><label>密码:</label><input type="password" name="password" /></p> <p> <label>性别:</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>爱好:</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片:</label> <input type="file" name="person_pic"> </p> <p> <label>个人描述:</label> <textarea name="about"></textarea> </p> <p> <label>籍贯:</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <input type="reset" name="" value="重置"> </p> </form>
1、<form>标签 定义整体的表单区域,属性:action属性 定义表单数据提交地址,method属性 定义表单提交的方式,一般有“get”方式和“post”方式;
2、<label>标签 为表单元素定义文字标注;
3、<input>标签 定义通用的表单元素;
① type属性
② value属性 :定义表单元素的值 ③ name属性: 定义表单元素的名称,此名称是提交数据时的键名 |
4、<textarea>标签: 定义多行文本输入框,而<input>是定义单行文本框;
5、<select>标签 :定义下拉表单元素;
6、<option>标签 :与<select>标签配合,定义下拉表单元素中的选项;
2.2 内联元素标签
1、超链接标签:<a href="http://www.baidu.com"></a>; 链接到另外一个网页,具有内联元素基本特性,默认文字蓝色,有下划线
2、内联容器标签:<span></span>,没有默认样式;
3、图片标签:<img src="图片地址" alt="图片不正常显示时出现" title="鼠标移上时显示">;
2.3 常用的功能标签
1、换行标签:<br>
2、注释标签:<!-- 注释标签 -->
3、特殊字符: -- 空格标签 ;
<-- <小于号;
>-- >大于号;
要想了解全面请点击:W3School --> http://www.w3school.com.cn/html/html_doctype.asp
Over~~~~下篇介绍常用的css样式~~~~