淘先锋技术网

首页 1 2 3 4 5 6 7

html基础


HTML

文章目录

1. 基本概念

1.1 概念

  1. html(hyper text markup language)，超文本标记语言，用于创建网页的标准标记语言
  2. 标记语言是由标签构成的语言，例如html、xml
  3. 标记语言不是编程语言
  4. html运行在浏览器上，由浏览器来解析

1.2 快速入门

  1. html的后缀名可以是.html也可以是.htm, 没有区别

  2. 标签的分类：
    围堵标签：<html> </html> 成对出现
    自闭合标签：<br/>单独出现

  3. 标签嵌套：

    <p><a></a></p>	//正确嵌套方式
<p><a><p><a>	//错误嵌套方式

  4. 标签的内部可以定义属性,属性由键值对组成，值需要用双引号引用，多个属性用空格隔开

    <p attr1="val1" attr2="val2" ...... >
</p>

  5. html标签不分大小写

    <p> </P>	//但推荐标签统一使用小写

2. html基本结构

<!DOCTYPE html> <!--生命当前文档是html5文档-->
<html>  <!--根元素，只能有一个-->
    <!--
        头元素：
        1. 元数据meta title
        2. 引入外部的资源文件夹
    -->
    <head>
        <meta charset="utf-8">
        <title>First Web Page</title>
    </head>
    <!--
        主体，浏览器显示的内容全部在这里编写
    -->
    <body>
        hello html
        这是一个页面内容
    </body>
</html>

3. 常用标签

3.1 文本标签

  1. 标题标签 h1,h2,h3,h4,h5,h6
  2. 段落标签 p
  3. 换行标签 br
  4. 水平线标签 hr
  5. 范围标签，用于局部强调 span
<body>

    <p>This is a paragraphy</p>

    <hr color="red" size="10" >

    <p>This is another paragraphy</p>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    这段话太太太太太太太太太太太<br>太太太太太太太太太长了<br>,我换个行

    <br>
    <br>

    有些内容是废话，有些内容是要<span style="color: red; font-size: x-large;">划重点</span>的，不知道重点，你就要挂科
</body>

效果如下：
在这里插入图片描述

3.2 图片标签 img

  1. 基本属性 src title
    src=图片的地址
    title=悬停时图片显示的文字

  2. 热点区域 map area
    map热点区域 可用于图片区域跳转，当鼠标点击图片map设置的区域时会跳转到指定的 herf 标记的位置
    用法：创建一个map标签并设置name属性，用于配置热点区域；然后再img标签中引用创建的map： usemap="#mapName"(不要忘记#)

    <body>
        <!--
            图片标签---img
            title----鼠标悬停在图片上时，显示的文字
            alt-----功能与title类似，title兼容性更好
            width---图片宽px
            height----图片高px
            单独设置宽高容易使图片失真
        -->
    
        <img src="img/cat.png" title="小猫咪" alt="" width="260px" height="150px" >
        <br>

        <img src="img/bg1.png" alt="" title="This is a Test For Map" usemap="#mapTest">
        <map name="mapTest">
            <area shape="circle" coords="100,100,100" href="herf/circle.html" alt="" title="circle">
            <area shape="rect" coords="400,200, 600,100" href="herf/rectangle.html" alt="" title="rectAngle">
            <area shape="poly" coords="200,300, 240,400, 360,400, 400,300, 300,240" 
                    href="herf/polygon.html" alt="" title="polygon">
        </map>
</body>

3.3 列表标签

  1. 有序列表 ul - li (ul unordered list)

  2. 无序列表ol - li (ol ordered list)

    <body>
	    <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>

        <ol>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ol>
</body>

    显示效果如图：
    在这里插入图片描述

3.4 定义描述标签

定义描述标签，一般用于图文混合的场景中

<!--定义描述标签
dl - 
dt------dt一般只有一个
dd------dd可以有多个
-->

<dl>
    <dt>最受欢迎的产品</dt>
    <dd>商品价格：￥259</dd>
    <dd>商品名称：熊本熊</dd>
</dl>

<br><br>
<dl>
    <dt><img src="img/x1.jpg" alt=""></dt>
    <dd>商品价格：￥259</dd>
    <dd>商品名称：熊本熊</dd>
</dl>

显示效果如图：
在这里插入图片描述

3.5 布局标签 层 div

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Z这里是Div标签</title>
    </head>

    <body>
        <div id="container" style="width:500px;">

            <div id="header" style="background-color:#0616f8;">
                <h1 style="margin-bottom:0;text-align:center;">Div布局实例</h1>
            </div>

            <div id="menu" style="background-color:#c98d8d;height:200px;width:100px;float:left;">    
                菜单<br/>
                num1<br/>
                num2<br/>
                num3
            </div>

            <div id="content" style="background-color:#f3f38c;height:200px;width:300px;float:left;">
                中间内容
            </div>

            <div id="right" style="background-					          color:#000000;color:#FFFFFF;height:200px;width:100px;float:right;">
                信息内容
            </div>

            <div id="bottom" style="background-color:#F0F8FF;clear:both;text-align:center;">
                作者：zfm
            </div>

        </div>
    </body>
</html>

显示效果：
在这里插入图片描述

3.6 小结：标签分类

html标签可以分为块状元素和行级元素两类。

  • 块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；

  • 行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

  • PS:区分的简单方法：是否独占一行。

  • 块状元素和行内元素的区别：

    1. 块级元素会独占一行，其宽度自动填满其父元素宽度； 而行内元素会排列到同一行，其宽度随元素的内容变化而变化。
    2. 块级元素可以设置宽高；行内元素设置宽高无效。
    3. 块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖 直方向的padding没有效果。

  • 标签归类：
    属于块状元素的：

  • 标题标签 h1-h6,

  • 段落标签 p ,

  • 水平线标签 hr,

  • 有序列表标签 ol–li，

  • 无序列表标签 ul–li，

  • 定义描述标签 dl-dt-dd，

  • 容器标签 div

  • …

属于行级元素的：

  • 范围标签：span
  • 图像标签：img
  • …

4. 超链接

  • 页面间跳转
  • 锚链接
<!--超链接
    _self在当前页面跳转
    _blank新建页面并跳转
-->
<a href="div.html" target="_self">我是超链接，点我试试，当前页面跳转</a>  <br>
<a href="div.html" target="_blank">我也是超链接，点我试试，新建页面跳转</a>

<br>

<!--锚链接-->
<a href="#区域5的锚链接">区域5锚链接，点下试试</a>
<a href="div.html#锚链接">其他页面的锚链接,点下试试</a>

<div style="height: 300px;">
    区域1
</div>

<div style="height: 300px;">
    区域2
</div>

<div style="height: 300px;">
    区域3
</div>

<div style="height: 300px;">
    区域4
</div>

<div style="height: 300px;">
    <a name="区域5的锚链接"></a>    <!--定义一个锚链接-->
    区域5
</div>


<div style="height: 300px;">
    区域6
</div>

<div style="height: 300px;">
    区域7
</div>

<div style="height: 300px;">
    区域8
</div>

5. 表格标签table

5.1 规则表格

table

<!--table标签
    tr         表格的行
    td/th      表格的列，一般第一行用th，其它行用td
	border 	   表格的边框
    width
    height  如果不设置宽高，那么表格的宽高将由内容来决定
    cellpadding  内容距离边框线的距离（上下左右）
    cellspacing  表格各个格子之间的距离
    align   ---在table tr td中均可以设置，文字水平对齐方式，right，left，center
    valign  ------在table tr td中均可以设置，文字垂直对齐方式，top，bottom，center
-->
<table border="2" width="100%" height="150px" cellpadding="0" cellspacing="0">
    <tr align="center"> <!--第一行-->
        <td>序号</td> <td valign="center">商品名称</td> <td>价格</td>
    </tr>

    <tr align="right"> <!--第二行-->
        <td align="left">1</td>
        <td valign="top">辣条</td>
        <td>￥18</td>
    </tr>

    <tr> <!--align 文本的对齐方式，默认靠左 left--> <!--第三行-->
        <td>2</td>
        <td valign="bottom">可乐</td>
        <td>￥4.5</td>
    </tr>

</table>

显示效果：
在这里插入图片描述

5.2 不规则表格

  • colspan: 跨列

  • rowspan：跨行

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <table border="1"  width="90%" >
            <tr height="120px"> <!--跨三列-->
                <td colspan="3" align="center">这是跨列的</td>
            </tr>
        
            <tr height="60px">	<!--跨两行-->
                <td rowspan="2">这是跨行的</td> <td valign="top">这是正常的</td> <td>这是正常的</td>
            </tr>
        
            <tr height="20px">
                <td align="center">这是正常的</td> <td>这是正常的</td>
            </tr>
        
        
        </table>

    </body>
</html>

显示效果：
在这里插入图片描述

5.3 标题标签和逻辑分区标签

  • caption： 表格的标题
  • thead tbody tfoot : 都是逻辑分区标签，在编写样式之前对整体结构没有影响
<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <table border="1"  width="90%" >
            <!--caption 标题标签-->
            <caption style="font-size: large;"><b>班级成绩表</b></caption>

            <thead style="background-color: tomato;">
                <tr>
                    <th rowspan="2">姓名</th> <th colspan="3">科目</th>
                </tr>
                <tr>
                    <td>数学</td> <td>语文</td> <td>物理</td>
                </tr>
            </thead>
            
            <tbody style="background-color: wheat;">
                <tr>
                    <td>张三</td>	<td>95</td> <td>88</td> <td>91</td>
                </tr>
            
                <tr>
                    <td>李四</td> <td>91</td> <td>75</td> <td>86</td>
                </tr>

                <tr>
                    <td>王五</td> <td>75</td> <td>92</td> <td>80</td>
                </tr>

                <tr>
                    <td>赵老六</td> <td>76</td> <td>65</td> <td>59</td>
                </tr>
            </tbody>

            <tfoot style="background-color:yellow; color: red;">
                <tr>
                    <td>平均分</td> <td>算不来</td> <td>自己算</td> <td>不知道</td>
                </tr>
            </tfoot>
        
        
        </table>

    </body>
</html>

显示效果如图：

在这里插入图片描述

6. 表单 form

表单用于采集用户的输入，以便和服务器进行交互

  • frame : 表单标签，有以下常用属性

    • action：指定提交数据的url

    • method：指定提交的方式，一共7中，常用的是get和post
      get：

      1. 请求参数会在地址栏中显示。封装到请求行中。
      2. 请求参数大小有限制
      3. 不安全

      post

      1. 请求参数不会在地址栏中显示。封装到请求体中。
      2. 请求参数大小无限制
      3. 较为安全

    • enctype：表单中有文件上传时必备该属性，且值为multipart/form-data

  • 表单项元素：

    • 元素类型：文本框，密码框，单选框，多选框，下拉列表，文件域，文本域，日期，按钮，隐藏域等
    • 表单项常用属性：
      • id: 表单项元素的唯一标识，不可重复
      • name：表单项元素的名称，服务器通过该名称获取数据
      • value：表单项元素的值，服务器通过name获取到的值就是value
      • type：表单项元素的类型
      • class：表示样式名称
      • readonly:只读
      • disable:不可用
      • …
<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <h1>一个注册页面</h1>
        <form action="dst.html" method="GET" enctype="multipart/form-data">
            <!--    text：文本框
                label：点击用户名三个字即可输入，不必点击输入框(for属性绑定了text文本框中的id值)         
                placeholder:文本框中显示的提示文字，输入时自动消失
            -->
            <label for="userName">用户名:</label>
                <input type="text" name="userName" id="userName" placeholder="请输入用户名">
                <br>

            <!--    password：密码框            
                required: 必填项，否则提交时会出错
            -->
            密码:
                <input type="password" name="password" id="password" required>
                <br>

            <!--    radio: 单选框
                checked：默认选中，可以直接写一个checked省略值，也可以写成checked="checked"
            -->
            性别:
                <input type="radio" name="sex" id="sex" value="男" checked="checked">男
                <input type="radio" name="sex" id="sex" value="女">女
                <input type="radio" name="sex" id="sex" value="人妖">人妖
                <input type="radio" name="sex" id="sex" value="太监">太监
                <br>
            婚姻状态:
                <input type="radio" name="marrtStatus" value="1" id="">已婚
                <input type="radio" name="marrtStatus" value="0" id=""  checked="checked">未婚
                <br>

            <!--    checkbox：复选框
                checked：默认选中，可以直接写一个checked省略值，也可以写成checked="checked"
            -->
            爱好: 
                <input type="checkbox" name="hobby" value="swim" id="">游泳
                <input type="checkbox" name="hobby" value="tableTennis" id="">乒乓球
                <input type="checkbox" name="hobby" value="reading" id="">看书
                <input type="checkbox" name="hobby" value="moYu" id="">摸鱼
                <br>

            <!--    file: 文件域
                表单中如果有文件上传，form中最好有enctype="multipart/form-data" <form enctype="multipart/form-data"></form>
                multiple: 表示可以同时上传多文件
            -->
                
            头像:
                <input type="file" name="headImg" multiple="multiple" id="">
                <br>

            <!--   日期 html5新特性
                date：表示年月日
                datetime-local:表示年月日+时间
            -->
            生日:
                <input type="date" name="birthday" id="">
                <input type="datetime-local" name="birthday" id="">

            <!--    select: 下拉列表框，name写在select中
                option：选项值
                value: name对应的值
                selected: 表示默认选中
            -->
            家庭住址:
                <select name="省" id="">
                    <option value="江西" selected="selected">江西</option>
                    <option value="江苏">江苏</option>
                    <option value="浙江">浙江</option>
                    <option value="湖北">湖北</option>
                </select>

                <select name="市" id="">
                    <option value="南昌">南昌</option>
                    <option value="杭州">杭州</option>
                </select>
                <br>

            <!--    textarea文本域
                rows：默认多少行
                cols：列数，每一行的字符数
                readonly: 只读
                disable: 不可用，样式会呈现灰色
            -->
            协议:
                <textarea name="" id="" cols="30" rows="10" readonly="readonly" disabled="disabled">
                    协议内容
                    第一行
                    第二行
                    第三行
                </textarea>
                <br>
            
            <!--
                submit: 提交按钮, 将输入的值提交到form中action设置的指定路径
                reset:重置按钮，清空表单的任何输入，回到原始状态
                button:普通按钮，无任何功能
                image:与submit按钮功能类似，value没有值，且多出了一个src="imgPath"
                button可以实现类似的功能，单button没有image类型
            -->
            按钮：
                <input type="submit" name="" value="注册提交按钮" id="">
                <input type="reset" name="" value="重置按钮" id="">
                <input type="button" name="" value="普通按钮" id="">
                <br>
                <input type="image" src="img/cat.png" name="" value="" id="">
                <br>

            Button:
                <button type="submit">提交</Button>
                <button type="reset">重置按钮</Button>
                <button type="button">普通按钮</Button>
                <br>

            <!--    hidden:隐藏域
                页面上看不到任何效果，但程序需要的值
            -->
            隐藏域：
                <input type="hidden" name="test" value="testValue" id="">
        </form>

    </body>

</html>

综合显示效果：
在这里插入图片描述

7. iframe框架

使用iframe可以在同一个页面上显示多个页面，可以把iframe想象成一个空白框，在里面可以引入别的页面，可以是本地的也可以是外部的

<!DOCTYPE html>
<html>
    <body>
        <!--    框架iframe
            src：要显示页面的源地址
            frameborder：框的边界
            width height 框的宽高
        -->
        <iframe name="本地iframe" src="testIframe.html" frameborder="1" width="80%" height="200px"></iframe>
        <iframe name="百度页面" src="https://baidu.com" frameborder="0" width="100%" height="400px"></iframe>
        <iframe name="淘宝页面" src="https://taobao.com" frameborder="1" width="50%" height="200px"></iframe>
        
        <p>
            <!--跳转到"本地iframe"框并将这个页面显示为百度搜索页面-->
            <a href="https://baidu.com" target="本地iframe">跳到百度页面</a>
            <!--跳转到"本地iframe"框并将这个页面显示为淘宝页面-->
            <a href="https://taobao.com" target="本地iframe">跳到淘宝页面</a>
            <!--跳转到"本地iframe"框并将这个页面显示为本地iframe页面-->
            <a href="testIframe.html" target="本地iframe">跳到本地页面</a>
        </p>
    </body>
</html>

8. 常用的布局组合标签

  1. div-ul-li/div-ol-li：常用于导航布局
  2. div-dl-dt-dd:常用于图文混编布局
  3. div-form:常用于表单布局
  4. div-table:常用于局部规则数据展示布局

9. 转义符号

&开头;结尾

&nbsp;	空格
&lt;	<
&gt;	>
&copy;	版权符号©