北大青鸟培训第二天:HTML初级代码和相关知识 (持续更新)

发布于:2022-07-26 ⋅ 阅读:(500) ⋅ 点赞:(0)

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>


网站公告

今日签到

点亮在社区的每一天
去签到