HTML基础

最新推荐文章于 2024-11-02 23:32:29 发布

BabyMuu

最新推荐文章于 2024-11-02 23:32:29 发布

阅读量537

点赞数 2

分类专栏：前端文章标签： html 前端 css

-------本文为博主Muu原创,未经博主允许禁止转载, 如有问题,欢迎指正-------

本文链接：https://blog.csdn.net/tenyearsWait/article/details/122022299

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

标签分类

1 
    单标签 <br>
    双标签 <html></html>
2 
    块儿级标签 <div></div> <p></p>  <h1></h1> ~ <h6></h6>
            <ul></ul> <li></li> <table></table> <form action=""></form>
    行内标签 <span></span> <strong></strong> <i></i>
            <em></em> <img src="" alt=""> <input type="text"> <select name="" id=""></select>
        特例: p标签 <p></p>
<html lang="en">
    <head>  <!--head内的标签是不是给用户看的, 而是定义一些配置给浏览器看-->
        <meta charset="UTF-8"> <!-- 设置页面的字符集编码 -->
        <title>Title</title> <!-- 标题 < 13 字, 多了隐藏 -->
        <style>
            h1 {
                color: gray;
            }
        </style> 
        <!-- 👆css代码 -->
        <script src=""> 
            alert(123)
        </script>   
        <!-- 👆 书写js文件 -->
        <link rel="stylesheet" href=""> <!-- 👈 添加外部css代码链接 -->
        <script src="jQuery%20v3.6.0.js"></script>  <!-- 👈 添加外部js代码链接 -->
        <!-- 👇 浏览器搜索的时候 搜索keywords 后面的关键字 就有可能被搜索引擎展示出来给用户 -->
        <meta name="keywords" content="小游戏,4399小游戏,在线小游戏,双人小游戏,小游戏大全,双人小游戏大全">
        <!-- 👇 网页的描述性信息 -->
        <meta name="description" content="4399小游戏大全包含连连看 ,连连看小游戏大全,双人小游戏大全,H5在线小游戏,4399洛克王国,4399赛尔号,4399奥拉星,4399奥比岛,4399弹弹堂,4399单人小游戏,奥比岛小游戏,造梦西游online,造梦无双等最新小游戏。">

    </head>

    <body>  <!--body 内的标签 写什么浏览器就渲染什么, 用户就能看到什么-->
        <h1>i am h1</h1>  <!-- 1-6级标题  --> 
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        <a>超链接</a>
        <b>加粗</b>
        <em>斜体1</em>
        <i>斜体2</i> 
        <u>下划线</u>   
        <s>删除线</s>
        <p>这是一个段落</p>
        <hr> 水平分隔线 <hr>
        <p>这是另一个段落</p>
        <br> 换行
        <img alt="" src=""/>  图片
    </body>
</html>

特殊符号

&nbsp;  空格     	<br>
&amp;   &      	  <br>
1 &gt; 2  大于号   <!-- 1 > 2 --> <br>   
8 &lt; 10 小于号   <!-- 8 < 10 --> <br>
&yen;   ￥       <br>
&copy;  ©       <br>
&reg;   ®商标    <br>
&quot; 斜体 	<br>

常见标签

<html lang="en"></html> <!-- html标签 -->  <!-- 最大的标签 -->
<div></div>   <!-- 块级标签 -->  <!-- 独占一行 -->
<span></span> <!-- 行内标签 -->  <!-- 内容多大就占多大 -->
<img src="https://image.so.com/i?q=%E5%9B%BE%E7%89%87&listsrc=sobox&listsign=8e0b0ab7d87efc29d328adf73e11746d&src=360pic_new" 
     alt="图片加载失败" 
     title="远方">
<!-- 图片标签 img
    参数
        src 图片地址
        alt 图片加载失败后的提示
        title 鼠标悬停在图片上显示的提示
        height 高度 单位: px(可以不加) 仅修改此项的时候, 等纵横比放大
        width 宽度  单位: px(可以不加) 仅修改此项的时候, 等纵横比放大
-->
<a href="http://www.baidu.com" target="_blank" id="toBaidu">打开百度</a>
<!-- a标签 a
    参数
        href 
            1 放url 用户点击就会跳转到该 url 页面
            2 # + 标签的id值 实现 锚点功能
                eg: href="#toBaidu"
        target 
            默认 a 标签是在当前页面完成挑战 _self
            也可以修改为新建页面跳转 _blank

    a标签的锚点功能
        eg: 点击一个文本标题 页面自动跳转到标题对应的内容区域
    
    注意
        当 a 标签指定的网址从来没有被点击过, 那么 a 标签的字体颜色是蓝色
        如果被点击过了 就会变成紫色(浏览器会自动记忆)
-->

列表标签

<!-- 无序列表 ul
    参数:
        type(每一行前面的标识样式): 1 circle (空心圆点) 2 none (不显示) 3 square (方块)
-->
<ul type='square'>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>
<!-- 有序列表 ol
    参数
        type 以什么为序号
        start 从哪个符号开始
-->
<ol type="A" start="4">
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ol>
<!-- 自定义列表 dl
	内容:
		dt 标题
		dd 内容
-->
<dl>
    <dt>标题一</dt>
    <dd>内容一</dd>
    <dt>标题二</dt>
    <dd>内容二</dd>
    <dt>标题三</dt>
    <dd>内容三</dd>
</dl>

表格标签

<table border="10">
    <thead> <!-- 表头 -->
        <tr> <!-- 一个tr就是一行 --> 
            <th>username</th>   <!-- 加粗 -->
            <td>password</td>   <!-- 正常文本 -->
            <td>context</td>
        </tr>
    </thead>
    <tbody> <!-- 表的内容 -->
         <!-- td 参数
                colspan="2"  水平方向占 2 列
                rowspan="2"  垂直方向占 2 行
            -->
        <tr>
            <td>zhangsan</td>
            <td>1</td>
            <td rowspan="2">null</td>
        </tr>
        <tr>
            <td>lisi</td>
            <td>1</td>
        </tr>
        <tr>
        	<td colspan="3">hello world</td>
        </tr>
    </tbody>
</table>

表单标签

在form标签内部书写的获取用户的数据都会被form标签提交到后端
参数
    action: 控制数据提交的后端路径(给哪个服务端提交数据)
        1 什么都不写, 默认想当前页面所在的url提交数据
        2 写全路径 https://www.baidu.com 向百度服务端提交
        3 只写路径后缀 action='/index/'
            自动识别出单签服务端的ip和port拼接到前面
            host:port/index/
    method 控制请求方式
        默认是 get 请求
            也可以携带数据 但是数据是直接破解在URL后面的 
			URL?username=zhangsan&password=123
		   不安全 
		   有大小限制 ≈ 4k
                
        可以修改为 post
            携带的数据放在请求体里面
    enctype 控制数据的编码方式
        默认是urlencoded 只能发送普通文本 不能发送文件
            如果想要发送文件 必须改为  form data

    发送文件必须要更改的两个参数
        method="POST"
        enctype="multipart/form-data"

input 标签

参数
    type 文本框格式
    name key
    value value
    id 身份证
    placeholder  提示信息(该栏应该填写什么信息)
    hidden 隐藏(不显示于窗口, 但是存在)
    required 必须不为空才能提交
    pattern 正则表达式, 输入必须符合正则表达式
    readonly disable
        disabled设为true，则该表单输入项不能获取焦点，
            用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效
            当提交表单时，这个表单输入项将不会被提交。
        readonly设为true, 只是针对文本输入框这类可以输入文本的输入项，
            用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且
            在提交表单的时候，该输入项会作为form的一项提交。

ps: 如果给获取用户输入的标签加了 value值 就类似于默认值
    <input type="text" name="username" value="张三" id="d1" >
type 类型
    text        普通文本
    password    展示密文
    date        日期
    radio       单选
        默认选择可以用 checked
    checkbox    多选
        默认选择可以用 checked
    file        文件
        了解: 可以加 multiple 支持传输多个文件
    submit      触发 form 表单提交动作
    button      什么功能都没有 就是个普通的按钮(可以扩展, 很有用)
    reset       重置
    email 	邮箱 简单验证一些格式 注:如果为空不会提示任何信息 
    url 	网址的url 提交表单的时候会自动验证url值 需要写完全的URL不能省略协议
    number   数字
		value 默认值
		step  步长
		max   最大值
		min   最小值
    range 范围 进度条
		value 
		step
		max
		min

select标签

下拉框 默认为单选, 可以加 multiple 成多选

一个个下拉框选项是一个个的 option 标签
option 标签 中 默认选择用 select

<select name="province">
    <optgroup label="beijing">  <!-- 子选项 -->
        <option value="chaoyang">chaoyang</option>
        <option value="tam">tam</option>
    </optgroup>
    <option value="shanghai" selected>shanghai</option> <!-- 参数 selected 指定默认选择 -->
    <option value="shenzhen">shenzhen</option>
</select>

label 标签

给input加上相当于注释信息 不写其实也没有任何关系
    input 写在 lable 里面
    label 的 for 关联 input 的 id 可以不嵌套
可以提升用户体验度
	例: <label for="d1">
            username: <input type="text" name="username" value="请输入用户名" id="d1" >
        </label>
	如果点击 username: 也可以聚焦到

textarea标签

<!-- 获取大段文本内容 -->
获取用户数据的标签都应该有 name 属性
    因为需要给后端发送数据并且需要标明数据到底表示什么
    name   ---> 字典的key
    value  ---> 字典的value(用户数据)

需要用户选择的的标签, 需要自己加上value值
    radio
        <input type="radio" name="gender" value="male" checked> 男
    checkbox
        <input type="checkbox" name="hobbies" value="sing"> sing
    option
        <option value="shanghai" selected>shanghai</option>

Html5新增的常用语义化标签

	<header>  <!--头部: 让浏览器更好的识别,解析-->
        <nav></nav> <!-- 导航 菜单 -->
        <footer></footer>   <!--脚注-->
    </header> 
    <section id="v1"> <!-- 相当于 div -->
        <video src="" controls >视频</video>
        <!--
            src 视频源
            controls 控制器
            poster 封面图片
        -->
    </section>
    <section id="v2">
        <audio src="" controls></audio> <!-- 音频 -->
        <!--
            具体属性与视频类似
        -->
    </section>

触发 form 表单提交数据的两种方式

type=submit
button 按钮

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>regedit</h1>
<form action="http://127.0.0.1:5000/upload" method="POST" enctype="multipart/form-data">
    <p>
        <label for="d1">
            username: <input type="text" name="username" value="请输入用户名" id="d1" >
        </label>
    </p>
    <p> password:
    <!-- 密码格式, 用户输入的字符会被隐藏显示 -->
        <input type="password" name="password" id="d2">
    </p>
    <p> birthday:
    <!-- 日期格式 用户可以点击选择生日 -->
        <input type="date" name="birthday">
    </p>
    <p>
        <input type="radio" name="gender" value="male" checked> 男
        <input type="radio" name="gender" value="female"> 女
        <!-- radio  单选
            当标签的属性名和属性值一样时候可以简写
            非简写方式
                <input type="radio" name="gender" id="" checked="checked"> 男
        -->
    </p>
    <p> hobby:
        <!-- 复选框 -->
        <input type="checkbox" name="hobbies" value="sing"> sing
        <input type="checkbox" name="hobbies" value="swim" checked > swim
        <input type="checkbox" name="hobbies" value="game">game
    </p>
    <p>
        province:
        <select name="province">
            <optgroup label="beijing">  <!-- 子选项 -->
                <option value="chaoyang">chaoyang</option>
                <option value="tam">tam</option>
            </optgroup>
            <option value="shanghai" selected>shanghai</option> <!-- 参数 selected 指定默认选择 -->
            <option value="shenzhen">shenzhen</option>
        </select>
    </p>

    <p>favorite movies: <!-- 参数 multiple 多选 -->
        <select multiple name="favoriteMovies">
            <option value="fuchouzhe">fuchouzhe</option>
            <option value="tomorrow">tomorrow</option>
        </select>
    </p>
 <p>上传文件: <!-- 可以上传一个或多个 -->
        <input type="file" name="pic" multiple>
        <!-- 服务端要接受文件 form的参数要求
            multiple: 上传多个文件
                如果不加 只能上传一个图片
            method="POST"
            enctype="multipart/form-data"
        -->
    </p>
        <p>自我介绍:
        <textarea name="" cols="30" rows="10" style="resize: none"></textarea>
        <!-- 获取大段文本 
        resize: none
            设置为不可更改大小
            防止用户随意拖拽 影响整体布局
        -->
    </p>

    <input type="submit" value="regedit" name="">
    <!--
        <button>点我</button> 👈 与 👆 功能大致相同
        提交表单
     -->
    <input type="button" value="just a button" name="">
    <input type="reset" value="reset">
</form>
</body>

</html>