什么是html?
html是什么呢?html是一套规则,浏览器认识的规则。
html文件是后缀为.html的文件。
要想学习前端?我们必须要了解以下三个基础知识。
- html
- javascript
- css
我们可以把html比喻成一个裸体的美女~,那么css(样式)就可以比喻成漂亮的衣服,javascript可以比喻成这个人的思想和行为,通过以上三种知识,我们就可以完成90%以上的网站前端开发。
要做一个网站,以上三种语言必不可少,觉得亚历山?别担心,so easy,因为学渣都觉得很简单(本人学渣)。
废话不多说下面开始介绍本文重点:html(20个标签),对于htl只要学习这20个标签,其他有用到再扩展即可,学会这20个标签你就可以完成html页面下图页面的开发,是不是比背英文单词还简单。
html在开发实践中的应用
- 静态html页面
- 开发后台程序:
- 写Html文件(充当模板的作用)
- 数据库获取数据,然后替换到html文件的指定位置(Web框架)
html运行?
- 找到文件路径,直接浏览器打开
编写Html文件
创建html文件
鼠标右键,新建xxxx.txt文本,修改后缀为xxxx.html,至此一个html文件就创建成功,我们可以直接双击,该页面即可显示。
一个标准的页面html页面格式如下:
<--html页面基本格式-->
<!DOCTYPE html> <--html默认表示html5,DOCYTPE表示页面遵循某种规范--> <html lang="en"> <--一个页面只能有一个html标签,lang表示遵循某种语言,网站上的翻译是通过识别lang="en"来进行翻译的--> <head> <meta charset="UTF-8"> <--charset="UTF-8"表示页面编码格式--> <title>Document</title> <--页面标题,整个head头部只有此标签可以被用户查阅--> </head> <body> </body> </html>
- title标签,标签表示是网站的标题
- head标签,标签表示是网站的头部
- body标签,表示网页的内容
- 代码的注释: <!-- 注释的内容 -->
标签分类
标签分为自闭和标签和主动闭合标签 ,格式如下:
- 自闭合标签
1、<meta />
2、<meta>
ps:推荐采用第一种
- 主动闭合标签
<div></div>
head内部标签
- meta标签: 编码,跳转,刷新,关键字,描述,IE兼容
- IE兼容:<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- 编码:<meta charset="UTF-8" /> ====>指定页面编码,自闭和标签,最后的 “ / ” 可以省略,但不建议省略。
- 跳转和刷新:<meta http-equiv="Refresh" Content="5; Url=https://www.baidu.com" />、<meta http-equiv="Refresh" Content="5" />
- 关键字:<meta name="keywords" content="汽车,汽车之家,汽车网,汽车图片,新闻,评测" />
- 描述:<meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片" />
ps:以上比较常用的点为1,2 ,其他用到查询即可只需有印象。
- title标签 ====> 用来描述页面标题
<title>博客园</title>
- <link /> 搞图标,欠
- <style />欠
- <script> 欠
ps:head的内部标签一般外部看不到,只有title标签是外部可查阅的
body内部标签
form标签
form表单属性,主动闭合标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<form action="/index/" method="GET" enctype="multipart/form-data"> </form> <-- 1、action="/index/"表示要传送给哪个url 2、method="GET"表示以什么方式传送,GET参数放在url头部,POST参数放在身体 3、exctype="multipart/form-data" 选填,在需要传送文件时,需要填写该参数,该参数表示把文件一点一点的传送给后台 -->
input系列
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
input标签 checked属性: -radio单选框:checked="checked"表示默认选中,不可多选 -checkbox复选框:cheked="checked"表示默认选中,可以多选 value属性: -文本框:表示文本框输入的内容 -submit按钮:表示按钮名称 -button按钮:表示按钮名称 -radio单选框:表示数据传输键值对的value,ps:value="1" value="2" -checkbox复选框:表示数据传输键值对的value, ps:value="1" value="2" key:["1","2"] name属性:标签名称,数据传输中键值对的key -text文本框:表示文本框的名字 -radio单选框:同名的radio,互斥,ps:name="sex" 则name都为sex表示不能同时选中 -checkbox复选框:名字相同,checkbox会放入同一个list数组中, ps:name="hobby" -file文件:数据传输中键值对的key,ps:file属性依赖于form表单的enctype="multipart/form-data",表示把文件一点一点的传送给后端 type属性: -type="text" <!-- 输入文本框 --> -type="password" <!-- 输入文本框,内容隐藏 --> -type="submit" <!-- 表单提交按钮 --> -type="buttion" <!-- 按钮 --> -type="redio" <!-- 单选框 --> -type="checkbox" <!-- 复选框 --> -type="file" <!-- 文件传输 --> -type="reset" <!-- 重置按钮 -->
textarea标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<textarea name="textarea" cols="30" rows="10"></textarea> <!-- -textarea:多行文本 -name:数据传送中键值对的key -cols:显示的函数,超出则换行 -rows:显示的列数,超出则出现滚动条 -style中的属性值: ps:font-size:扩展,此字段与cols和rows字段相对,如果font-size越大,则边框越大 width:设置多行文本宽度 height:设置多行文本高度 font-size大小不影响边框大小 -->
select标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<select name="CityValue" id="" size="15" multiple="multiple" > <optgroup label="福建省"> <option value="1" selected="selected">泉州</option> <option value="2" selected="selected">福州</option> </optgroup> <optgroup label="四川省"> <option value="3">南充</option> <option value="4">成都</option> <option value="5">汶川</option> </optgroup> </select> <!-- select -name:表示选择框的名称 -size:表示下拉列表的长度 -multiple:表示是否支持多选 optgroup label:表示分组名称,无法选择 ps:可以不写此标签,用的比较少,如上面代码一样 option: -value:传送到后端value值 ps:如果select的multiple属性值为multiple,则传送到后端的值为数组[value1,value2] -->
a标签
- 锚
- 跳转
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ height:600px; width:100%; } </style> </head> <body> <a href="#i1">第一章节</a> <a href="#i2">第二章节</a> <a href="#i3">第三章节</a> <div id='i1' class='content'>1</div> <div id='i2' class='content'>2</div> <div id='i3' class='content'>3</div> </body> <--href='#某个标签的ID' 标签的ID不允许重复-->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<a href="http:www.baidu.com"> <--href填写地址-->
其他标签
- 图标: > < ===>空格,大于,小于号
- p标签,段落 <p></p>
- br,换行,br标签是个行内标签<br />
标签:
- 块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
- 行内(内联)标签: span(白板)
- 标签之间可以嵌套
- 标签存在的意义:定位,css操作,js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列 ====> h1,h2......h6 和 h1最大
- div,块级标签,白板
- span,行内标签,白板
img标签
src ==> 图片路径
alt ==> 图片加载出错时显示
title ==> 鼠标放置在图片上时显示说明:郁金香
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" title="郁金香"/>
列表标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<ul><li>1</li> <li>2</li> <li>3</li> </ul> <ol><li>a</li> <li>b</li> <li>c</li></ol> <dt>第一章</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> <dt>第二章</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd>
- 表格 ==> 标准格式如下:
colspan = '' ==> 表示占多少行
rowspan = '' ==> 表示占多少列
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table border="1"> <thead> <tr> <th>主机名</th> <th>ip</th> <th>port</th> </tr> </thead> <tbody> <tr> <td colspan="2">主机1</td> <td rowspan="2">192.168.1.1</td> <td>9000</td> </tr> <tr> <td>主机1</td> <td>主机1</td> <td>主机1</td> </tr> <tr> <td>主机1</td> <td>主机1</td> <td>主机1</td> </tr> </tbody> </table>
label
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<--用于点击文件,使得关联的标签获取光标--> <label for="username">用户名:</label> <input id="username" type="text" name="user" />
20个标签
以上为HTML的20个左右的标签,可以满足日常开发的使用。