千锋day2

undyue

于 2020-03-17 21:45:26 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/undyue/article/details/104931845

版权

知识点：
一：html的基本结构
分为两个区域：
head 描述区
body 内容区
< !DOCTYPE html> < !–声明文档类型–>

< html lang=“en”> < !–根标记、根标签、根元素 lang=“en” 语言形态–>

<head>
    <!-- head描述区 -->
    <meta charset="UTF-8">
    <!-- 字符编码格式   UTF-8  国际性编码格式-->
    <!-- charset="GB2312/GBK" -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 控制视口的比例 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 按照IE最高版本 去渲染当前网页 -->
    <title>欢迎走入胖帅心里</title>
    <!-- 当前网页的标题  - 显示在状态栏上面 -->
</head>

<body>
    <!-- 内容区域 -->
    只要是网页中能看到内容，都是放在body里面胖帅
</body>

二：html的语法
1：html标签分为两类：
单标记（空标记）
双标记（常规标记） : 成对出现都属于双标记

    2:语法：
        双标记：
            <标签名称 属性名="属性值">       </标签名称>
        单标记：
            <标签名称 属性名="属性值">


    html语法说明:
        a：在尖角号后面的第一个单词就是标签的名称。
        b: 在标签后面，用空格隔开是属性
        c: 属性和属性值之间用等号连接
        d: 属性值放在引号里面（单双引号都可以）
        e: 如果一个标签拥有多个属性的时候，属性和属性之间用空格隔开

三：html的常用标签
1：标题标签
< h1> </ h1> 唯一性：在一个页面只能出现一次放logo
< h2> </ h2>
< h3> </ h3>
< h4> </ h4>
< h5> </ h5>
< h6> </ h6>

    特点：拥有自己默认的大小、文本也是加粗状态

    h2 - h6 可以是网页板块的标题、也可以是一段内容的标题、没有唯一性



5：加粗标记：
    <b></b>
    <strong></strong>   

    特点：默认显示加粗状态
        strong标签偏向强调语气的作用。

3：文本倾斜：
    <em></em>
    <i></i>


4：下划线
    <u></u>

5：强制换行符
    <br>

    特点：浏览器只要遇到br  就会把后面的内容放在下一行显示

6：水平线

    <hr>

7：上标  下标
    <sup></sup>
    <sub></sub>

8：段落标记
    <p></p>

9：代表单个字符或者一小段文本
    <span></span>

10：转义字符：
    &nbsp;    空格
    &gt;  &lt;   左右尖角号
    &copy;    版本符号（备案图标）


11：div
    <div></div>

    div 是个盒子！
    作用：专门给网页划分布局的

四：html的列表
无序列表:
< ul>
< li></ li>
< li></ li>
< /ul>

有序列表：
    <ol>
        <li></li>
        <li></li>
    </ol>
    拓展：
        改变列表符号的样式：
            type=""
                属性值：a / A
                属性值：i / I
        改变列表符号开始的符号：
            start=""
                属性值为一个数字，代表从第几个开始
                
自定义列表：
    <dl>
        <dt>一般情况下放的是图片</dt>
        <dd>放的是对图片的解释</dd>
    </dl>

五：超链接
超链接：
< a>< /a>

    a里面的属性：
        href="跳转的地址"

        target=""
            属性值：
                    _self(默认值 ：在当前页面打开)
                    _blank(新创建一个窗口打开)

        title=""  提示信息（大部分标签都能支持title属性）

六：图片
网页的图片展示两种：
一种是img标签导入的图片
一种是通过css添加的背景图
< img>标签的应用：

    img标签里面的属性:
        src="图片的路径"

        alt="文本替换图片"
            alt说明：(alt属性，属性值为空也尽量别删除)
                a:当图片加载不出来的时候，alt里面的文本替换图片
                b:有利于seo优化！方便搜索引擎对图片进行检索。
                
        title=""
            title说明：
                a:提示信息
                b:title作为图片的一个小标题

        width=""  图片的宽
        height=""  图片的高
        border=""  图片的边框

七：相对路径的写法
1: 同级找同级 ./目标名称
2: 父级找子级 ./文件夹的名称/目标文件的名称
3：子级找父级 …/ 返回上一级

八：表格
表格的作用：显示数据

    <table>
        <tr>
            <td></td>
        </tr>
    </table>


    tr   行
    td   列
表格里面的属性：
    width=""
    height=""
    border=""
    bordercolor=""  边框颜色

undyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
千锋day2

知识点：一：html的基本结构分为两个区域：head 描述区body 内容区< !DOCTYPE html> < !–声明文档类型–>< html lang=“en”> < !–根标记、根标签、根元素 lang=“en” 语言形态–><head> ...
复制链接

扫一扫