HTML 5 基础

最新推荐文章于 2024-07-31 18:12:12 发布

CourserLi

最新推荐文章于 2024-07-31 18:12:12 发布

阅读量3.2k

点赞数 1

分类专栏： HTML 5/CSS 3/ JS 文章标签： html5

本文链接：https://blog.csdn.net/CourserLi/article/details/104889606

版权

HTML 5/CSS 3/ JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本博客所讲解 HTML 的版本为 HTML 5 ，并严格遵循该版本规则

1、文档声明

<!DOCTYPE html>

文档声明必须位于 HTML 5 文档中的第一行，该标签不属于 HTML 标签，用于告知浏览器文档所使用的 HTML 规范

2、格式

<!DOCTYPE html>
<html>
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>

HTML 5 必需按照如上的格式进行编写，任何一个标签都不能缺少！
其中：
title 在标签页显示，作为标签名
head 仅是改变网页样式的工具，不显示在网页内容
body 用于显示网页内容

3、注释（允许跨行注释）

<!--注释内容-->

    or

<!--注释内容
注释内容
注释内容-->

4、块级元素与行内元素

块级元素 总是在新的行上开始
块级元素 可包含 块级元素 和 行内元素
行内元素 不会另起一行
行内元素 只能包含 行内元素

举例：p是块级元素，span是行内元素，在网页上写入如下源代码

<p>测试案例1</p>
<p>测试案例1</p>
<br/>  <!--作用是换行的标签，也属于行内元素-->
<span>测试案例2</span>
<span>测试案例2</span>
<br/>
<p>测试案例3<span>测试案例3</span></p>

网页结果如下：

测试案例1

测试案例1


测试案例2 测试案例2 <!--注意中间有空格哦-->
测试案例3测试案例3

5、meta 元素（必须位于 <head> 标签内部）（空标签）

指定网页编码，防止乱码出现（一般都加上）
<meta charset="UTF-8">

为搜索引擎提供关键词，便于搜索
<meta name="keywords" content="courserli,blog,HTML5">
类似还有 描述网页内容、定义网页的作者...

设置网页尺寸自适应
<meta name="viewport" content="width=device-width, initial-scale=1.0">

每 5 秒刷新一下浏览器并跳转到指定页面
<meta http-equiv="refresh" content="5;https://blog.csdn.net/CourserLi">

6、img 元素（插入图片）（空标签）

<img alt="小猫" src="D:\cat.jpg" width="256px" height="256px">

<img> 标签有两个必需的属性：alt 属性 和 src 属性
alt 属性用于当图片无法显示时，显示的替代文本
src 属性用于插入图片
而 width 属性 和 height 属性 用于指定图片的宽度和高度（单位：像素）

7、style 元素（定义样式信息）

<style type="text/css">
    h1 {color:#FF0000;}  <!--所有 h1 标题改为红色-->
    p {color:#0000FF;}  <!--所有段落改成蓝色-->
    body {background-color:#FFEFD6;}  <!--网页背景改成米色-->
</style>

type 属性只有 "text/css" 的值，所以此标签的写法一般是固定的
作用是改变标签内指定样式的类型

<style media="screen and (min-width:512px) and (max-width:1024px)">
	body{background-image: url("D:/background.jpg");}
</style>

media 属性其中的一个值 "screen", 作用是指定样式适用的媒体
在上述示例中，作用是当网页宽度在 512px 与 1024px 中背景会替换成 style 标签内的图片

8、link 元素（指定外部资源）(空标签)

<link rel="stylesheet" type="text/css" href="D:/style.css" >
<!--使用外部链接（相当于补丁）-->
<!--链接.css文档中只包括 h1 {color:#FF0000;} 类似的信息-->

<link rel="icon" type="image/x-icon" href="D:/pic.ico" >
<!--替换标签页图标-->

rel 属性是必加的，用于指定文档与被链接资源之间的关系
type 属性，规定被链接文档的 MIME 类型（一般都加上）
href 属性，指定被链接资源的 URL（一般也都加上）
其他常用属性还有 media...

9、a 元素（超链接）

<p>Courser Li <a href="https://blog.csdn.net/CourserLi" target="_blank">传送门</a></p>

注意 <a> 不是空标签，且两个标签的位置顺序不能变
target 属性的 "_blank" 值，作用是在新的网页打开链接
href 属性已讲

10、显示源代码

若想显示在网页上显示 < 号或 > 号，不能直接写入，因为浏览器会误以为是标签
应该用字符实体代替符号，如用 &#34; 代替 < 号，用 &#62; 代替 > 号
下面演示一下：

<pre>  <!--作用是预处理的标签，能够使网页显示内容与源代码一样，保留空格和换行符-->
<code>  <!--作用是增强代码可读性的标签，在网页显示源代码时使用-->
&#60;p&#62;一个代码段落&#60;/p&#62;
</code>
</pre>

网页结果如下：

<p>一个代码段落</p>

11、序列

ol 元素用于定义有序列表
ul 元素用于定义无序列表
li 元素用于定义列表中的项目

下面演示一下：
<ol>
<li>一号</li>
<li>二号</li>
</ol>
<br/>
<ul>
<li>三号</li>
<li>四号</li>
</ul>
<br/>
<ul>
<li>五号</li>
	<ul>
	<li>六号</li>  <!--嵌套序列-->
	</ul>
</ul>

网页结果如下：
1.一号
2.二号

· 三号
· 四号

· 五号
	· 六号

12、表格

table 元素用于表格的生成
tr 元素用于表格的列数
th 元素用于表格的行数

下面演示一下：
<table>
    <tr>
        <th>Name</th>  <!--表格第一行字体自动加粗-->
        <th>Job</th>
    </tr>
    <tr>
        <td>Courser Li</td>
        <td>Student</td>
    </tr>
</table>

网页结果如下：

  Name		 Job
Courser Li	Student

网页显示表格无边框，若想要加则要添加 style 元素

13、表单

form 元素用于为用户输入创建 HTML 表单
action 属性用于当用户提交表单时向何处发送表单数据（值为 URL）
method 属性用于规定发送 HTTP 方法，隐藏用 "post"，显示用 "get"

input 元素用于搜集用户信息
type 属性用于规定 input 元素的类型，值为 "text" 显示输入文本，值为 "password" 不显示
name 属性用于指定元素的名称（以便在 PHP 中引用元素）

button 元素用于定义一个按钮
type 属性用于指定按钮的类型
name 属性用于指定按钮的名称

下面演示一下：
<form action="D:/welcome.php" method="post">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password"> <br/>
    <button type="submit">提交</button>
</form>

（HTTP 引擎、网页内容）结果如下：
在这里插入图片描述

14、架构

div 元素用于 HTML 文档中分隔一个区块
class 属性用于指向样式表中的类

下面演示一下：
<style type="text/css">
    h1.intro{color:blue;}
    p.important{color:green;}
</style>

<div>
<h1 class="intro">蓝色</h1>
<p class="important">绿色</p>
</div>

网页结果如下：

蓝色  <!--蓝色的标题-->
绿色  <!--绿色的段落-->

15、video 元素（插入视频）

src 属性用于指定播放视频的 URL 地址
width height 属性用于调节视频长宽
poster 属性用于提供视频封面
controls 属性用于向用户提供控件，如播放、暂停按钮

下面演示一下：
<video src="D:\www.mp4" width="960" height="540" poster="D:\cat.jpg" controls >
抱歉，本视频因浏览器原因播放不了</video>
<!--文字是当视频无法显示时出现的-->

16、iframe 元素（内嵌网页）

src 属性用于指定内嵌网页的 URL 地址
width height 属性用于调节内嵌网页长宽（值为 px）

下面演示一下：
<iframe src="https://blog.csdn.net/CourserLi" width="1024px" height="800px">
抱歉，内嵌网页因浏览器原因显示不了</iframe>
<!--文字是当内嵌网页无法显示时出现的-->