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>