HTML常用标签
<blockquote> </blockquote>
<q> </q>
<br>
<center> </center>
<div> </div><span> </span
><del> </del>
<hr>
1. <blockquote> </blockquote>引用别人说的话,常引用,会换行,是块元素运行后没有双引号。
2.<q> </q>表示短引用,有双引号。
3.<br> 换行标签,自结束标签,并且强制换行。
4.<center> </center> 居中效果。
5。<div> </div> 是块元素,用来布局的没有意义。
6.<span> </span> 没有任何语义,用来包裹文字,是行内元素。
7.<del> </del>使用del标签来表示一个删除的内容.
8.<hr> 是分割线。
(HTML 其他常用标签请在我第一天中写的看)
HTML结构标签
1. header 网页的头 <header> </header>
2. main 网页的主体部分(一般就一个) <main></main>
3. footer 网页的底部 <footer></footer>
4. nav 网页的导航 <nav></nav>
5. aside 和主体相关的内容,侧边栏 <aside></aside>
6. article 文章之类的 <article></article>
7. section 独立的区块,上面的标签都不合适,就用这个 ,也是没有任何语义,一般用来代替div
9. div 块元素 <div></div>\
一般网页布局结构为:
<header></header>
<main>
<nav></nav>
<aside></aside>
<article></article>
</main>
<footer></footer>
行内与块元素
块元素(block element) 常用来布局
特点:
1、块元素会独占一行,而且从上往下依次排列
2、块元素的宽度默认是父元素的100%
3、块元素的高度默认是被内容撑开的
常用块元素:
div h1-h6 p header footer nav ...
行内元素
(inline element)
特点:
1、行内元素不会独占一行,它是自左向右排列,一行排满,再另起一行,继续从左向右
2、行内元素的宽和高都是被内容撑开的
常用行内元素:
span em strong a i ·····
行内块元素
特点:兼具块元素和行内元素的特点不会独占一行、可自定义宽高
常用行内块元素:
img
注意:
1、块元素里面什么都能放,可以放块元素、行内元素、行内块元素
2、行内元素里面一般只放行内元素,如文字,不能放块元素
3、特殊的块元素p标签,它里面一般只放文字或者图片,不能放块元素
4、特殊的行内元素a标签,它里面什么都能放,可以放块元素、行内元素、行内块元素
除了它自己
5.元素之间可以相互转换display属性
列表
列表(list) 一组一组
1:有序列表 用ol创建,li表示列表项 2:无序列表 用ul创建 li表示列表项
3:定义列表 用dl创建,dt下定义 dd解释定义
使用type属性可以更改项目符号如
<ul type='circle'>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
有序列表 1,a,A,i,I
无序列表:disc,默认值,实心的圆点
square,实心的方块
circle,空心的园
注意:
1、一般情况下,我们不会使用它的项目符号
2、列表是可以相互嵌套
图片标签
4个属性
1. src属性 引入图片的路径 通过./或者../开头
./ 引入图片跟你在同一个目录下
../ 跳出当前的目录,再找
2. alt属性 对图片的描述,它会在图片引入不成功的时候,显示文字
它也会帮助浏览器做收录功能
3.width属性 设置图片的宽度属性值里直接写数值或者带长度单位都可
4.height属性 设置图片的高度
注意:一般情况下,width和height只设置一个,另一个让浏览器按比例缩放
超链接
超链接是行内元素,是特殊的行内元素,它里面什么都能放。他有两个功能,两个属性,一个补充
功能
1.可以从一个页面跳转到另一个页面
2.当前页面进行跳转
3.下载
属性
1.href 2.target
<a href="">
<img src="./img/img/hg.gif" alt="">
</a>
href
填写超链接的地址
绝对地址 只要填写网址,都可以经营正确的跳转,不管文件本身的影响
相对地址 关文件本身位置的影响
./ 您要跳转的位置跟你在同一目录下
.. 跳出当前目录
——self 在当前页面打开跳转的超链接 默认值
——blank 新开的页面打开超链接
辅助功能 :1.回到顶部 href的属性值设置 # 即可
2.去任意的位置
第一步:给取的位置打一个标记,用id 属性设置一个id 属性值
第二步: 在href 的属性值里 #id 属性值
注意:id属性值:不能是数字开头,最好不要是汉字,是独一无二的存在
<a href="#">去顶部</a>
<a href ="#">空链接</a>
<a href ="javascript:;">空链接2</a>