JavaScript —— HTML基础常识

最新推荐文章于 2023-04-16 23:01:23 发布

奇妙的代码

最新推荐文章于 2023-04-16 23:01:23 发布

阅读量223

点赞数

分类专栏： # HTML+CSS # JavaScript 文章标签： html

本文为博主原创文章，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/marvelousness/article/details/119910743

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML+CSS

3 篇文章 0 订阅

订阅专栏

HTML文档

2.1. HTML文档基础

元素

HTML 文档由 HTML 元素定义，很多时候我们也会称之为 HTML 标签，语法如下：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

示例：标题元素

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

示例：段落元素

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

示例：文本格式化元素

<b>加粗</b>
<i>倾斜</i>
<sub>下标</sub>
<sup>上标</sup>

示例：链接元素

<a href="https://www.baidu.com">百度一下，你就知道</a>

示例：简单的HTML文档

HTML 文档由相互嵌套的 HTML 元素构成。示例如下：

<!DOCTYPE HTML>
<html lang="ch">
    <head>
        <meta charset="UTF-8" />
        <title>HTML文档</title>
    </head>
    <body>
        <p>这是第一个段落。</p>
        <!-- 这是 HTML 注释 -->
    </body>
</html>

示例：图像元素

<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度一下，你就知道"/>

示例：表格元素

<table>
    <thead>
        <tr>
            <th>Name</th><th>Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Timor</td><td>man</td>
        </tr>
        <tr>
            <td>Gina</td><td>woman</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td><td></td>
        </tr> 
    </tfoot>
</table>

示例：列表元素

<ul>
    <li>无序列表 - 苹果</li>
    <li>无序列表 - 香蕉</li>
</ul>

<ol>
    <li>有序列表 - 苹果</li>
    <li>有序列表 - 香蕉</li>
</ol>

示例：区块元素

<div>我是块级元素，在显示的时候，往往独占一行。</div>
<span>我是内联元素，在显示的时候，往往在行内显示，也被称之为行内元素</span>

示例：表单元素

简单数据表单

<form method="post" enctype="application/x-www-form-urlencoded" action="http://localhost:9090/co/test/form">
    <p><label>账号：<input type="text" name="username" /></label></p>
    <p><label>密码：<input type="password" name="password" /></label></p>
    <p>
        <span>性别：</span>
        <label><input type="radio" value="boy" name="gender" /><span>男</span></label>
        <label><input type="radio" value="girl" name="gender" /><span>女</span></label>
    </p>
    <p>
        <span>技能：</span>
        <label><input type="checkbox" name="skills" value="js" /><span>JavaScript</span></label>
        <label><input type="checkbox" name="skills" value="css" /><span>CSS</span></label>
    </p>
    <p>
        <label>
            <span>爱好：</span>
            <select name="hobby">
                <option>看书</option>
                <option>写作</option>
            </select>
        </label>
    </p>
    <p>
        <label>
            <span>备注：</span>
            <textarea name="comment" rows="3" cols="8"></textarea>
        </label>
    </p>
    <p>
        <input type="hidden" name="id" value="20200101" />
        <button type="submit">提交</button>
    </p>
</form>

文件上传表单

<form method="post" enctype="multipart/form-data" action="http://localhost:9090/co/test/upload">
    <p><label><input type="file" name="file" /></label></p>
    <p><button type="submit">提交</button></p>
</form>

示例：框架元素

parent.html

<h1>父级网页</h1>
<iframe src="inner-1.html"></iframe>
<iframe src="inner-2.html"></iframe>
<script>console.log("Hello parent");</script>

inner-1.html

<h1>内嵌的第一个网页</h1>
<script>console.log("Hello inner-1");</script>

inner-2.html

<h1>内嵌的第二个网页</h1>
<script>console.log("Hello inner-2");</script>

示例：脚本元素
js 脚本需要编写在 script 标签内

<script>console.log("Hello world!");</script>

示例：样式元素
css 脚本需要编写在 style 标签内

<style>body {font-size: 12px}</style>

示例：媒体元素

音频元素

<audio controls autoplay>
    <source src="vincent.mp3" type="audio/mpeg">
</audio>

视频元素

<video controls="controls" autoplay="autoplay">
    <source src="wuhan.mp4" type="video/mp4" />
</video>

HTML 实体元素

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

HTML 消息

状态码	描述	释义
200	OK	请求成功（这是对HTTP请求成功的标准应答。）
302	Found	所请求的页面已经临时转移至新的 URL 。
400	Bad Request	因为语法错误，服务器未能理解请求。
401	Unauthorized	合法请求，但对被请求页面的访问被禁止。因为被请求的页面需要身份验证，客户端没有提供或者身份验证失败。
403	Forbidden	合法请求，但对被请求页面的访问被禁止。
404	Not Found	服务器无法找到被请求的页面。
405	Method Not Allowed	请求中指定的方法不被允许。
406	Not Acceptable	服务器生成的响应无法被客户端所接受。
500	Internal Server Error	请求未完成。服务器遇到不可预知的情况。
502	Bad Gateway	请求未完成。服务器充当网关或者代理的角色时，从上游服务器收到一个无效的响应。
503	Service Unavailable	服务器当前不可用（过载或者当机）。
504	Gateway Timeout	网关超时。服务器充当网关或者代理的角色时，未能从上游服务器收到一个及时的响应。