Html学习

人生不言弃1

已于 2022-08-28 15:17:51 修改

阅读量236

点赞数

分类专栏：前端文章标签： html5 学习前端

于 2022-06-27 22:43:14 首次发布

本文链接：https://blog.csdn.net/weixin_50735831/article/details/125399293

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.web标准的制定

1.W3C万维网联盟（Word wide Web Consortum）

2.Web标准的组成：html,css,js

.结构化标准语言（html,xml）

.表现标准语言(css)

.行为标准语言（js）

二.html学习

1.文档声明与字符编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唐诗三百首</title>
</head>
<body>
    <center>十年生死两茫茫</center>
</body>
</html>

<!DOCTYPE html>：文档声明标签

<html lang="en">：设置网页语言

2.html常用标签

（1）文本标题（h1-h6）

<body>
    <h1>静夜思</h1>
    <h2>李白</h2>
    <h3>窗前明月光</h3>
    <h4>垂死梦中惊坐起</h4>
    <h5>无人只是荔枝来</h5>
    <h6>jj</h6>
</body>

(2)段落标签：p

<p>段落文本内容</p>

标识一个段落（段落与段落之间有间隔）

<p>人有生老三千几</p>

<p>惟有相思不可医</p>

（3）换行标签（br/）

<br/>

强制换行

（4）水平线标签（hr/）

<hr/>

 <p>人有生<br>老三千几</p>
    <hr/>
    <p>惟有相思不可医</p>

（5）加粗标签

<strong>内容</strong>推荐

（6）倾斜标签（em）

(7)加粗并且倾斜

代码实现：

    <p>
        <strong>城南小陌有逢春</strong>
    </p>
    <p>
        <em>之间桃花不见人</em>
    </p>
    <p>
        <strong><em>垂死梦中惊坐起</em></strong>
    </p>

结果图展示：

（8）删除线标签

<del>内容</del>推荐

代码实现：

<p>
        不要<s>998</s> 不要 <del>99</del> 只要9.9
    </p>

结果图：

（9）扩展

<u>文本</u>:文本下划线

<sub></sub>下标

<sup></sup>上标

    <p>
        不要<s>998</s> 不要 <del><u>99</u></del> 只要9.9
    </p>
    
    <p>
       垂死<sub>[1]</sub>梦中惊坐起 
    </p>
    <p>
        梦中<sup>[2]</sup>惊坐起
    </p>
    <p>
        <sub>[1]垂死:</sub>睡觉
    </p>
    <p>
        <sup>[2]梦中：</sup>做梦
    </p>

3.简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度词条</title>
</head>
<body>
    <h1>唐诗三百首</h1>
    <hr>
    <h2>江城子·乙卯正月二十日夜记梦</h2>

   <p>
       <strong>十年生死两茫茫，不思量，自难忘。</strong><br><strong><em>千里孤坟，无处话凄凉。</em></strong><br><u>纵使相逢应不识，尘满面，鬓如霜。</u>
    </p> 
    
    <p>
        <em>夜来幽梦忽还乡，小轩窗，正梳妆。</em><br>相顾无言<sup>[1]</sup>，惟有泪千行<sub>[2]</sub>。<br><del>料得年年肠断处，明月夜，短松冈。</del>
    </p>
</body>
</html>

结果图： 4.hr水平线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--color属性：设置水平线的颜色-->
    <hr color="green" >
    <hr color="red" >
    <hr color="yellow" >
    <!--width属性：设置水平线的像素-->
    <hr color="green" width="600">
    <hr color="green" width="200">
    <!--align属性：设置位置-->
    <hr color="green" width="200" align="left">
    <hr color="green" width="200" align="right">

    <hr>
    <!--noshade取消水平线阴影-->
    <hr noshade>
</body>
</html>

结果示意图：

5.特殊符号

特殊符号	解释
尖角号	&lt:左尖角号 &gt:右尖角号
空格	&emsp:宽度为一个中文字符的宽度，不受中文字体的影响
版权	&copy

6.div和span标签：

div:没有具体含义用来划分页面，独占一行

span:没有实际意义，用于文本独立修饰，内容多宽就占多少位置

7.列表

（1）有序列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--1.ol内只能放置li标签，li内可以放置任意标签
    2.数字可以随意生成
     type:1,a,A,i,I
    start:取值只能是数字-->
    <ol type="a" start="3">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关闭冰箱</li>
    </ol>
</body>
</html>

（2）无序列表

<body>
      <!--1.ul内只能放置li标签，li内可以放置任意标签
          2.默认的是实心圆
          3.type:实心圆disc,circle空心圆，square方框 none没有-->
    <ul type="none">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关闭冰箱</li>
    </ul>
</body>

（3）自定义列表

<dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

8.图片标签的路径

<body>
    <img src="E:\web\img\b+tree.png">
</body>

9.图片标签的属性

<body>
    <!--
        1.width,height:设置图片的宽和高 
        2.title:鼠标悬浮文字提示
        3.alt:图片加载失败文字提示
    -->
    <img src="E:\web\img\b+tree.png" width="200px" height="200px" title="b+树" alt="图片">
</body>

10.超链接标签

作用：实现不同页面的跳转

语法：<a href="路径" title="鼠标悬浮提示" target="规定打开文档位置">内容</a>

Target:规定何处打开文档

（1）默认在当前窗口

（2）target="-blank" 新窗口

<body>
     <!--1.href:要跳转页面的地址
         2.target:规定页面打开的位置-->
     <a href="https://www.baidu.com/?tn=85070231_7_hao_pg">百度</a>
     <a href="https://www.baidu.com/?tn=85070231_7_hao_pg" target="_blank">百度</a>

     <a href="E:\web\无序列表.html">无序列表</a>

     <a href href="https://blog.csdn.net/weixin_50735831?spm=1000.2115.3001.5343">
         <img src="E:\web\img\hadoop.jpg">
     </a>

11.表格

（1）表格标签：

1.table:表格

2.tr:table中的tr数表示表格的行数

3.td:tr中td的数量表示表格的列数

<body>
    <!--1.table:表格
        2.table中的tr数表示表格的行数
        3.tr中td的数量表示表格的列数-->
    <table >
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

(2)表格的属性

width:宽度

height:高度

border:边框

bordercolor:边框颜色

bgcolor:背景颜色

水平对齐：align="left" or "right" or "center"

cellspacing="单元格之间的宽度"

cellpadding="单元格与内容之间的空格"

<body>
    <!--1.table:表格
        2.table中的tr数表示表格的行数
        3.tr中td的数量表示表格的列数-->
    <table width="200px" height="100px" border="1px" bordercolor="red" 
    bgcolor="gree" align="center" cellspacing="0" cellpadding="10px">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

（3）tr属性

高度：height

背景颜色：bgcolor

align="center"or "left" or"right"

valign="top" or "middle" or "bottom"

(4)td属性

宽度：width

高度：height

背景颜色：bgcolor

align="center"or "left" or"right"

valign="top" or "middle" or "bottom"

（5）表格合并

colspan:合并列

rowspan:合并行

<body>
    <table border="1px" width="300px" height="300px" align="center" bordercolor="yellow"
    cellspacing="0px" bgcolor="grey">
        <tr>
            <td>ob</td>
            <td colspan="2"  rowspan="2">上单</td>
            <!--<td>剑姬</td>-->
        </tr>
        <tr>
            <td rowspan="2">中单</td>
           <!--<td colspan="2">亚索</td>--> 
           <!--<td>阿卡丽</td>--> 
        </tr>
      
        <tr>
            <!--<td>盲僧</td>-->
            <td colspan="2">打野</td>
           <!-- <td>剑圣</td>-->
        </tr>
    </table>
</body>

三.表单：

3.1作用：收集用户信息

3.2表单的组成

1.表单域

表单域是一个包含表单元素的区域；

html中<form>标签定义表单域，收集用户信息，<form>会将他表单范围内的元素提交给服务器。

2.表单元素

1.input:输入表单元素

2.select:下拉表单元素

3.textarea:文本域表单元素

（1）<input>表单元素

<input type="属性值"/>

<input/>标签为单标签

type属性设置不同的属性值来控制不同的类型

<input>标签中type常用的属性值

text：单行文本输入框，可以通过正整数的size控制框长度。

password：密码输入框。

radio：单选按钮，同一组的单选按钮必须要有相同的name。

checkbox：复选框，同一组的单选按钮必须要有相同的name。

button：普通按钮，点击触发事件。

submit：提交按钮，每出现一次，一个 Submit 对象就会被创建，将表单提交给后台。

reset：重置按钮，会重置当前表单中全部的内容。

image：图像形式的提交按钮，写法是“”。

hidden：隐藏域，隐藏字段对于用户是不可见的。

file：文件域，用于文件上传。

案例1：文本框和密码框

 <form action="" method="" name="">
       用户名： <input type="text"><br>
       
       密码：   <input type="password">
    </form>

案例2：单选按钮和复选框

 <form action="" method="" name="">
       用户名： <input type="text"><br>

       密码：   <input type="password"><br>

       性别：   男<input type="radio"> 
               女<input type="radio"><br>
       爱好： 吃饭<input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆  <input type="checkbox">
    </form>

3.<input>中的属性

<form action="" method="" name="">
       用户名： <input type="text" name="username"><br>

       密码：   <input type="password" name="username"><br>

       性别：   男<input type="radio" name="sex"> 
               女<input type="radio" name="sex"><br>
       爱好： 吃饭<input type="checkbox" name="like"> 睡觉 <input type="checkbox" name="like"> 
       打豆豆  <input type="checkbox" name="like">
    </form>

name:定义input元素的名称

value:定义input元素的默认值

checked:主要针对与单选按钮和复选框，主要作用一打开页面就可以默认选中某个元素

maxlength:规定输入框的最大长度。

  用户名： <input type="text" name="username" value="请输入用户名"><br>

4.<label>标签

<label>标签为input元素定义标注

<label> 用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点选择到对应的表单元素上，提高用户体验。

语法：

   <label for="sex">男</label>
       <input type="radio" name="sex" id="sex"/>

注意：<label>标签中的for属性和相关元素的id属性相同。

5.<select>表单元素

（1）使用场景：在页面中如果有多个选项让用户选择，并且想要节约页面空间时，使用<select>标签定义下拉列表。

（2）语法：

<form>
        籍贯：<select>
            <option>甘肃</option>
            <option>陕西</option>
            <option>湖南</option>
        </select>
    </form>

注意：在<option>中定义selected="selected",设置当前项为默认选项

6.<textarea>文本域标签

(1)使用场景：

当用户输入内容较多的情况下，使用<textarea>标签，用于定义多行文本输入的控件。

(2)语法：

<textarea cols="5" rows="10">

文本内容

</textarea>

cols:每行中的字符数，rows行数

<form>
    总结：   
    <textarea cols="5" rows="10">

    </textarea>
    </form>

综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案列-注册页面</title>
</head>
<body>
    <h4>青春不常在，抓紧找对象</h4>
    <table width="500px" >

        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label  for="nan"><img src="css\js\img\se02.jpeg" title="图片加载失败"> 男</label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="css\js\img\se02.jpeg" title="图片加载失败">女 </label>
            </td>
        </tr>
   
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2020</option>
                    <option>2021</option>
                    <option>2022</option>        
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <select>
                    <option>请选择日期</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
        </tr>
       
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="上海"> 
            </td>
        </tr>
      
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="北京大同"> 
            </td>
        </tr>
      
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="like">妖娆
                <input type="checkbox" name="like">可爱
                <input type="checkbox" name="like">清纯
                <input type="checkbox" name="like">温柔
            </td>
        </tr>
     
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" id="nan" checked="checked"> <label  for="nan"><img src="css\js\img\se02.jpeg" title="图片加载失败"> 未婚</label>
                <input type="radio" name="marry" id="nv"> <label for="nv"><img src="css\js\img\se02.jpeg" title="图片加载失败">已婚</label>
            </td>
        </tr>
      
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea>

                </textarea>
            </td>
        </tr>
      
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册"> 
            </td>
        </tr>
     
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 我同意注册条款
            </td>
        </tr>
       
        
        <tr>
            <td></td>
            <td>
                <a href="#">立即登录</a>
            </td>
        </tr>
       
        <tr>
            <td></td>
            <td>
               <h5>我保证</h5>
               <ul>
                   <li>曾经沧海难为水</li>
                   <li>除却巫山不是云</li>
               </ul>
            </td>
        </tr>
    </table>
</body>
</html>