HTML学习

HLXchamp

已于 2023-02-16 17:57:58 修改

阅读量247

点赞数

分类专栏： Html 文章标签： html

于 2021-08-07 10:47:40 首次发布

本文链接：https://blog.csdn.net/HLXchamp/article/details/119480662

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML：超文本标记语言
Hyper Text Markup Language

HTML5的新增功能：

W3C：万维网联盟

W3C标准：

结构化标记语言（HTML，XML）
表现标记语言（CSS）
行为标准（DOM）

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!-- meta：描述性标签，用来描述我们网站的一些信息-->

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

简单的一个实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

在这里插入图片描述
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

标题标签：<h1> - <h6>
段落标签 ：<p>
注意：浏览器会自动地在段落的前后添加空行。
换行标签：<br/>
水平线标签：<hr/>
字体样式标签：
粗体：<strong> 斜体：<em>
特殊符号：
空格：  其他的：<& ;>

图像标签： <img>

../：上一级目录

<img src="/images/logo.png" alt="logo图像" title="悬停文字" width="258" height="39" />

src：图片地址，alt：图片名字；这两个必填

链接标签：<a>
href：必填，表示跳转到哪个页面
target：表示窗口在哪里打开
_blank：在新标签中打开
_self：在自己的网页中打开（是默认的）

锚链接：

需要一个锚标记
跳转到标记
用#标记

<a name="top" >顶部</a>
<a href="#top">跳转</a>

功能性链接：
邮件链接：mailto
QQ链接：搜QQ推广

HTML 使用标签 <b>与 <i>对输出的文本进行粗体or 斜体格式。
还有<big> <small> <sub> <sup>。

行内元素和块元素

块元素：无论内容多少，该元素独占一行（p、h1-h6…）
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（strong、em）

列表

无序列表：

<ul>
    <li>ss</li>
    <li>gg</li>
</ul>

有序列表：

<ol>
    <li>ss</li>
    <li>gg</li>
</ol>

自定列表：

<dl>
    <dt>学科</dt>  
    
    <dd>Java</dd>
    <dd>语文</dd>
    <dd>英语</dd>
    <dd>数学</dd>
</dl>

dt：列表名称
dd：列表内容

表格

tr表示行，td表示列

<table border="1px">
    <tr>
        <!--colspan 跨列合并-->
        <td colspan="4">1</td>
    </tr>
    <tr>
        <!--rowspan 跨行合并-->
        <td rowspan="2">2</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

在这里插入图片描述
嵌套关系：table>tr>td

合并原则：上下合并保留上，左右合并保留左

表格大标题：用caption标签
表头单元格：将td标签替换成th标签，会将内容加粗
在这里插入图片描述

音频与视频

<audio src="../resourses/1.mp3" controls autoplay></audio>
<video src="../resourses/2.mp4" controls autoplay></video>

controls：表示可以控制
autoplay：自动播放（谷歌浏览器不允许自动播放音频，视频必须搭配表示静音的muted标签才能自动播放）

页面结构分析

在这里插入图片描述

iframe内联框架

在这里插入图片描述
可以直接进入指定的网站：

<iframe src="https://www.bilibili.com" frameborder="0" height="1300px" width="1300px"></iframe>

可以嵌套跳转：

<iframe src="" name="hello" frameborder="0" height="1300px" width="1300px"></iframe>
<a href="https://www.bilibili.com" target="hello">点击跳转</a>

target和name里面是互相对应的

表单语法

在这里插入图片描述
action：表单提交的位置，可以是网站，也可以是一个请求地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post方式提交：比较安全，可以传输大文件
所有表单数据都需要name属性

<form action="第二个.html" method="post">
    <p> 名字：<input type="text" name="username"> </p>
    <p> 密码：<input type="password" name="pwd"> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

在这里插入图片描述

placeholder：表示提示信息

radio：单选框标签，必须要有value和name

<p>
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex" checked>女
</p>

两个name相同，就只有选一个（男/女）。
checked：表示默认选中
在这里插入图片描述
checkbox：多选框标签

<p>
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="music" name="hobby">音乐
    <input type="checkbox" value="movie" name="hobby" checked>电影
</p>

checked：表示默认选中
在这里插入图片描述

button：按钮标签

<p>
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="../resourses/3.jpg">
</p>

这样点击图片也能跳转
button也可以自己作为标签：

<button type="submit">点击</button>

下拉框&列表框

<p>国家：
   <select name="列表名称">
       <option value="us">美国</option>
       <option value="jp">日本</option>
       <option value="china" selected>中国</option>
       <option value="fr">法国</option>
   </select>
</p>

selected：表示默认选择
在这里插入图片描述
文本域：

<p>反馈：
    <textarea name="textarea" cols="10" rows="3">文本内容</textarea>
</p>

cols：行
rows：列
在这里插入图片描述
文件域：

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

在这里插入图片描述
同时上传多个文件：加一个multiple标签

简单验证：

<!--邮件验证-->
<p>邮箱：
    <input type="email" name="email">
</p>

<!--url验证-->
<p>URL：
    <input type="url" name="url">
</p>

<!--数字-->
<p>商品数量：
    <input type="number" name="num" max="20" min="0" step="1">
</p>

<!--滑块-->
<p>音量：
    <input type="range" name="voice" min="0" max="100" step="10">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

表单的应用

readonly：只读
disabled：禁用
hidden：隐藏

label标签：

<!--增强鼠标可用性-->
<p>
    <label for="mark">点我试试</label>
    <input type="text" id="mark">
</p>

点击文字就能跳转到输入框里

表单初级验证

placeholder：提示信息
required：非空判断
pattern：正则表达式

没有语义的标签

div标签：要换行
span标签：在同一行显示

有语义的标签（手机端）

请添加图片描述

练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世纪佳缘-你在我也在</title>
</head>
<body>

<h3>青春不常在，抓紧谈恋爱</h3>
<table width="500">
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" value="boy" id="nan"><label for="nan"><img src="">男</label>
            <input type="radio" name="sex" value="girl" id="nv"><label for="nv"><img src="">女</label>
        </td>
    </tr>
    <tr>
        <td>生日</td>
        <td>
            <select>
                <option>--请选择年份--</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
            </select>
            <select>
                <option>--请选择月份--</option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
            </select>
            <select>
                <option>--请选择日--</option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>所在地区</td>
        <td>
            <input type="text" value="北京">
        </td>
    </tr>
    <tr>
        <td>婚姻状况</td>
        <td>
            <input type="radio" name="marry" value="yihun">已婚
            <input type="radio" name="marry" value="weihun" checked>未婚
            <input type="radio" name="marry" value="lihun">离婚
        </td>
    </tr>
    <tr>
        <td>学历</td>
        <td>
            <input type="text" value="学士">
        </td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" value="a" name="love" checked>a
            <input type="checkbox" value="b" name="love">b
            <input type="checkbox" value="c" name="love">c
            <input type="checkbox" value="d" name="love">d
            <input type="checkbox" value="e" name="love">e
        </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>我同意注册条款和会员加入标准
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a href="#">我同意注册条款和会员加入标准</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <h3>我承诺</h3>
            <ul>
                <li>第一点</li>
                <li>第二点</li>
                <li>第三点</li>
            </ul>
        </td>
    </tr>
</table>

</body>
</html>