HTML学习笔记(二)

HTML笔记(二)

布局元素,列表及超链接

注意: html重点关注语义,而不是格式

1.布局元素(结构化语义标签):

 <!--   
 		显示效果无区别,只是语义上的差别    
        header 表示网页头部
        main 表示网页主体(一个页面一个main)
        footer 表示网页底部
        Nav 表示网页的导航
        aside 表示和主体相关的其他内容(如侧边栏)
        article 表示一个独立文章
        section 表示一个独立区块,上面的标签均不能表示时使用section

        div 无语义,就是用来表示一个区块,目前来讲div还是我们主要的布局元素
        span 无语义,行内元素,一般用来在网页中选中文字
     -->

2.列表(list)

a.  无序列表:ul
	列表元素(list item):li

<ul>
    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
    </ul>

效果如图

b.有序列表:ol

	<ol>
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ol>

效果如图

c. 定义列表dl

使用dt来表示定义的内容
使用dd来对内容进行解释说明

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

3.超链接

• 超链接,可以让我们实现页面的跳转,页面与页面或者当前页面的其他位置.
• 使用a元素来定义超链接.
  属性:
  1.href 指定跳转的目标路径;
  2.target指定超链接打开的位置(可选值:_self 默认值即在当前页面中打开超链接,_blank在一个新的页面中打开超链接)
  3.id属性是元素的唯一标识,每个标签都可以添加一个id属性,同一页面中不能出现重复的id属性

	<a href="http://www.baidu.cn" target="_blank">百度</a>
    <br><br>
    <a href="first.html">同一目录下页面跳转</a>

• 当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,用. /或者 …/开头,其中./可省略,它表示当前文件所在目录.而另一个表示当前文件的上一级目录

 <a href="./style.html">相对路径</a>
 <a href="../html2.html">相对路径a</a>

• 超链接也是一个行内元素,在a标签中可以嵌套除它自身以外的任何元素,可用< br>实现换行,或br*数字来实现多行换行
• 可以直接将超链接的href属性设置为#,这样点击超链接后页面不会发生跳转,而是转到当期页面的顶部位置.(lorem*数字实现语句生成)
• 跳转页面的指定位置,只需要将href属性设置为 #目标元素的id属性值

<a href="#bottom">去底部</a>
<a id="bottom" href="#">回到顶部</a>

4.图片

1. 使用img标签来引入外部图片,是一个自结束标签.属于替换元素(基于块和行内元素之间)

属性:
src,指定外部图片路径(路径规则和超链接是一样的).
alt,图片的描述,默认情况下不会显示,有些浏览器无法加载时显示,搜索引擎会根据alt中的内容来识别图片
width,图片的宽度(单位是像素)
height,图片的高度
宽度和高度如果只修改了一个,则另一个会等比例缩放,一般在PC端不建议修改图片的大小,需要多大裁多大;但是在移动端,经常需要对图片进行缩放(大图缩小).

2.图片常见格式
(效果一样用小的,效果不一样用效果好的)

jpeg(jpg) 支持的颜色比较丰富,不支持透明效果和动图,一般用来显示照片
gif 支持的颜色比较少,支持简单透明和动图,用于颜色单一的图片及动图
png 支持的颜色丰富,支持复杂透明,不支持动图,(专为网页而生)
webp 谷歌推出的专门用来表示网页图片的一种格式,具备其他图片格式的所有优点,而且文件特别小,但兼容性不好
base64 将图片使用base64编码,将图片转化为字符,通过字符形式引入图片,一般都是一些需要和网页一起加载的图片才会使用

5.内联框架iframe

用于向当前页面引入一个其他页面
src 指定引入的网页路径
frameborder 指定内联框架是否出现边框

6.音频audio

用于向页面中引入一个外部的音频文件,默认情况下不允许用户自己控制播放停止

• 属性
  • controls 是否允许用户控制播放,不用给值
  • autoplay 音频文件是否自动播放
    • 如果设置了autoplay,则音乐在打开页面时会自动播放,但是目前大部分浏览器不会自动对音乐进行播放
  • loop 音乐是否循环播放

除了通过src来指定外部文件的路径以外,还可以通过source来指定文件

    <audio src="./xx" controls autoplay></audio>
    <audio controls>
     	对不起,您的播放器不支持播放此音频!请升级浏览器!
        <source src="./xx">
    </audio>

7.视频video

使用方式和audio基本一样
IE8不支持,使用< embed >来兼容