8.23前端笔记

1.html介绍:

  页面的三大组成部分

        1>.html 结构层 刚出生的小鸟

        2.>css 样式层  长出五颜六色的羽毛

        3.>js  行为层   会飞了

        结构层html和表现层css,是W3c制定的规范,万维网联名.

        行为层js, 是ECMA 制定的规范, 欧洲计算机协会.

        html:Hyper text mark-up language

        HyperText Mark-up Language

        超文本标记语言

        超文本: 不仅可以放文本还可以放标签

        通过HTML标记(标签)对网页中的文本 图片 多媒体等内容进行描述.

        "超文本":不仅能承载简单的文字 还能包含超链接 图片 音频 视频等.

        "标记语言":标记语言是有一套标记标签组成的.

       2. html文档:

        网页

        后缀名为.html

        .MP3

        .MP4

        .doc

        .docx

        .txt

        标签:标记

        构建网页的基本单位

        标签是由尖角号<>和关键词组成

        标签是由尖角号<>括起来的关键词组成

            div

            p

        单标签:只有一个开始标签

        <标签名>或

        <标签名/>

       

       

        双标签:由开始标签和结束标签组成

        <标签名>

       

       

:开始标签

       

:结束标签

        内容写在开始和结束标签中间

       

休息休息

        元素:标签及内容

       

休息休息

        标签:  

        标签上的属性:

        双标签要写在开始标签上

        单标签就写在标签上

        属性:属性名和属性值组成

        属性名和属性值由等号连接

        属性值要用引号包着

        单引号和双引号都可以

3.html文档结构介绍:

   

   

   

   

   

   

   

   

   

   

       

           

               

                   

               

           

       

4.html文档:

   两种方式打开html文档结构

        1.英文状态下的 !,回车

        2.输入html:5  回车

5.标题标签:

 h系列标签:标题标签

        标题标签中文字大小依次减小,重要程度依次减弱.

        注意事项:h1标题一个页面中只有一个,h2~h6是可以有多个的.

        特性:

        1.宽度默认撑满整个父元素

        2.高度默认由内容撑开

        3.独立成行--垂直布局

        4.自带外间距

        5.自带加粗效果

        应用场景:

        1.logo

        2.文章页标题 内容章节标题

        3.产品标题

        4.模块标题

p标签: 

1.p

        双标签

        段落标签

        主要放成段的文字

       

        特点:

        1.高度默认撑满父元素(宽度和父元素的宽度一样)

        2.高度由内容撑开

        3.垂直布局, 独立成行(一个div标签占一行)

        4.自带上下外边距

        注意: p标签不能嵌套块级标签p div...

        应用场景:文章中的段落 页面中的文字块

     -->

     

     

       

2222

     

     

       

div

     

6.hr标签:

 hr标签:水平分割线  块级标记

         特性

         moren自带间距 自带边框

         独立成行, 垂直布局

         作用:在页面中显示一条水平线

     -->

     

行级标签: 

           

肖战

       

       

           

       

7.块级标签:

 1.块级标签

        div p h1-h6 hr ul li ol dl dt dd

        2.行级标签(行内标签)

        a span b strong em i sub sup del

        3.行内块标签

        img input

     -->

     

     

     

     

     

     

       

     

     

8.路径:

 绝对路径

            网址路径(带着协议的路径  http https)

            https://img.alicdn.com/imgextra/i3/110009838/O1CN01PidGCJ2MXr6YIFYL1_!!0-saturn_solar.jpg_468x468q75.jpg_.webp

        某盘符下的路径 不要用

        C:\Users\Administrator\Desktop\软件学院0823web\day01\1代码\images\2.jpg

        相对路径

        /  根目录

        ./ 当前目录

        ../ 上级目录

        ../../上上级目录

        ../......

        文件夹名/  表示下一级目录

     -->

     

9.a标签: 

a: 超链接标签

         行级标签

         

         href:跳转的路径

     -->

     

     

      百度

      狗东

     

       

       

       

       

       

       

       

         跳转到当前页的顶部

         

         伪链接

         

         1-阶段介绍.html

         

         

         

         百度

         

         

         百度1