html基础

最新推荐文章于 2024-10-17 18:11:28 发布
最新推荐文章于 2024-10-17 18:11:28 发布
阅读量50 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bsf000000___/article/details/131690773
版权

html基础

1.1浏览器内核

**四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。**五大浏览器采用的都是单内核， 而是随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。四大内核的解析不同使网页渲染效果更具多样化。

  • IE浏览器内核：Trident内核，也是俗称的IE内核；
  • Chrome浏览器内核：统称为Chromiun内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
  • Firefox浏览器内核：Gecko内核，俗称Firefox内核；
  • Safari浏览器内核：Webkit内核；
  • Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

1.2web页面构成

  • 页面的构成被分为三个主要部分：结构(Structure)、表现(Presentation)和行为(Behavior)。
  • 结构:
  • HTML(HTML4.01)，（Hyper Text Markup Language）超文本标记语言,它不是一种编程语言， 而是一种标记语言，通过使用标记标签来描述网页；
  • XHTML，（EXtensible HyperText Markup Language）指可扩展超文本标签语言,与 HTML 4.01 几乎是相同的,只是更严谨更纯净，他出现的目标原本是为了取代HTML，但刚刚兴起就被 HTML5取代了；
  • HTML5，HTML的最新版本，增加了语义化标签，以及很多新特性，使HTML变的更加灵活强大， 虽然仍处于完善之中。但大部分现代浏览器已经具备了某些 HTML5 支持。
  • 表现:
  • CSS，指层叠样式表（Cascading Style Sheets）,是用于（增强）控制网页样式并允许将样式信息 与网页内容分离的一种标记性语言。
  • 行为:
  • JavaScript，是世界上最流行的脚本语言，用来给页面添加动态效果和动态交互，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

1.3B/S和C/S

在这里插入图片描述

B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器 是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简 化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装SQL Server、Oracle、 MySql等数据库。浏览器通过Web Server 同数据库进行数据交互。

B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能 使用，客户端零安装、零维护。系统的扩展非常容易。

常见B/S结构有：淘宝官网、京东官网、百度等

在这里插入图片描述

**C/S是Client/Server的缩写。客户端/服务器开发模式,**服务器通常采用高性能的PC、工作站或小型机， 并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软 件。C/S面向特定的用户，维护成本较高，常用于局域网。

常见C/S结构有：QQ、微信等

1.4URL

  • **它从左到右由下述部分组成： **
  • **协议：http通信协议。 **
  • **服务器地址（host）：指出WWW页所在的服务器域名。 **
  • **端口（port）：有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口 号。 **
  • 路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目 录/文件名这样结构组成）。与端口一样，路径并非总是需要的。

例如: scheme://host.domain:port/path/filename

  • scheme - 定义因特网服务的类型。最常见的类型是 http

  • host - 定义域主机（http 的默认主机是 www）

  • domain - 定义因特网域名

  • port - 定义主机上的端口号（http 的默认端口号是 80）

  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）

  • filename - 定义文档/资源的名称

  • META:描述了一些基本元素的数据。“元”配置，就是基本的配置项目。

    • META 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
    • META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
    • 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web服务。
<!-- 1、指定字符集,charset就是charactor set（即“字符集”） 浏览器就是通过meta来看网页是
什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 -->
<meta charset="utf-8">
<!-- 2、页面描述,name即“名字”，content即“内容”。只要设置Description页面描述，那么百度搜索结
果，就能够显示这些语。 -->
<meta name="description" content="具体描述。。。">
<!-- 3、关键字：就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。有助于搜索引擎SEC优
化，。 -->
<meta name="Keywords" content="网易，邮箱，游戏，新闻">

1.5html标签分类

1.5.1块级标签

块级元素是指本身样式属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行 大布局（大结构）的搭建。 块级元素的特点：独占一行，可以设置宽高）。

  • 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
  • 可以直接控制宽度、高度以及盒子模型的相关css属性
  • 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
  • 在不设置高度的情况下，块级元素的高度是它本身内容的高度

常用的块级元素:

描述标签
div常用块级容器，也是css layout的主要标签
h1~h6标题标签
hr水平分隔线
ol有序列表
ul无序列表
li列表项
dl自定义列表
dt自定义列表项
dd定义描述
table表格
p段落
form交互表单

1.5.2、行内元素

**内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文 字、小图标（小结构）的搭建。 **

行内元素的特点:（有多大占多大，不可以设置宽高）

  • 和其他内联元素从左到右在一行显示

  • 不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的

  • 内联元素的宽高是由本身内容的大小决定（文字、图片等） 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

常用的行内元素:

标签描述
span常用内联容器，定义文本内区块
a锚点，超链接
b加粗
strong加粗强调
i斜体
em斜体强调
del文档中已被删除的文本
br强制换行
u下划线
textarea多行文本输入框
input输入框
select下拉列表
sub下标
sup上标
small小字体文本

1.5.3、行内块元素

**行内块元素是指本身属性为display:inline-block;的元素。 **

行内块元素的特点:（有多大占多大，可以设置宽高）。

  • 元素排列在一行
  • 宽度默认由内容决定
  • 元素间默认有间距
  • 支持宽高、外边距、内边距的所有样式的设置

常用的行内元素:

标签描述
img图片标签

1.6HTML和CSS中的长度单位

1.6.1相对字体的长度

rem

  • .wrap { width: 40rem; }
  • rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像 em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。
  • 值得注意的浏览器支持问题： IE8，, Safari 4或 iOS 3.2中不支持rem单位。

1.6.2可视区百分比长度单位

vw

  • vw是可视区宽度单位。1vw等于可视区宽度的百分之一。

  • vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无 关。有点像rem单位那样总是相对于根元素。

vh

  • vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin

  • vmin的值是当前vw和vh中较小的值。
  • 在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的 度量标准。

vmax

  • vmax的值是vw和vh中的较大的值。
  • 值得注意的浏览器支持问题：webkit内核的浏览器支持vmin，不支持vmax。但是Firefox支持 vmax。
<!-- 绝对单位，不会因为视图大小改变大小 -->
    <div style="width:100px;height:100px;border:1px solid red;font-size:20px">box1</div>

    <!-- em 相对单位，相对于当前元素的font-size值，font-size之发生变化则em最终值也会发生改变 -->
    <div style="width:10em;height: 10em;font-size:1em;border: 1px solid green;">box3</div>
    
    <!-- vmin的值是当前vw和vh中较小的值 -->
    <div style="width:30vmin;border:1px solid blue;font-size: 5vmin;">box2</div>

1.7标签

1.7.1div标签

div标签是块级元素，拥有块级元素的特点。每对div标签(

)里的内容都可以占据一行，不会其他标签在一行显示; div标签总是从新行开始显示;

且div标签可以通过oss样式来设置自身的宽度〈也可省略，当没有使用css自定义宽度时，div标签的宽度为其的容器的100%)、高度，且还可以设置标签之间的距离(外边距和内边距);

我们还可以在div标签中，使用其他标签(行内元素、块级元素都行)，比如: span标签，p标签，也可以是div标签。

1.7.2span标签

span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外)，不会另起一行显示。

span标签的宽度、高度都无法通过oss样式设置，它的宽高受其本身内容(文字、图片）控制，随着内容的宽高改变而改变; span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。

且,span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

1.7.3span和div的区别

div和span的区别是: div标签是块级元素，每个div标签都会从新行开始显示，占据一行; div标签内可以添加其他的标签元素(行内元素、块级元素都行)。而，span标签是行内元素，会在一行显示; span标签内只能添加行内元素的标签或文本。

1.7.4a标签作用

  1. 创建外部链接：通过 <a> 标签可以创建指向其他网页的链接。使用 href 属性指定链接的目标URL。
  2. 创建内部链接：通过 <a> 标签也可以创建指向同一网页中其他部分（如锚点）的链接。使用 href 属性配合锚点名称指定链接的目标位置。
<a href="#section1">跳转到第一节</a>

在页面中需要有对应的锚点：

<h2 id="section1">第一节内容</h2>

第二种方法

<a href="#锚点名">跳转到第二节</a>
<a name="锚点名">第二节内容</a>

3.a标签应用

<!-- href 属性表示要跳转的链接地址
    如果是一个网址，则前面必须加上协议（http//  https//）
    如果像跳转至本项目中的其他页面，则直接根据路径即可
    -->
    <a href="https://www.baidu.com/">百度一下，你就知道</a>

    <!-- target 属性的默认值为_self,表示当前页面中打开新页面
    _blank表示在新窗口中打开页面，原页面依然保留（典型的应用场景：在商品列表中跳转至商品详情页） 
    -->
    <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_2030767747_&utm_term=8d8a84e001cd42818fc142de3d9e08aa" target="_blank">购物，就来京东</a>
    <a href="https://www.google.cn/chrome/" target="_self">最强网站，网站的起源：谷歌Chrome下载</a>

    <!-- 链接可以是一个邮箱地址
         通过mailto:邮箱地址   可以调起本地的电子邮箱相关的应用
    -->
    <a href="3417319@qq.com">邮件</a>
    
    <!-- 调起本地qq进行聊天 -->
    <a href="tencent://message/?uin=16225385">聊天</a>

4.触发 JavaScript 动作：通过 <a> 标签可以绑定 JavaScript 代码，当用户点击链接时，将触发相关的动作。使用 href 属性指定一个 JavaScript 函数或表达式。

<a href="javascript:alert('Hello!')">点击弹出消息框</a>
    
    <!-- 调起本地qq进行聊天 -->
    <a href="tencent://message/?uin=16225385">聊天</a>

4.触发 JavaScript 动作：通过 <a> 标签可以绑定 JavaScript 代码，当用户点击链接时，将触发相关的动作。使用 href 属性指定一个 JavaScript 函数或表达式。

<a href="javascript:alert('Hello!')">点击弹出消息框</a>
bsf000000___
关注
HTML基础模板
qq_61690596的博客
07-18 2126
HTML基本模板，每个基础元素的内容和作用
html基础教程之HTML 标题
html基础教程
02-03 4524
HTML标题 在 HTML 文档中，标题很重要。 HTML 标题 标题（Heading）是通过 <h1> – <h6> 标签进行定义的. <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这...
HTML基础
内心不种满鲜花就会长满杂草
05-16 4808
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。type类型为hidden的为隐藏表单，在前端页面不可见，但是放置在form表单中进行传值的时候也默认会将value值进行传递。form表单用于将其他表单标签"包"起来，以便作为一个整体，将填写的数据提交到服务器。html文档的后缀为.html或者.htm，两种后缀没有区别都可以使用。-- 在此处写注释 -->
HTML基础教学
Skywalker10的专栏
05-25 8713
课题:HTML基础课时:8课时一、  教学目标1.  了解WEB静态网页结构。2.  掌握HTML网页布局。3.  掌握HTML中最常用的标签。4.  掌握CSS在标签中的用法。5.  掌握网络教程的学习及使用方法。6.  了解HTML语义化。二、    教学重点1.  掌握HTML网页布局。2.  掌握HTML中最常用的标签。3.  掌握CSS在标签中的用法三、    教学难点1. 如何运用HT...
全网最全HTML基础
a1085653724的博客
04-20 5185
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
HTML基础学习（全）
热门推荐
qq_44732593的博客
07-11 1万+
HTML概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： <HTML> <head> <title></title> </head> <body> &
HTML基础（超级详细）
weixin_58849785的博客
04-04 2503
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它通过标记符号来描述网页的结构和内容，是万维网（World Wide Web）的基础语言。HTML可以用来创建静态网页，也可以与JavaScript和CSS等技术结合，创建动态交互式的网页。HTML文档由各种元素（elements）组成，如标题、段落、列表、链接、图片等。自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
HTML基础之form表单
沃和莱特的博客
04-28 1万+
HTML基础之form表单
html基础-style样式
weixin_45958029的博客
09-28 6574
JavaScript是脚本语言，是属于HTML和web的编程语言，不需要编译直接执行。 JavaScript的实现分为三部分： 核心：ECMAScript=== 文档对象模型：DOM===Document Object Model，简称DOM 浏览器对象模型：BOM===Browser Object Model ，简称BOM ...
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4864
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础（新手入门教程）
华夏天骄
05-17 5174
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
HTML简单版的体育新闻案例
k_k_kkh的博客
10-17 408
h3>邀请赛夺冠、主帅开始变阵、放出潜力队员！天津男排新赛季有变化</h3><h3>库里16分布朗尼5中1 勇士大胜湖人季前赛5连胜</h3><h3>战术板｜半场射门0比9，国足赢在先手布局</h3>
asp.net core _ViewStart.cshtml 和 _ViewImports.cshtml
u013400314的博客
10-14 268
在 _ViewImports.cshtml 里引入的命名空间和 TagHelper 也会。_ViewStart.cshtml 在 MVC 应用程序中，当一个视图被请求时，运行，确保所有视图共享相同的命名空间和 TagHelper‌。在当页面设定 （如下），则表示 当前页面不引用布局模板。_ViewStart.cshtml 是默认模板，_ViewImports.cshtml 则在每个。里,相当于全局环境变量。
《Vue3 版本差异》Vue3.5+ 在组件或HTML元素绑定 ref 差异
最新发布
前端技术
10-17 336
写法的变化；在版上新增接口；
HTML 标签简写及全称
wjs2024的博客
10-17 446
和
《2024 前端面试全攻略：HTML、CSS、JavaScript、React 与 Vue 详解及常见问题解答》
weimengen的博客
10-14 1397
本文涵盖了 2024 年前端面试常见知识点，包括 HTML 和 CSS 的盒模型、居中方法、选择器等；JavaScript 的闭包、原型链、Promise 等；React 的核心概念、setState、条件渲染等；Vue 的响应式原理、生命周期、组件通信等。还详细阐述了 React 和 Vue 的区别与联系，以及前端性能优化和代码调试方法。
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值