提示:原网页已由神马搜索转码, 内容由developer.aliyun.com提供.

尚硅谷html5+css3（1）html相关知识

<!-- 文档声明:doctype        -告诉浏览器当前网页版本        -html5的文档声明（不区分大小写）        <!doctype html>    --><!doctype html><html> <head>    <title>        网页的基本结构    </title> </head><body></body></html>

6.字符集：使用万国码：UTF-8

<!doctype html><html><head>    <!--通过meta标签设置网页字符集，避免乱码-->    <meta charset="utf-8">    <title>        网页的基本结构    </title></head></html>

7.语义化标签（1）

①标题标签：h1~h6共6级标签

从h1到h6重要性递减

h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1

一般用h1~h3

②块元素：在页面中独占一行的元素称为块元素（例如h1）

③p标签：表示页面中的一个段落

③hgroup：为标题分组，可以将一组相关的标题同时放入hgroup

④em：语音语调（使字体倾斜）

⑥blockquote：引用，缩进+独占一行

⑦q：短引用，为文字加双引号

⑧br：换行

8.结构化语义标签（2）(前8个了解即可，主要使用div)

①header:网页头部

②main:网页主体（一个页面只有一个main）

③footer:网页底部

④nav:网页导航

⑤aside:和主体相关的其他内容

⑥article:表示一个独立的文章

⑦section:表示一个独立区块，上面的标签都不能表示时使用section

⑧span:行内元素，没有语义，一般用于在网页中选中文字

⑨div:没有语义，只用来表示一个区块，主要使用div来布局元素

9.块和行内

块元素(block element):在网页中一般通过块元素对页面进行布局

行内元素(inline element):包裹文字

一般在块元素中嵌套行内元素（例:<h1><em>iii</em><h1/>）

p元素中不能放任何块元素

浏览器在解析网页时，会对网页中不符合规范的内容进行修正

10.列表list

在html中创建列表：（可以嵌套）

1.无序列表：ul标签：li表示列表项

   <ul>        <li>列表1</li>        <li>列表2</li>        <li>列表3</li>    </ul>

2.有序列表：ol标签：li表示列表项

    <ol>        <li>列表1</li>        <li>列表2</li>        <li>列表3</li>    </ol>

3.定义列表：dl标签：dt表示定义的内容，dd对内容进行解释说明（交互菜单）

    <dl>        <dt>dt</dt>        <dd>dd1</dd>        <dd>dd2</dd>    </dl>

11.超链接

使用a标签定义超链接。超链接也是一个行内元素，在其中可以嵌套除a以外的任何元素

属性:href:指定跳转的目标路径

<a href="https://www.baidu.com/">baidu</a>

12.相对路径

.或..开头：./ ../ ./可以省略不写

./当前文件所在目录

../上一级文件目录

13.超链接

(1)新建页面

target属性，用来指定超链接打开的位置

_self默认值，在当前页面打开超链接

_blank在一个新的页面打开超链接

<a href="https://www.baidu.com/" target="_blank">baidu</a>

(2)回到顶部

将超链接的href属性设置为#，这样点击超链接后页面不会跳转，而是转到当前页面的顶部

<a href="#">回到顶部</a>

(3)跳转到任意地方:

使用id，给每个标签设置id属性（唯一标识）

href设为"#"+"id"

    <a href="#bottom">去底部</a>    <a id="bottom" href="#">--底部--</a>

 <a href="javascript:;">什么也不会发生</a>

14.图片标签

（1）img标签引入图片，它是一个自结束标签

属性：src 外部图片路径

img这种元素属于替换元素（被图片替换）

（2）alt，图片的描述，默认情况下不显示，在浏览器无法加载图片时显示

搜索引擎会根据alt中的内容识别图片（如果不写alt则不能被搜索引擎搜到）

（3）width图片宽度 height图片高度（单位：像素）

若两者只改一个，则会等比例缩放

若都改，则会改变图片长宽

（PC端一般不改图片大小，移动端经常对图片进行缩放）

<img width="500 src="./img/1.gif" alt="图片1">

15.图片格式

jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图（一般用来显示照片）

gif 支持的颜色比较少，支持简单透明，支持动图（颜色单一的图片，动图）

png 支持的颜色丰富，支持复杂透明，不支持动图（专为网页而生）

webp 谷歌专门用来表示网页中图片的一种格式，具备其他的有点，而且文件小（最完美的，但兼容性不好（ie浏览器不能用））

base64 将图片用base64进行编码，这样可以将图片转换为字符，通过字符的形式引入图片

一般用于一些需要和网页一起加载的图片采用base64(同步加载)（使用场景不多）

16.内联框架

iframe 用于向其他页面引入一个其他页面

用于向当前页面引入一个其他页面

<!-- frameborder="1" 有边框 ；="0" 无边框-->    <iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0"></iframe>

17.音视频播放

（1）音频

<!-- audio标签用来向页面中引入一个外部音频          音视频文件引入时，默认情况下不允许用户自己控制播放停止    属性：        controls 是否允许用户控制播放        autoplay 音频文件是否自动播放，但大部分浏览器不会自动对音乐进行播放        loop 音乐循环播放-->    <audio src="./source/1.mp3" controls autoplay loop></audio>

    <!--除了用src指定外部文件的路径外，还可通过source指定文件路径-->    <audio>        对不起，您的浏览器不支持播放音频，请升级浏览器！<!--支持的浏览器显示音频，不支持的输出该行文字-->        <source src="./source/1.mp3">        <source src="./source/2.mp3">        <source src="./source/3.mp3">    </audio><!--优点：对用户友好，可以有多个音频（后面的音频只有前面的失效才会显示），若都失效，则显示文字-->

<!--用于老版本浏览器，自动播放(一般不用)-->    <embed src="./source/1.mp3" type="audio/mp3" width="200" height="100">

（2）视频

    <!--video使用方式基本与audio一致-->    <video>        <source src="./source/1.webm">        <source src="./source/1.mp3">        <source src="./source/3.mp3">        <embed src="./source/3.mp3">    </video>

文章标签：

关键词：

1天前

移动开发前端开发JavaScript

Twaver-HTML5基础学习(9)HTML节点(HTMLNode)

本文介绍了Twaver HTML5中的HTML节点（HTMLNode），这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点，以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素，以及如何自定义告警显示样式。

六卿

711

游客zi3qmblbcdexu

16天前

Web App开发前端开发JavaScript

HTML/CSS/JS学习笔记 Day3（HTML--网页标签下）

游客zi3qmblbcdexu

4799

程序员小海绵

13天前

XMLJavaScript前端开发

JavaWeb基础4——HTML,JavaScript&CSS

HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6

程序员小海绵

2600

土木林森

26天前

移动开发JavaScript前端开发

揭秘！如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站？你的设计梦想即将照进现实！

【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py，并启动服务器。接着，在Web2py中创建新应用，例如命名为“ResponsiveSite”。随后，编写HTML5基本结构，包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码，实现响应式布局。最后，通过在`scripts.js`中加入jQuery脚本提升页面交互性，如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础，便于进一步扩展和优化。

土木林森

1311

1288912195458132

29天前

移动开发前端开发JavaScript

HTML与CSS二三事

1288912195458132

3111

听白

12天前

XML前端开发JavaScript

jQuery HTML / CSS 方法

听白

1800

请看我回答~

25天前

前端开发JavaScript搜索推荐

打造个人博客网站：从零开始的HTML、CSS与JavaScript之旅

在这个数字时代，拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始，使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念，并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者，这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】

请看我回答~

4900

土木林森

25天前

Java数据安全/隐私保护安全

掌握Struts 2动态方法调用，让你的Web开发如虎添翼，轻松应对复杂业务需求！

【8月更文挑战第31天】在Web应用开发中，Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用（DMI）特性允许在不修改配置文件的情况下动态调用Action类中的方法，相比传统方法调用（需在`struts.xml`中为每个方法创建单独的`<action>`），DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用，展示如何利用DMI简化开发流程，并强调了在使用DMI时需注意的安全性和访问控制问题。

土木林森

1200

wljslmz

1月前

存储前端开发

为 HTML 元素指定 CSS 样式的方式

【8月更文挑战第24天】

wljslmz

4900

游客fz577umxdejsg

1月前

前端开发