Day1 2023/2/8

灼玉狐汀虞

已于 2023-02-28 17:48:51 修改

阅读量146

点赞数

分类专栏：前端学习笔记文章标签：前端 html

于 2023-02-28 16:32:39 首次发布

本文链接：https://blog.csdn.net/weixin_58606013/article/details/129263683

版权

前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML：

超文本标记语言本质为浏览器打开的文本文档

HTML的核心语法：

<标签名> 内容 </标签名> 双标签成双成对出现

开始标签结束标签

<标签名/> 单标签单标记空标记

<标签名属性名="属性值" 属性名2="属性值"> 内容 </标签名> (重点)

HTML标签大体：

<!DOCTYPE html>

声明文档类型告知浏览器打开html文档类型

整个网页开始根元素根目录为网页最大级别

<head>

表示网页头部文件表示当前网页的相关属性前台用户一般看不到头文件内属性

定义字符编码方式 UTF-8为万国码支持大部分字体、 gb-2312 表示简体中文

适配IE转换edge浏览器兼容问题

理想视口、适配移动端作用于移动端

<title>Document</title>

当前网页标题鼠标放上网页标签有提示作为通用属性鼠标放上去提示文字可放置于其他标签属性中进行提示

<body>

网页主体内容作用于用户视角

HTML常用标签:

1.标题标签

heading h1-6 多层标签可以 h${文本}*层数纯文本也可以加入$*次数 h标签独占一行

属性名 align 文字水平方向对齐

属性值 left（左对齐默认） center 居中 right 右对齐

2.加粗标签 bold b标签

3.倾斜标签 italic i标签

4.下划线标签 underline u标签

5.文本标签 font 更改文字颜色和文字大小 只有font可以操作 =颜色 =效果

属性名 color 文字颜色

属性值英文单词 16进制 rrgb原色

属性名 size 文字大小

属性值 1--7 1最小 7最大

6.标签嵌套 里对里外对外

7.段落标签 p标签 自动换行默认有外边距

属性名 align 文字水平方向对齐

属性值 left（左对齐默认） center 居中 right 右对齐

8.水平线标签 hr 意为水平默认颜色黑色默认宽度百分之百默认水平居中

属性名 color 颜色

whidte 宽度默认像素单位可以使用百分比数值百分比参数可以根据页面放大缩小适配

align 水平线对齐方式

size 水平线粗细不可百分比单位数值为XP单位

9.段内换行 <br/>

10.转义字符串 &代码；

<小于号< >大于号> ®商标

11.图片标签（重要） img src为路径分为两种相对路径与绝对路径

绝对路径：完整地址开始（带HTTP文本传输协议）/以盘符开始 /完整网络地址

相对路径：以自身出发查询 /表示下一级 ../表示上一级同级直接写

alt 图片非正常显示时提示（可以优化用户体验）

title 鼠标悬浮时提示文字

width 图片宽数值+px/%

height 图片高数值+px/% 一般只设置一项图片可等比例缩放

12.列表

有序列表 ol>li

无序列表 ul>li

无序列表属性 type

用于更改项目符号类型:

disc 实心圆

circle空心圆

square方块

笔记练习效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瓜子二手车最新资讯</title>
</head>

<body>
    <h3 align="center">瓜子二手车最新资讯</h3>

    <p align="center">
        <font size="1"><b>新闻来源:2018-10-30网易体育</b>
            <u>发布时间:00:11:00</u>
            <i>作者：毛毛豆豆雨</i>
            <i>
                <font color="#ffa500">参与评论400人</font>
            </i></font>

    </p>



    <p align="center">
        <hr color="#ffa500" width="1200px" >
    </p>

    <p>
        <font size="1" color="#333333">&emsp;&emsp;二手车行业领军者！没有中间商赚差价，更多个人卖家，更多个人卖家，
            <b>瓜子二手车直卖网</b>，为广大车主提供免费上门评估，二手车帮卖，代办过户等服务，专业评估团队，整车全面检测，30天可退，瓜子全程陪同交易！买卖二手车请拨打———— <i>400-069-6530</i>。
        </font>
    </p>


    <p align="center"><img src="../img/car.jpg" alt="速腾" title="速腾" width="600px" height="400px"></p>

    <p>
        <font size="1" color="#333333">
            &emsp;&emsp;目前，瓜子二手车网已与超过20个汽车品牌商建立合作,覆盖46个主流车型。并在长春、石家庄、成都、东莞、南京5个城市建立了线下中心仓，服务覆盖全国33个主流城市。瓜子二
            手车通过与汽车主机厂商、经销商无中间环节的合作，拿到-手优质车源，为消费者提供低首付融资租赁的新型用车、购车服务。与传统的汽车贷款服务相比，短新车网有首付低、月供
            氐门槛低获贷快、省心省力四大特点。</font>
    </p>
    <p>
        <font size="1" color="#333333">&emsp;&emsp;
            毛豆新车网将始终致力于通过大数据、人工智能等先进技术手段,对汽车的生产、流通与销售过程不断进行升级改造，重塑业态结构与生态圈，勃打造汽车领域线上服务+线下体验深
            度融合的汽车零售新模式。</font>
    </p>
    <p align="center"> <img src="../img/vel.jpg" alt="款式"></p>
    <hr color="#cccccc" width="100%">
    <p align="center">
        <font size="1" color="#333333">我爱 &ltguazi&gt我爱&ltcar&gt&emsp;&emsp;&emsp;地址：北京市顺义区南法信镇政府西侧</font>
    </p>
    <p align="center">
        <font size="1" color="#333333">互联网违法或不良信息举报联系方式邮箱: jubao@guazi.com 服务监督热线: 400-066-8780 (周一至周日9:00-21:00)</font>
    </p>
    <p align="center">
        <font size="1" color="#333333">版权所有 &copy 京备16036420号</font>
    </p>



</body>

</html>

以上图片路径为本机相对路径请根据自身调整

Day1 学习结束