尚硅谷html5+css3(1)html相关知识

简介: 尚硅谷html5+css3(1)html相关知识

1.基本标签:

<h1>最大的标题字号

<h2>二号标题字号

<p>换行

5132dea8c730429db58f5ff191832e98.jpg

2.根标签<html>

包括<head>和<body>

<html>
    <head>
        <title>
            title
        </title>
        <body>
            body
        </body>
    </head>
</html>


26028b77c44c47fdb0b0b216e6f121af.jpg

3.自结束标签与注释(注释不可嵌套)

<html>
    <head>
        <title>
            网页
        </title>
        <body> 
           自结束标签:
           <img>
           <img/>
           <input>
           <input/>
           <!-- 注释:-->
        </body>
    </head>
</html>


aeb39b4e8f8842e3a56c5449092d1dc9.jpg

4.标签的属性:

<html>
<head>
    <title>
        标签的属性
    </title>
</head>
<body>
    <!-- 属性font,在标签(开始标签或自结束标签)中设置属性
        属性是一个名值对结构
        属性用来设置标签中的内容如何显示
        属性和标签名或其他属性用"空格"隔开
        属性名和属性值不能瞎写--color,red,应该根据规定写
        有些属性有属性值,有些没有。
        若有属性值,则用引号引起来
    -->
    <h1> 第 <font color="red" size="4">1</font> 个网页
    </h1>
</body>
</html>


c5c7a5d6557241cfa255dd7189bfd553.jpg

5.文档属性:告诉网页是html5的

<!-- 文档声明: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:语音语调(使字体倾斜)

e79f541d10d54b1a836c9874eb90c59d.jpg

⑤strong:加粗字体

ae0abd2db0084441ae9dcd7b3b65aa43.jpg

⑥blockquote:引用,缩进+独占一行

7b1fe6f4a00f4fff9c4be8a9da48a0e2.jpg

⑦q:短引用,为文字加双引号

a75c5a2d6f7d4e84b76170828775fa1f.jpg

⑧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>


46c5c6ba3e09444b88ec19c7dd2a31fc.jpg

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

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


ed9201b54d854076b9b80e0de9d8beba.jpg

3.定义列表:dl标签:dt表示定义的内容,dd对内容进行解释说明(交互菜单)

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


5913a17fb261427e83c36c21f50af465.jpg

11.超链接

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

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

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

2378a456bdc84121b11ca7116c777f4f.jpg

12.相对路径

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

./当前文件所在目录

../上一级文件目录


13.超链接

(1)新建页面

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

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

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

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

32919e7e1a7545c5b60cba139ffbf912.jpg

(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>


image.jpeg

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>


相关文章
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
3天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
4天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
15 0
|
4天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
12 0
|
5天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
11 2
|
5天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3

热门文章

最新文章