HTML是什么?
- 超文本标记语言(Hypertext Markup Language,HTML),通过标签语言来标记要显示在网页中的各个部分。一套浏览器认识的规则。
- 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,不同浏览器,对同一个标签可能会有不完全相同的解释(浏览器的兼容性)
- 静态网页文件扩展名: .html 或者 .htm
HTML不是什么?
- HTML不是编程语言,而是一种标记语言(Markup Language)
- HTML使用标记标签来描述网页
HTML结构:
HTML标签格式:
标签语法:
- <标签名 属性1="属性值1" 属性2="属性值2" ......>标签体</标签名>
- <标签名 属性1="属性值1" 属性2="属性值2" ......>
常用标签:
<!DOCTYPE>标签
<!DOCTYPE>声明位于文档中的最前面位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或者XHTML规范。
作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
解析类型(document.compatMode):
- 怪异模式(BackCompat):浏览器使用自己的怪异模式解析渲染页面
- 标准模式(CSS1Compat):浏览器使用W3C的标准解析渲染页面
这个属性会被浏览器识别并使用,如果页面没有DOCTYPE的声明,那么浏览器会默认使用怪异模式进行渲染
<head>内常用标签:
<meta>标签
- <meta>标签的介绍:
- <meta>元素可提供有关网页的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
- <meta>标签位于文档的头部,不包含任何内容
- <meta>提供的信息是用户不可见的
- <meta>标签的组成:
- <meta>标签有name属性和http-equiv属性,不同的属性含有不同的参数值,实现了不同的网页功能
- name属性:主要用于描述网页,对应的属性值为content,content中的内容主要是用于搜索引擎机器人查找信息和分类信息
<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的"> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
http-equiv属性:相当于http的文件头作用,向浏览器传递信息,帮助浏览器正确的显示网页内容,对应的属性值为content,content中的内容为各个参数的变量值
-
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非<meta>标签
<title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
<body>内常用标签
基本标签(块级标签和内联标签)(p标签无法嵌套块级标签)
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 特殊字符: < >;";©®
<div></div>标签和<span></span>标签
<div>标签是一个块级元素,并无实际意义,主要通过css样式为其赋予不同的表现 <span>标签表示行内元素,并无实际意义,主要通过css样式为其赋予不同的表现 块级元素与行内元素的区别: 块级元素,每一个元素单独占用一行,期间可以嵌套块级元素与行内元素 行内元素则不占用一整行,期间只可以嵌套行内元素
图形标签: <img>
<img src="图片路径" alt="图片加载失败时的提示" title="鼠标悬浮时的提示" height="图片高度" width="图片宽度"> 宽高属性只设置一个,另一个会自动等比缩放
超链接标签(锚标签): <a></a>
超链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是图片,电子邮箱地址,文件,甚至是一个应用程序
URL是统一资源定位器(Uniform Resource Locator),也被称为网页地址,是因特网上标准的资源的地址
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成:
1 http:// 或者 ftp:// 协议
2 站点地址:可以是域名或者IP地址
3 页面在站点中的目录: stu
4 页面名称: intro.html
各部分之间用 / 符号分隔开
<a href="http://www.jd.com">click</a> <a href="#i1">i1</a> <a href="#i2">i2</a> <div id="i1" style="background-color: bisque;height: 500px">i1</div> <div id="i2" style="background-color: yellow;height: 500px">i2</div>
列表标签:ul ol dl
<!--无需标签,disc实心圆点(默认),circle空心圆点,square空心方块--> <ul type="square"> <li>第一章</li> <li>第二章</li> </ul> <!--有序列表,按照数字排序--> <ol> <li>第一章</li> <li>第二章</li> </ol> <!--定义列表--> <dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> </dl>
表格标签:<table></table>
<table border="1" width="表格宽度" cellpadding="内边距" cellspacing="外边距"> <!--加边框--> <thead> <tr> <!--表头--> <th>id</th> <!--也可以使用<td>,但<th>有加粗效果,更美观--> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <!--内容--> <td>1</td> <td>jack</td> <td>18</td> </tr> <tr> <td rowspan="2">2</td> <!--单元格竖跨2行--> <td colspan="2">tom</td> <!--单元格横跨2列--> <!--<td>28</td>--> </tr> <tr> <!--<td>3</td>--> <td>michael</td> <td>38</td> </tr> </tbody> </table>
<select>标签
<select name="pro"> <!--下拉框(单选)--> <!--将 {name:value} 发送到服务端--> <option selected="selected">北京</option> <!--默认选择北京--> <option value="sh">上海</option> <option>广州</option> </select> <select multiple size="5"> <!--下拉框(多选);同时显示5个(默认显示5个)--> <option selected="selected">北京</option> <option>上海</option> <option>广州</option> </select> <select multiple size="6"> <optgroup label="河北"> <!--对河北进行分组--> <option>石家庄</option> <option>保定</option> <option>廊坊</option> </optgroup> </select>
<textarea>标签
<textarea cols="宽度" rows="高度" name="名称"> 可以输入多行文本 </textarea>
<fieldset>标签
<fieldset> <legend>登陆</legend> <p>用户名:<input type="text"></p> <p>密码:<input type="password"></p> </fieldset>
<label>标签
<label>标签为<input>标签定义标记 <label>元素不会向用户呈现任何特殊效果 <label>标签的for属性与<input>标签的id属性必须相同 <div> <label for="username">用户名:</label> <input type="text" id="username"> </div>
<input> 标签
<input type="test"> <!--生成一个输入框--> <div>用户名:<input type="text"></div> <div><label for="xxx">用户名:</label><input type="text" id="xxx"></div> <!--当点击用户名时,获取需要输入位置的焦点(id不能重复)--> <div>密码:<input type="password"></div> <!--输入的字符串为密文形式展示--> <div>邮箱:<input type="email"></div> <!--会对输入的字符串进行验证,检查是否为邮箱格式(不支持所有浏览器)--> <div>性别: <!--单选--> <div>男 <input type="radio" name="yyy" /></div> <!--name="yyy"(必须相同):男女只能选择一个--> <div>女 <input type="radio" name="yyy" /></div> </div> <div>爱好: <!--多选--> 吃<input type="checkbox" /> <!--可以多选--> 喝<input type="checkbox" /> 玩<input type="checkbox" /> </div> <div>上传: <!--选择上传本地文本--> <input type="file"> </div> <input type="button" value="按钮"> <!--固定按钮,无功能--> <input type="submit" value="提交"> <input type="reset" value="重置">
<form>表单标签
<form action="http://www.baidu.com"> <!--包裹数据,进行提交,提交给百度--> <input type="button" value="按钮"> <!--固定按钮,无功能--> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>