web开发基础：HTML

HTML文档结构

<!DOCTYPE HTML> 文档声明，必须写在文档的第一行【该文档是HTML5文档】
<html> 根标签
    <head> 头部信息【描述文档的属性和信息】
        ...
    </head> 
    <body> 页面主体内容
        ...
	</body> 
</html>

head标签内容

<html> 根标签
    <head> 头部信息【描述文档的属性和信息】
        <title>标题信息</title>
        
        <meta>	提供有关页面的原信息，针对搜索引擎和更新频度的描述和关键词
        1. http-equiv属性
        	它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
        <!--重定向 2秒后跳转到对应的网址，注意分号-->
		<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
        <!--指定文档的内容类型和编码类型 -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <!--告诉IE浏览器以最高级模式渲染当前网页-->
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        2. name属性
        	主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
		<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
		<meta name="description" content="总结">
        
       	<!--icon图标（网站的图标）-->
       	<link rel="icon" href="fav.ico">
        
       	<!--定义内部样式表-->
       	<style></style>
        
      	<!--引入外部样式表文件-->
 		<link rel="stylesheet" href="mystyle.css">
        
        <!--定义JavaScript代码或引入JavaScript文件-->
        <script src="myscript.js"></script>
        <link>
        ...
    </head> 
    <body> 
        ...
	</body> 
</html>

body常用标签

块级元素 [display:block]：<h1>~<h6> <p> <li> <ol> <ul> <div> <table> <form>

a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

b、元素的高度、宽度、行高以及顶和底边距都可设置。

c、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

h1 ~ h6 标题标签

<html> 
      <head> 
          ...
      </head> 
      <body> 页面主体内容
          <!-- h1~h6 标题标签 -->
          <h1>一级标签</h1>
          <h2>二级标签</h2>
          ...
          <h6>六级标签</h6>
  	</body> 
  </html>

段落标签 p

<body>
    <p>这里是HTML基础-段落标签p</p>
    <p>这里是HTML基础-段落标签p</p>
</body>

列表标签 ul（无序）, ol（有序）

 <!-- 无序列表 type可以定义无序列表的样式-->
    <ul type="circle">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>

    <!-- 有序列表 type可以定义有序列表的样式 -->
    <ol type="a">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

ol标签的属性：
type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
  
  列表标识的起始编号：默认为1
ul标签的属性：
type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识

盒子标签 div

<div id='wrap'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='para'></div>
    <div class='lists'></div>    
</div>

分割线 <hr>

表单标签 form
表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（） <form>允许出现表单控件</form>

 <form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                用户名称：
                <input type="text" name="txtUsename" value="请输入用户名称" readonly>
            </p>
            <p>
                用户密码：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                确认密码：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--单选框-->
            <p>
                用户性别：
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=''>女
            </p>
            <!--复选框-->
            <p>
                用户爱好：吃
                <input type="checkbox" name="chkhobby" value="吃" checked> 喝
                <input type="checkbox" name="chkhobby" value="喝"> 玩
                <input type="checkbox" name="chkhobox" value="玩"> 乐
                <input type="checkbox" name="chkhobox" value="乐" checked>
            </p>
            <!-- 按钮 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按钮">
            </p>
            <!--文件选择框-->
            <p>
                请上传文件：
                <input type="file" name="txtfile">
            </p>
            <!--textarea-->
            <p>
                自我介绍：
                <textarea name="txt" cols="20" rows="5"></textarea>
            </p>
            <!--选择框-->
            <!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
            <p>籍贯：
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州" selected>广州</option>
                </select>
            </p>
            <!--下拉列表-->
            <p>意向工作城市：
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州" selected>广州</option>
                </select>
            </p>        
        </form>

行内元素 [display:inline] : <a> <span> <br> <i> <em> <strong> <label>

a、和其他元素都在一行上；

b、元素的高度、宽度及顶部和底部边距不可设置；

c、元素的宽度就是它包含的文字或图片的宽度，不可改变。

超链接标签 a

<body>
    <h1>
        <!-- a链接 超链接  
        target:_blank 在新的网站打开链接的资源地址
                _self 在当前网站打开链接的资源地址
        title: 鼠标悬停时显示的标题
        -->
        <a href="http://www.baidu.com" target="_blank" title="百度搜索">百度搜索</a>
        <a href="a.zip">下载包</a>
        <a href="mailto:q1.ang@qq.com">联系我们</a>
        <!-- 返回页面顶部的内容 -->
        <a href="#">跳转到顶部</a>

        <!-- 返回某个id -->
        <a href="#p1">跳转到p1</a>
        
        <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:;">内容</a>
    </h1>
</body>

表格标签 table

<html> 
    <head> 
        ...
    </head> 
    <body> 页面主体内容        
        <!-- 表格标签 table -->
  		<table>
            <!--表格头-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是th-->
                    <th></th>
                </tr>
            </thead>
            <!--表格主体-->
            <tbody>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
        
	</body> 
</html>

换行标签 <br>

行内块状元素 [display:inline-block]: <img> <input>

a、和其他元素都在一行上；

b、元素的高度、宽度、行高以及顶和底边距都可设置

图片标签 img

<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

文本样式标签

1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标 
6. `<sub></sub>`：下标
7. `<em></em>`:强调-斜体
8. `<strong></strong>`:强调-加粗

特殊字符

内容	代码
空格	` `
>	`>`
<	`<`
&	`&`
¥	`¥`
版权	`©`
注册	`®`

HTML特殊符号对照表

标签嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

块级元素不能放在p标签里面，比如：

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签；