HTML

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>:水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

View Code

<div></div>标签和<span></span>标签

<div>标签是一个块级元素，并无实际意义，主要通过css样式为其赋予不同的表现
<span>标签表示行内元素，并无实际意义，主要通过css样式为其赋予不同的表现

块级元素与行内元素的区别：
块级元素，每一个元素单独占用一行，期间可以嵌套块级元素与行内元素
行内元素则不占用一整行，期间只可以嵌套行内元素

View Code

图形标签： <img>

<img src="图片路径" alt="图片加载失败时的提示" title="鼠标悬浮时的提示" height="图片高度" width="图片宽度">
宽高属性只设置一个，另一个会自动等比缩放

View Code

超链接标签（锚标签）： <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
各部分之间用  /  符号分隔开

URL

<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>

View Code

列表标签：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>

View Code

表格标签：<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>

View Code

<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>

View Code

<textarea>标签

<textarea cols="宽度" rows="高度" name="名称">
    可以输入多行文本
</textarea>

View Code

<fieldset>标签

<fieldset>
    <legend>登陆</legend>
    <p>用户名：<input type="text"></p>
    <p>密码：<input type="password"></p>
</fieldset>

View Code

<label>标签

<label>标签为<input>标签定义标记
<label>元素不会向用户呈现任何特殊效果
<label>标签的for属性与<input>标签的id属性必须相同

<div>
    <label for="username">用户名：</label>
    <input type="text" id="username">
</div>

View Code

<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="重置">

View Code

<form>表单标签

<form action="http://www.baidu.com">      <!--包裹数据,进行提交，提交给百度-->
    <input type="button" value="按钮">        <!--固定按钮，无功能-->
    <input type="submit" value="提交">      
    <input type="reset" value="重置">       
</form>

View Code

posted on 2017-12-29 11:58 二十四岁半阅读(250) 评论(0) 收藏举报

刷新页面返回顶部

HTML

导航

公告