HTML入门零基础教程(三)

news2024/11/30 14:44:24

嗨,大家好,我是异星球的小怪同志

一个想法有点乱七八糟的小怪

如果觉得对你有帮助,请支持一波。

希望未来可以一起学习交流。

目录

一、  VSCode工具生成骨架标签新增代码

1.文档类型声明标签

2.lang语言种类

3.charset字符集

二、HTML常用标签

1.标签语义

2.题目标签(重要)

3.段落标签(重要)

4.换行标签(重要) 


 

 

一、  VSCode工具生成骨架标签新增代码

1.文档类型声明标签

<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用的是哪种HTML版本来显示网页

<!DOCTYPE html>

 这句代码的意思是:当前页面采取的是HTML5版本来显示网页

注意:

<!DOCTYPE >声明位于文档中的最前面位置,处于<html>标签之前

<!DOCTYPE >不是一个HTML标签,它就是文档类型声明标签

2.lang语言种类

用来定义当前文档显示的语言

(1)en定义语言为英语

(2)zh-CN定义语言为中文

简单来说定义为en就是英文网页,定义为zh-CN就是中文网页

其实对于文档显示来说,定义成en的文档也可以显示中文,定义为zh-CN的文档也可以显示英文。

这个属性对浏览器和搜索引擎(百度,谷歌等)还是有作用的

3.charset字符集

字符集是多个字符的集合,以便计算机能够识别和存储各种文字,在<chead>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

 <meta charset="UTF-8">

 charset常用的值有:GB2312 、BIG5 、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符.

注意:

上面语法是必须要写的代码,否则可能引起乱码的情况,一般情况下,统一使用“UTB-8”编码,尽量统一写成标准的“UTF-8”,不要写成“UTF8”或“UTF8.

 总结:

 (1)以上三个代码VScode自动生成,基本不需要我们重写。

 (2)<!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面采取的是html5版本来显示页面

 (3)<html lang=“en”>告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示。

 (4) <meta charset="UTF-8">必须写采取UTE-8来保存文件,如果不写就会乱码,具体原理以后再说。

二、HTML常用标签

1.标签语义

学习标签是有技巧的,重点是要记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。

根据标签的语义,再合适的地方给一个最为合理的标签,可以让页面结构更清晰。

比如下面的一个是没有标签,一个是有标签

2.题目标签(重要)

为了使网页更具有语义化,我们经常会在页面中用到题目标签,HTML提供了6个等级的网页标题,即<h1>-<h6>

<h1>我是一级标题</h1>

单词head的缩写,意为头部、标题

标签语义:作为标题使用,并且依据重要性递减。

特点: (1)加了标题的文字会变得加粗,字号也会依次变大。

            (2)一个标题独占一行

当然如果我们记不住<h1>-<h6>,我们可以记一些口诀   

    <h1>标签一共六级选</h1>

    <h2>文字加粗一行显</h2>

    <h3>由大到小依次减</h3>

    <h4>从重到轻随之变</h4>

    <h5>语法规范书写后</h5>

    <h6>具体效果刷新见</h6>

    <h1>标签一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

3.段落标签(重要)

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示,在HTML标签中,<P>标签用于定义段落,它可以将整个网页分为若干个段落

<p>我是小段,我是段落标签</p>

 标签语义:可以把HTML文档分割为若干段落

特点:

(1)文本在一个段落中会根据浏览器窗口的大小自动换行. 

(2)段落与段落之间保有空隙.

我们可以操作一下,比如我们随便找两段新闻来试一试

由上面两张图,可以看到,虽然新闻看着是分开段落的,但是没有使用段落标签,就会造成浏览器在浏览的过程中,是挤在一起的。 此时我们就要加上段落标签<p></p>

4.换行标签(重要) 

 在HTML中,一个段落中的文字会从左到右一次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文强制换行显示,就需要使用换行标签<br/>

</br>我是小换,我能强制换行,为换行标签

标签语义:强制换行 

特点:

(1)<br>为单个标签

   (2)<br>标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距

我们也可以来试试

好了,今天就到这里,下次再更~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/3019.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从刘老师的进化的力量到有感,疫情阶段如何弯道超车

听了刘老师的内容&#xff0c;了解了一个公式&#xff1a;方向趋势不确定周期&#xff0c;那么JVS更能成为企业这几年实现弯道超车的助理。 方向事关企业生死&#xff0c;在方向上宁愿多花些时间&#xff0c;也不能犯错。不确定刺激企业短时间的痛&#xff0c;企业是需要化解短…

[Spring MVC 4] MyBatis 分页开发

在做Web开发的时候&#xff0c;需要对查询结果进行分页查询&#xff0c;初学者会使用原生的sql查询方式&#xff0c;例如limit关键字&#xff0c;不过这种属于对数据库物理分页了&#xff0c;然而会造成数据库本身的压力&#xff0c;所以分页管理就诞生了。一般在Mybatis中使用…

校园二手交易系统,二手交易网站,闲置物品交易系统毕业设计作品

项目背景和意义 目的&#xff1a;本课题主要目标是设计并能够实现一个基于web网页的二手交易网站系统&#xff0c;整个网站项目使用了B/S架构&#xff0c;基于java的springboot框架下开发&#xff1b;用户通过登录网站&#xff0c;查询二手交易商品&#xff0c;购买二手交易网站…

对于volatile的看法

volatile原意是易变的&#xff0c;编译器对volatile修饰的变量&#xff0c;当要读取这个变量时&#xff0c;任何情况下都会从内存中读取&#xff0c;而不会从寄存器缓存中读取。 编译器不会对volatile修饰的变量进行任何优化 1&#xff09;非volatile变量 在这个用例中&#…

codery-why蘑菇街商城项目梳理笔记

supermallagain-学习记录 项目目录搭建 安装vue以及整理目录 样式初始化 引入assets/css/normalize.css文件 在实际开发中&#xff0c;经常会将浏览器默认的样式进行重置 *{margin:0;padding:0;border:0;}但是*是通配符&#xff0c;需要把所有的标签都遍历一遍&#xff0c;…

MySQL底层知识总结

MySQL数据库配置主从 三大日志 -binlog 归档日志 -redolog 重做日志 -undolog docker run --name mysql102 -p 33062:3306 -e MYSQL_ROOT_PASSWORD123 -d mysql:5.7 --character-set-serverutf8mb4 --collation-serverutf8mb4_unicode_ciGRANT REPLICATION SLAVE ON *.* t…

Spring Bean 的生命周期(看着图不迷路)

目录 Bean的生命周期5步走系列&#xff1a; BeanLifeCycle类 Spring.xml 配置文件 BeanLifeTest测试方法 运行结果&#xff1a; Bean的生命周期7步走系列:在实例化Bean的前和后加了两步。​​​​ 定义myInstantiationAwareBeanPostProcessor 类 实现InstantiationAwar…

【JavaWeb】一文搞懂Java过滤器与拦截器的区别

✅✅作者主页&#xff1a;&#x1f517;孙不坚1208的博客 &#x1f525;&#x1f525;精选专栏&#xff1a;&#x1f517;JavaWeb从入门到精通&#xff08;持续更新中&#xff09; &#x1f4cb;&#x1f4cb; 本文摘要&#xff1a;本篇文章主要分享Java过滤器与拦截器的知识。…

字节跳动测开实习生面试,拿15K过分吗?

今年9月面了字节跳动的测试开发岗&#xff08;日常实习岗&#xff09;&#xff0c;2面技术面和1面hr面。拿到offer后&#xff0c;考虑到自己还是想保研怕成绩掉&#xff0c;选择留在学校&#xff0c;拒offer。 很幸运的是我的简历被内推到了其他部门&#xff0c;今年10月初字节…

【MySQL性能优化系列】select count(*)走二级索引比主键索引快几百倍,你敢信?

问题 在MySQL版本5.7数据测试过程中&#xff0c;一张百万数据的表用 select count(*)查询特别慢需要20s并且是走了主键索引&#xff0c;为什么查询还需要这么久&#xff1f;如何优化&#xff1f;下面我们将请到当事SQL进行发言 验证分析 猜想 先猜想一波为什么走了主键索引依…

【Vue3】手把手教你创建前端项目 Vue3 + Ts + vite + pinia

文章目录一、 项目初始化二、 代码风格安装eslint安装prettier三、 状态管理工具--Pinia优点使Pinia 基本使用四、Vue-Router4 快速上手指南五、VueUse快速上手指南什么是 VueUse简单上手六、全局样式CSS原生 css 新特性scss 或 less封装axios安装依赖封装UI 样式库一、 项目初…

数据结构(二叉树)——Java实现

作者&#xff1a;~小明学编程 文章专栏&#xff1a;Java数据结构 格言&#xff1a;目之所及皆为回忆&#xff0c;心之所想皆为过往 目录 树型结构 什么是树 树的相关概念 树的表现形式 树的引用 二叉树 概念 二叉树的种类 常规二叉树 满二叉树 完全二叉树 二叉树的性…

京东商品接口加解密算法解析

最近,闲来没事,打开看了一下京东图书的热销榜,想通过接口查看下它接口的加密方式,于是直接打开了M站的地址:https://m.jd.com/,然后打开搜索页面,如下图。 打开页面,打开开发者工具,往下滑动鼠标,获取接口地址。 解析一下接口,接口返回值跟没什么特殊说明,首尾加…

spring boot 整合 shiro 框架

1、整合shiro 1.1、创建spring boot项目 1.2、引入依赖 <dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring-boot-web-starter</artifactId><version>1.9.0</version> </dependency><!--mybatis…

云手机在黑产中的应用

虚拟化技术是当下黑灰产的热门技术。使用虚拟化环境&#xff0c;让黑灰产可以利用虚拟环境在应用运行环境的更底层这一优势&#xff0c;对 App 进行神不知鬼不觉的修改&#xff0c;从而避免在分析、破解 App 上的投入。 较早之前以 VirtualApp 为代表的 Android 虚拟化多开工具…

OpenHarmony源码分析(二):系统安全

1、 概要 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gc6K9a9A-1667380110547)(PNG/11.png)] 2、 进程隔离 OpenHarmony 内核态的进程之间无隔离,共享一块VMM空间,用户态进程每个用户用于自己独立的空间,相互之间不可见,通过MMU 机制实现进…

拓端tecdat|python在Scikit-learn中用决策树和随机森林预测NBA获胜者

全文链接&#xff1a;http://tecdat.cn/?p5222 原文出处&#xff1a;拓端数据部落公众号 在本文中&#xff0c;我们将以Scikit-learn的决策树和随机森林预测NBA获胜者。美国国家篮球协会&#xff08;NBA&#xff09;是北美主要的男子职业篮球联赛&#xff0c;被广泛认为是首屈…

【Transformers】第 5 章:微调文本分类的语言模型

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

Go语言入门【1】数据类型、变量、常量

常见基本数据类型 uint8&#xff1a;无符号8位整形&#xff0c;取值范围&#xff1a;0-255 uint16&#xff1a;无符号16位整形&#xff0c;取值范围&#xff1a;0-65535 uint32&#xff1a;无符号32位整形&#xff0c;取值范围&#xff1a;0-4294967295 uint64&#xff1a;…

高分辨空间代谢组学测试的样品要求以及常见问题

高分辨空间代谢组学可实现定量检测&#xff0c;亦可定性检测&#xff0c;且可一次可同时检出多种类型的化合物&#xff0c;包括脂类、小分子代谢物、蛋白质、药物及其载体等&#xff0c;并且能够呈现出这些物质的空间分布情况。高分辨空间代谢组学测试的样品要求&#xff1a; …