HTML基础

1、面试题:web 前端的三大组成
    html        标签,标记,结构 --- 网页的基本组成部分

    css         样式 --- 修饰页面

    javascript  行为  --- 用户交互

2、html   ----   css


html

3、网站的站点建立
    所有网站 都会有个首页   --- 命名  index.html === shouye.html

    banner  header  content  footer

    所有的静态资源会放到一个文件夹下
        图片
        视频
        音频

    index.html   cate.html  cart.html  mine.html
    index.css    cate.css    cart.css  mine.css
    index.js     cate.js     cart.js   mine.js


4、快速生成的结构中
    面试题:  <!DOCTYPE html>  有什么作用?
        声明当前文档是一个 html文件类型
        DOC    TYPE   html文件类型
        document    type   ===  html 

    html  === 根

    <>    标签 | 标记  | 元素  | 盒子

    分类 
        单标签      <_____/>
        双标签      <_____>  </_____>


    基本语法:    <  html标签属性="html属性对应的属性值">

5、代码的注释  快捷键    ctrl + /


6、
    <title>百度一下,你就知道</title>   设置标题的


    link - favicon ====   <link rel="shortcut icon" href="自己的网站的独特"logo" type="image/x-icon">  设置“小图标的”
 
    "logo"  是一个 ico 文件  ====  ui设计师提供的

    前端自己制作  https://www.bitbug.net/

    提前准备一张图片  ---- 下一步生成 ico 文件
        
    打开网站 - 
        第一步:选择对应的图片 https://www.bitbug.net/

        第二步:选择相对于的尺寸 - 一般选择 32 * 32 即可

        第三步:输入附加码

        第四步:生成 ico 文件

    把生成好的 ico 文件放在自己的 文件夹中 - 和 html 文件放在一起

    href="./刚刚生成的  ico 文件" 


7、基础标签学习
    学习方法:
        1、记住是什么标签 - 标签的名称【单词】
        2、记住标签在什么情况下使用即可

    1、标题标签
        h1 ~ h6

    2、段落标签
        p

        特殊字符  &emsp; 【空格的意思】

    3、强制性换行标签
        br

    4、上下角标标签
        上角标  sup

        下角标  sub

    5、特殊的转义字符
        https://www.w3school.com.cn/html/html_entities.asp

    6、修饰文本的标签
        1、加粗的
            b   === strong

        2、倾斜的
            i   === em

        3、删除线
            s   === del

        4、下划线
            u

    7、特殊的字体标签
        font 
            color="red"       color="#abcdef"   size="4"  face="楷体"
            html 标签的属性  ==== font 标签的属性
                        设置颜色的    属性名  color   = 属性值  颜色值
                                                【1、直接写颜色单词      2、十六进制 # _ _ _ _ _ _   ( 0 1 2 3 4 5 6 7 8 9 a b c d e f)】 
                        设置大小的    属性名  size    = 属性值  1-7

                        设置种类的    属性名  face    = 字体名称即可


    8、图片标签
        img

            src  === 图片的路径
                1、直接使用网址式的链接 显示图片  【不是很安全 --- 地址  保持高度一致】   === 绝对路径

                2、直接使用本地电脑的盘符显示图片   === 绝对路径

                相对路径 【工作过程中,尽可能使用相对路径】
                    相对于当前的 html 文件  的  路径关系
                        1、在同一个目录下  使用的是   ./   

                        2、如果是图片在html文件的上一个目录   使用的是 ../

                        3、如果是图片在html文件的上一个目录的上一个目录  使用的是  ../../

            alt
                === 图片找不到之后的提示文本

            title  
                === 鼠标悬停在图片上显示的文本


            width - height
                === 设置尺寸的
                    如果都是是自己手动设置 - 难么就用设置的
                    如果只是设置一个,那么另一个 等比例进行缩放

            面试题: alt 和 title 有什么区别?
                alt === 图片找不到之后的提示文本
                title  === 鼠标悬停在图片上显示的文本

            面试题:图片的类型有哪些?
                jpg  png  gif   webp
                1)jpg :有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;
                2)gif:无损压缩格式,支持透明,支持动画,适用于颜色数量较少的图像;
                3)png:无损压缩格式,支持透明,不支持动画,适用于颜色数量较少的图像;
                4)webp!!!WebP是一种有损压缩格式。不同的是,WebP格式的压缩效率更为出色
                在同等质量下,WebP格式图像的体积要比JPEG格式图像小40%。浏览网页的速度将大幅提升

    9、超链接标签
        a
            href  === 超链接文件的路径 - 类似于 img的src

            target === 打开超链接文件的位置
                _self === 默认值 在自己的窗口
                _blank === 在一个新的窗口打开

        特点:
            1、文本的颜色
            2、自带下划线


    10、列表
        有序列表
            ol  ======= type  --- 设置序号排序
                        - 1数字 / A大写英文字母 / a小写英文字母 / i小写罗马数字 / I大写罗马数字
                li

        无序列表
            ul  =====   type  --- 设置无序的形状
                        - disc实心圆 / circle空心圆 / square实心方块
                li

        自定义列表
            dl
                dt  ==== 名词
                dd  ==== 名词解释

8、控制台的使用 = 鼠标右击 选择 检查===打开控制台

    1、选择左上角的选择项,随机在页面中选择,之后,能够在控制台看到想要的内容 高亮,可直接复制操作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值