html+css+javascript 称作前端三剑客，html主要做前端的骨架，css做前端的效果，js做前端的性能，打个比方：就是html就好比是毛坯房，css就好比是进行装修，js就好比是在装修好的房间内加入智能电器，家具等。这一节来简单的学习html。
HTML及标签简介
HTML是超文本标记语言，HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签。此处使用编辑器 ： Pycharm 以及浏览器 ：Chrome、Firefox
HTML文件的基本内容
打开网页点击有键，查看检查，或F12 就可以看见网页的代码，也就是HTML文件。不同的浏览器查看方式稍有不同，请自行查阅。
HTML的基本结构
<?xml version="1.0" encoding="UTF-8"?> <!--html版本以及编码格式-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--文档类型-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!--html主体-->
<head><!--html头文件，所有的效果，调用，均写在这里-->
<title>Title</title><!-- html网页标题 -->
</head>
<body><!-- html身体，所有的页面显示都写在这里 -->
</body>
</html>
HTML标签
1、由尖括号包裹单词构成，eg：<html>,所以标签不可能以数字开头。
2、标签不区分大小写，推荐小写。
3、标签可以嵌套，但不能交叉嵌套
错误示例：<a><b></a></b>
正确示例：<a><b></b></a>
标签的使用样式及属性
标签使用样式：
1、开始标签<a >标签体</a>结束标签
2、自闭合标签，eg: <textarea>,<span><input>,<img>
标签属性：
a、通常为键值对形式出现，eg：color=“red” id = ‘eat’
b、属性只能出现在开始标签和自闭合标签内
c、属性名字全部小写，属性值必须用单引或者双引包裹
d、如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）
html文件各部分标签详解-- <body>
块级标签和内联标签：
块级标签和内联标签：
1 块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
2 内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>
3 块级元素的特点：
总在新行上开始
高度，行高以及外边距和内边距都可控制
宽度缺省，则是它容器的100%
它可以容纳内联元素和其他块元素
4 inline元素特点：
和其他元素在一行上
高，行高以及外边距和内边距不可改变
宽度就是其文字或图片宽度，不可改变
内联元素只能容纳文本或者其他内联元素
以下内容先做了解，后续css样式再做补充
行内元素注意：
设置宽度width无效
设置高度height无
设置margin只有左右margin有效，上下无效
设置padding只有左右padding有效，上下则无效，
注意元素范围是增大了，但是对元素周围的内容是没影响的。
标题标签（header）
一般用在文章的标题（h1-h6）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
<h1>第一段落</h1>
<h2>第二段落</h2>
<h3>第三段落</h3>
<h4>第四段落</h4>
<h5>第五段落</h5>
<h6>第六段落</h6>
</body>
</html>
段落标签（paragraph）
会把html文档分成若干段落，属于块级标签，自己独占一行。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
<p>
将进酒
唐代：李白
君不见，黄河之水天上来，奔流到海不复回。
君不见，高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
</p>
</body>
</html>
在显示到时候，文本会根据网页的宽度自动进行换行，
列表标签
列表标签分为有序列表，无序列表，定义列表
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
无序列表
<ul>
<li>apple</li>
<li>banana</li>
<li>pear</li>
</ul>
有序列表
<ol>
<li>dog</li>
<li>monkey</li>
<li>house</li>
</ol>
定义列表
<dl>
<dt>时间
<dd>周一</dd>
<dd>周二</dd>
<dd>周三</dd>
</dt>
<dt>课程
<dd>python</dd>
<dd>java</dd>
<dd>c++</dd>
</dt>
</dl>
</body>
</html>
显示：
列表快捷键：ul>li3 点击tab键，快速写出表格。ol>li3,或者dl>dt2>dd3 ,然后点击tab键。
dl>dt*2>dd*3 <!-- 点击tab键，生成如下表格 -->
<dl>
<dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dt>
<dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dt>
</dl>
图片标签
用于向页面插入图片，是内联标签。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
图片链接正确：<br/>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
图片链接不正确（无图片链接）：<br/>
<img src="无.jpg" alt="图片丢了"/><br/>
</body>
</html>
图片标签格式：
<img src="图片地址" alt="图片加载失败后替换的文本" title="鼠标滑过图片时的提示文本" > 图片的格式可以为GIF，PNG，JPEG
超链接标签
超链接标签<a>:
<a href=“目标网址” title=“鼠标滑过显示的文本” target=“_blank”>链接显示的文本</a>
实现网页跳转和本页内跳转（要注意目标网址的区别）
target的参数如果是self 则表示就在本页面进行条状，blank表示新开一个页面跳转
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
<a href="https://baidu.com/" target="_blank" title="网页跳转">百度一下</a>
<p id="test">第一张图----跳转到此处</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第二张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第三张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第四张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第五张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<a href="#test" title="本页面内跳转">页面内跳转</a>
</body>
</html>
当点击百度一下时，网页会自动跳转到百度页面。点击--页面内跳转--时，页面会跳转到--第一张图----跳转到此处--处。由于页面过大，就不在这里展示了。请自行测试。
行内元素和块级元素的转换：
行内元素转块级元素：display:block；
块级元素转行内元素：display:inline;
特俗符号
特殊符号就是网页上一些比较特殊的符号，因为有时候我们需要特殊符号，比如，我要把html代码显示在页面上，特殊符号以 & 开头，分号结尾。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
ww<a
<!--以上只会在网页上显示ww，他会将<a视为一个标签，若要显示，就要使用特俗符号 -->
<>"  
©®&
</body>
</html>
特俗符号可以在使用时去查询即可。
表格
表格其实就是大家平时看到的二维表，比如Excel表格之类，表格布局火于90年代，如今一般用于后台展示数据，现今已经不大使用。表格分为表头，表身和表脚。
表格整体结构：
| 标签名 | 描述 |
|---|---|
| table | 表格标签 |
| thead | 表头标签 |
| tbady | 表身标签 |
| tfoot | 表脚标签 |
| caption | 表格标题 |
| rowspan | 合并行 |
| colspan | 合并列 |
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
table tr td {
border :1px solid blue;
width: 50px;
}
</style>
</head>
<body>
<table style="border-collapse: collapse">
<caption>员工信息表</caption>
<thead>
<th><td>name</td></th>
<th><td>age</td></th>
<th><td>sex</td></th>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td></tr>
<tr>
<td>小红</td>
<td>16</td>
<td>女</td></tr>
<tr>
<td>小路</td>
<td>19</td>
<td>男</td></tr>
</tbody>
</table>
<!--<table></table>:加上此标签，表格的内容会在全部下载后才会显示。-->
<!--<table></table>:在没有加CSS样式时，浏览器里是没有表格框的-->
<!--<th></th>:表头默认粗体，剧中-->
</body>
</html>
表单
表单是搜集用户数据信息的各种表单元素的集合区域，他用于收取用户数据并向后台发送，前后交互的方式之一，表单常应用于 登录注册，搜索，文件上传等。
| 参数 | 描述 |
|---|---|
| action | 提交时候的地址默认使用当前页面 |
| method | 提交时候的方法有get 和 post 两种方法，默认使用 get |
| entype | 设置编码格式有三种： 默认：application/x-www-form-urlencoded 上传文件：multipart/form-data 不建议使用：text/plain |
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
<form action="" name="登陆表单" method="get" style="text-align: left">
用户名：<input type="text" name="我的提交" /><br/><br/>
密 码：<input type="password" name="密码" /><br/><br/>
性 别：男<input type="radio" name="单选" />
女<input type="radio" name="单选" />
保密<input type="radio" name="单选" /><br/><br/>
爱 好：唱歌<input type="checkbox" name="多选" />
跳舞<input type="checkbox" name="多选"/>
画画<input type="checkbox" name="多选"/><br/><br/>
上传头像：<input type="file" name="打开文件"/><br/><br/>
地 址：<select name="地址选择" id="" >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option></select><br/>
<br/>
个人简介：<textarea name="文本输入" id="" cols="30" rows="10"></textarea><br/>
<br/>
<input type="reset" value="重置"/> 
<input type="submit" value="提交" />
</form>
</body>
</html>
表单中常用的标签：
| 标签 | 描述 |
|---|---|
| input | 表单中使用频率最高的标签，没有之一 |
| textarea | 文本域，一般用于多行文本 |
| select | 下拉框，一般用于选项 |
input标签：
- name属性：表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
- value属性:表单提交项的值
- input标签中不同type，value值的不同
type="button"/"reset"/"submit"--定义按钮上显示文本
type="text"/"password"/"hidden"--定义输入字段初始值
type="checkbox"/"radio"/"image"--定义与输入相关联的值
input常用的type属性值：
| 参数 | 描述 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 复选框 |
| file | 文件选择 |
| hidden | 隐藏域 |
| submit | 提交 |
| reset | 重置 |
input标签其他属性：
| 参数 | 描述 |
|---|---|
| placeholder | placeholder 属性规定可描述输入字段预期值的简短的提示信息 |
| name | 表单与后台交互时最重要的一个属性，要求input标签都带上 |
| readonly | 只读 |
| disabled | 禁用 |
| value | input的值单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。</p>
</body>
</html>
select下拉框：
| 参数 | 描述 |
|---|---|
| option | 下拉框的基本标签，有多少个option 就有多少个下拉选项 |
| selected | 表示选中某个下拉选项 |
| size | 表示下拉框，显示多少个，默认显示一个 |
| name | 下拉框名字，下拉框向后台提交数据的时候，所传的名字 |
表单中常用的标签：
| 参数 | 描述 |
|---|---|
| fieldset | 给表单设置分组 |
| legend | 设置分组表单的标题 |
| label | 为 input 元素定义标注 |
form表单包含元素（需要牢记）：
| form | |||||
|---|---|---|---|---|---|
| ==> | input | textarea | select | fieldset | label |
| 输入框 | 文本输入 | 下拉选项 | 表单分组 | 为 input 元素定义标注 |
| input | ||||||
|---|---|---|---|---|---|---|
| ==> | text | password | radio | checkbox | submit | button |
| 描述 | 文本输入 | 密码输入 | 单选框 | 多选框 | 提交 | 按钮，配合js使用 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<p>点击其中一个文本标签选中选项：</p>
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
以上为本节内容，仅仅HTML简单的描述。
网友评论