HTML5

最新推荐文章于 2024-06-07 13:44:05 发布

你的pizza到了

最新推荐文章于 2024-06-07 13:44:05 发布

阅读量172

点赞数 1

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/qq_38353993/article/details/83029222

一 HTML概述【了解】

1.1 什么是HTML

Hyper Text Markup Language 超文本标记语言

简单来说它就是制作网页的一门技术

超文本：具备普通文本的特性，同时还可以加入视频、图片、超链接等等；类比人与超人

标记语言：使用预定义好的标签来描述文本，交给浏览器解析完成超文本的效果

HTML5

它是万维网在2014年10月底发布一套规范，移动端与PC端无缝对接展示

编写更少的代码，展示更丰富的内容例如：

1.2 使用记事本编写html

<html>
	<head>
		<!--当前页面的主要描述信息-->
		<meta charset="utf-8"/>
		<title>我是页面的标题</title>
	</head>
	<body>
		<!--页面的展示内容-->
		你好
	</body>
</html>

1.3 使用第三方工具编写html

itellij idea（webstorm）、Dreamweaver、hbuilder

1.4 html书写规范

html文件扩展名为：html 或 htm 【系统历史问题 83格式】
双标签：<开始>内容</结束>
单标签：<开始/>
html语法不严谨，不区分大小写，建议小写
标签内可以添加属性：属性名=“属性值” 单引号双引号都可以
标签之间可以嵌套，但要正确嵌套

二 HTML标签【重点】

2.1 文本标签

标签介绍

<!--
    1）标题
    <hn></hn>
        n：1~6 数值越大，字体越小
        常见属性：
            align：对齐方式
                取值：left 左侧（默认）、center 中间、right 右侧  在html5中已经作废   推荐使用css样式
    2）字体
    <font></font> 在html5中已经作废  ---- span
        常见属性：
            size：大小
                取值：1~7 数值越大，字体越大 3（默认）
            color：颜色
                方式一：英文单词
                方式二【推荐】：光三原色，红(0~255)绿(0~255)蓝(0~255)；使用十六进制数 #12 34 5f
            face：类型
                取值：宋体、楷体、隶书等等
    3）粗体
    <b></b> bold
    4）斜体
    <i></i> italic
    5）换行
    <br/>
    6）水平线
    <hr/>
        常用属性：
            color：颜色
            size：大小 没有限制的
            width：宽度
                方式一：像素 px（默认）
                方式二：百分比 % （随着当前浏览器窗口大小进行缩放）
           align：对齐方式
                   取值：center（默认）
    7）段落
        <p></p>
            常用属性：
                align：对齐方式

-->

2.2 超链接标签

<!--
    超链接
    <a></a>
        常用属性：
            href：跳转到新页面
                相对路径（网站内部跳转）
                    ./ 当前目录 省略不写
                    ../ 上级目录
                绝对路径（网站外部跳转）
                    http://www.itcast.cn
                mailto:发送邮件的
                subject：邮件主题
                body：邮件内容
            target：打开方式
                取值：_self自身页面跳转（默认）、_blank 打开新页面
             title：鼠标上移显示标题

-->

2.3 列表标签

<!--
    列表
        有序列表
        <ol></ol>
            常用属性：
                type：排序类型
                    取值：1（默认） i I（罗马字符） a A
        无序列表
        <ul></ul>
            常用属性：
                type：显示类型
                    取值：disc 实心圆（默认）、circle 空心圆、square 实心方块
        共同子标签
        <li></li>
-->

2.4 图像标签

<!--
    img table 快捷键
    图像
    <img/>
        常用属性：
            src：图像文件地址
                相对路径（内部图片）
                绝对路径（百度图片）
            alt：图片丢失时显示的问题
            width：宽度 注意：我们在设置宽度时，高度会自动缩放（纵横比）
            height：高度
            title:鼠标上移显示的标题
-->

2.5 块级标签和内联标签

<!--
    html标签分为二大类
        块级标签
            特性：独自占用一行
            例如：h3  div 语义化标签 段落 列表
        内联标签（行内标签）
            特性：内容有多少占用多少，在一行内显示
            例如：font span img 超链接
       预习：所有标签都有共同的属性 style用来设置 css样式
       style="background-color: orange" 设置标签的背景色
-->

2.6 表格标签

标签介绍

<!--
    表格
    <table></table>
        常用属性：
            border：边框
            width：宽度
            height：高度
            align：对齐方式
                left（默认）
            cellspacing： 单元格和单元的间距，一般我们设置为0
            cellpadding：单元格和内容的间距，一般我们设置为0
    行
    <tr></tr>
        常用属性：
            align：内容对齐方式
            bgColor:背景颜色
    单元格
    <td></td>
        常用属性：
            rowspan：行的合并
            colspan：列的合并
    <th></th> 列标题 特点：（粗体、居中）
    表格标题
    <caption></caption>

    语义化标签
    <thead></thead> 头部
    <tbody></tbody> 身体
    <tfoot></tfoot> 尾部
-->

2.7 实体字符

在页面展示一些特殊符号；例如：空格、版权、人民币、小于号、大于号

<body>
空格：&nbsp;<br>
版权：&copy; <br>
人民币：&yen; $<br>
超链接：&lt;a&gt;&lt;/a&gt;
</body>

在这里插入图片描述

三拓展

3.1 audio 音频标签

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
<!--HTML5中出现的新内容，旧浏览器不能使用，将会显示文字-->

属性值：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

3.2 video 视频标签

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

属性值：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

3.3 常用语义化标签

语义化标签	作用
<header>	用于网页的页眉，页眉通常用于设置网站标志、主导航、全站链接以及搜索框。
<nav>	用于页面的导航，仅对文档中重要的链接群使用。
<main>	页面主要内容，一个页面只能使用一次。
<section>	具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
<footer>	用于网页的页脚，只有当父级是body时，才是整个页面的页脚。