11.16 HTML5，CSS3，学习笔记

最新推荐文章于 2024-08-17 22:24:13 发布

古明地睡大觉

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量255

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/qq_52507290/article/details/109966947

版权

这是一篇关于HTML5和CSS3的学习笔记。HTML5笔记涵盖了基本格式、语义化标签、列表、超链接、图片标签、内联框架及音视频播放等内容。CSS3笔记涉及语法、选择器、继承、em与rem单位、RGB值以及布局相关概念，如文档流、盒模型和浏览器默认样式。

摘要由CSDN通过智能技术生成

hhHTML5，CSS3，学习笔记

html笔记

1.html的基本格式

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签,网页中的所有内容都要写在这里面-->
<html>
    <!--网页的头部，不会再网页中出现，帮助浏览器或搜索引擎解析网页-->
    <head>
        <!--meat标签，用来设置网页的元数据，这里用来设置网页的字符集，避免乱码问题-->
            <meta charset="utf-8">
        <!--title里的内容显示在浏览器的标题栏上，搜索引擎会根据title中的内容来判断网页的主要内容-->
            <title>网页的标题</title>
        </head>

        <!--表示网页的主体，网页中的所有的可见内容都应该写在body里-->
        <body>
            <h1>第一个网页</h1>
            <h2>马保国</h2>
            <h3>松果糖豆闪电鞭</h3>
           
        </body>


    

</html>

2.标签

常用的标签，例如：

<meta name="keywords" content="马保国,混元形意太极门掌门人,武德">
	<!-- keywords表示网站关键字。多个关键字之间使用英文 "," 隔开 -->


<meta name="description" content="这个网站针不戳">
	<!-- description用于指定网站的描述 -->


<hgroup>
	<h1> 马保国大战英国大力士 </h1>
    <h2> 折手指头 </h2>
</hgroup>
	<!-- hgroup标签用来为标题分组，可以把一组相关的标题同是放到hgroup里 -->


<p>在p标签中的内容表示一个段落</p>



<br>表示换行

语义化标签

<p>
    住在山里<em>针不戳</em>
</p> 
	<!-- 
		em标签用于语气的加重 
		在页面中不会独占一行的元素叫做行内元素
	-->


<p>
   	住在山里<strong>针不戳</strong>
</p>
	<!-- strong表示强调主要的内容 -->


<blockquote>
    你找周树人，关我鲁迅什么事呢？
</blockquote>
	<!-- blockquote表示长引用 -->


<header></header>
	<!-- header表示网页的头部 -->


<main></main>
	<!-- main表示网页的主体
		一个网页只有一个main	
	-->

<footer></footer>
	<!-- footer表示网页的底部 -->


<nav></nav>
	<!-- nav表示网页中的导航 -->

<aside></aside>
	<!-- aside表示和主体相关的其他内容(侧边栏) -->

<article></article>
	<!-- 表示一个独立的文章 -->

<section></section>


	<!-- 表示一个独立的区块，上面的标签不能使用时用section>

块元素&行内元素

1.块元素：对网页进行布局。

2.行内元素：行内元素主要用来包裹元素。

一般情况会在块元素中放行内元素。而不会在行内元素中放块元素。

<div>
    
</div>
<!-- div没有语义,就用来表示一个区块，目前来讲div还是主要的布局元素。-->

<span>
    
</span>
<!-- 没有语义，是行内元素，一般用于网页中选择文字 -->

3.列表

html中的列表一共有三种

1.有序列表

有序列表，使用ul标签来创建无序列表

使用li标签表示列表项

<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

2.无序列表

有序列表，使用ul标签来创建无序列表

使用li标签表示列表项

<ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>

3.定义列表

使用dl标签来创建定义列表

使用dt来定义内容

使用dd来对内容进行解释说明

<dl>
    <dt>结构</dt>
    <dd>结构表示网页的结构，结构用来规定网页哪里是标题，哪里是段落。</dd>
</dl>

4.超链接

超链接可以从一个页面跳转到其他页面。

超链接也是一个行内元素。

在中可以嵌套任何元素，除了它自身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>

最低0.47元/天解锁文章

古明地睡大觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.16 HTML5，CSS3，学习笔记

hhHTML5，CSS3，学习笔记html笔记1.html的基本格式<!DOCTYPE html><html>  <head> <!--meat标签，用来设置网页的元数据，这里用来设置网页的字符集，避免乱码问题-
复制链接

扫一扫