HTML5+CSS3学习笔记（一）

html注释

<!--html注释-->

自结束标签

像这样的标签

<img>
<input>

标签中的属性

在标签中可以设置属性，属性还可以有属性值

<h1>这是一个<font color="red" size="3">一级<font>标题</h1>

实体

在html中有如下的情况:
1.我们不能用连续的多个空格,只会解析出一个空格
2.字母两侧的小于号和大于号如< b >
如果我们需要在网页中书写特殊的符号，就需要使用实体（转义字符）
实体的语法：&实体名字;

&nbsp;<!--空格-->
&lt;<!--小于号-->
&gt;<!--大于号-->

meta标签

meta标签用于设置网页的一些元数据，元数据不是给用户看的
charset 用于指定网页的字符集
name 指定数据的名称
content 指定数据的内容

<!--指定网页字符集-->
<meta charset="UTF-8">
<!--keywords 指定网页的关键字，可以有多个关键字，用逗号隔开，用于引擎搜索-->
<meta name="keywords" content="网上购物，网上商城">
<!--description用于指定网站的描述-->
<meta name="description" content="描述">
<!--三秒后跳转到新网页-->
<meta http-equiv="refresh" content="3;new url">
<!--title用于指定网站的标题,也是引擎搜索结果标题-->
<title>京东<title>

语义化标签

在网页中负责网页的结构
标题标签 h1-h6 (块元素)
段落标签 p (块元素)
em strong （行内元素)
长引用 blockquote （块元素）
短引用 q （行内元素）
换行 br

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<p>一段文字</p>
<!--em加重-->
<p>一段<em>文</em>字</p>
<!--strong加粗-->
<p>一段<strong>文</strong>字</p>
<!--引用-->
孔子说<blockquote>三人行必有我师</blockquote>
孔子说<q>三人行必有我师</q>
<!--换行-->
<br>

块和行内

块元素在网页中独占一行，有高度和宽度
行内元素可以在一行进行排列，没有高度和宽度

列表

(列表会有自动缩进)
无序列表

<ul>
<li>一</li>
<li>一</li>
<li>一</li>
<li>一</li>
</ul>

有序列表

<ol>
<li>一</li>
<li>一</li>
<li>一</li>
<li>一</li>
</ol>

定义列表

<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>

超链接

使用a 标签定义超链接（行内元素）
herf指定跳转的路径：（1）可以是外部页面地址（2）也可以是页面内部地址
herf指定内部地址：
#跳到顶部，#id跳到对应元素，javascript:;什么也不发生
target属性：（1）_self默认值，在当前页面打开（2）_blank，在新页面打开

<a herf="url" target="_blank">点我跳转</a>

图片标签

使用img引入外部标签(行内元素与块元素之间，可以设置宽高，但不会独占一行）
属性：
src指定图片路径
alt图片描述
width图片宽度，heigtht图片高度（一般不建议直接修改）

<img src="url" alt="松鼠">

音视频播放

音频

audio引入音频文件，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay是否自动播放
loop音乐是否循环播放

<audio src="url" controls autoplay loop>

视频

video，用法和audio基本一致