22/7/9、初始html，常用标签

照一江明月

已于 2022-09-25 16:59:52 修改

阅读量179

点赞数

文章标签： html 前端

于 2022-07-11 23:04:22 首次发布

本文链接：https://blog.csdn.net/w8666999/article/details/125699799

版权

一、初始html

1.1创建

点击红色圈住的图形创建一个后缀名为“.html”的文件。也可以先创建好在拖进Visual Studio Code

1.2基本框架

打一个英文叹号或是html:5也可以

<!DOCTYPE html>   声明文档类型，（告诉浏览器使用什么规范去解析文档）位于网页里的第一行
<html lang="en">  html里放所有的html代码。lang是language的缩写意思是语言，en是English
这是告诉浏览器对于文本内容使用什么语言，如果是中文就是zh
<head>   head 头部   网页的头部信息
    <meta charset="UTF-8">   编码格式   UTF-8 万国码 （防止乱码）
    <title>Document</title>  页面标题
</head>
<body>
       body 主体内容
</body>
</html>

二、常用标签

标签：由<>  组成的关键词   比如<html></html> ，<p></p>   

属性：在开始标签的里边写的     


<张三  身高=“178” 体重=“90” 学习=“very good”></张三>

标签：张三			
属性：在开始标签的里边写的  格式： 属性名=“属性值”   身高、体重、学习

2.1、p标签

p标签是段落标签，双标签，是块级标签

独占一行

可以设置宽高

可以设置背景色

有默认上下外间距

p标签里不能在嵌套p标签

 <p> 央广网福州6月1日消息（记者 龚雯 通讯员 谢贵明） 第72个“六一”国际儿童节来临之际，
        一场“我劳动我快乐”劳动技能竞赛于日前在福建省福州市麦顶小学开展。活动分别设置穿衣服、叠衣服、择菜、缝扣子、水果拼盘等寓教于乐的趣味劳动竞赛，成为孩子们迎接“六一”儿童节最喜欢的项目。据了解，福州市麦顶小学根据不同年龄段学生的特点，落实立德树人根本任务，
        培养学生良好生活习惯，提高学生自理能力，推动劳动教育深化落实。</p>
    <p> 央广网福州6月1日消息（记者 龚雯 通讯员 谢贵明） 第72个“六一”国际儿童节来临之际，
        一场“我劳动我快乐”劳动技能竞赛于日前在福建省福州市麦顶小学开展。活动分别设置穿衣服、叠衣服、择菜、缝扣子、水果拼盘等寓教于乐的趣味劳动竞赛，成为孩子们迎接“六一”儿童节最喜欢的项目。据了解，福州市麦顶小学根据不同年龄段学生的特点，落实立德树人根本任务，
        培养学生良好生活习惯，提高学生自理能力，推动劳动教育深化落实。</p>

2.2、div标签

div标签是容器标签，是块级标签

可以设置宽高

独占一行

可以设置背景色

 <div style="color: red;width:500px;height:300px;background: green;">
        马上23点了</div>
    <div style="width: 200px;height: 200px;background: tomato;"></div>
 
    <div style="width: 1000px;height: 100px;background: blue;"></div>

2.3、img标签

img是图片标签，是块级标签

可以设置宽高

属性：

src="图片的地址" （可以写线上地址，也可以写本地地址）

alt="图片加载失败时的替换文本" 备胎的作用

title=“标题” 鼠标划入图片身上时显示的文本

width=“200” 图片的宽度

height=“200” 图片的高度

<body>
    <!-- 
        img 图片标签
            src-图片的地址
                地址：
                    绝对路径：
                        1、电脑上的绝对路径  （本地绝对路径）
                            C:\Users\panyz\Desktop\web基础课7.4\day22\验证码.png
                        2、网址的绝对路径
                            http://www.ujiuye.com/statics/images/newzhu_images/logo.png
                    相对路径：
                        ./ 打开当前文件夹    (./是可以省略的)
                       文件名 / 打开下一级目录
                        ../ 打开上一级目录
                        ../../  上一级的上一级
            alt--当图片加载失败时，显示解释说明的文字
            title--当鼠标悬停在图片上时，显示提示的文字
     -->
    <img src="C:\Users\panyz\Desktop\web基础课7.4\day22\验证码.png" alt="">
    <img src="http://www.ujiuye.com/statics/images/newzhu_images/logo.png" alt="">
    <img src="./1.jpg" alt="">
    <img src="1.jpg" alt="">
    <img src="./img/作业2用图.jpg" alt="">
    <img src="../icon1.png" alt="新浪图标" title="新浪">
</body>