html基础

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量93 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45309293/article/details/110824586
版权

html基本知识

html

基本格式

<!DOCTYPE html>
<html>
    <head>
    	<meta charset='utf-8'>
        <titel>个人名牌</titel>
    </head>
    <body>
        <h1>测试一下</h1>
        <p>测试完毕</p>
    </body>
</html>

html文档是由元素组成

在这里插入图片描述

html对象模型树

在这里插入图片描述

html文档的组织形式类似于树形

在head中包含：CSS样式、Javascript脚本、keyword等信息

在body中包含网页中会展示的内容信息

html中的常用标签

标题标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>

结果
在这里插入图片描述

段落标签

<p>这是一个段落标签</p>

结果
在这里插入图片描述

列表标签

1.有序列表

<ol>...</ol>

2.无序列表

<ul>...</ul>

3.列表项

<li>...</li>

示例：

<o1>
    <li>这是有序列表列表项</li>
    <li>这是有序列表列表项</li>
    <li>这是有序列表列表项</li>
    <li>这是有序列表列表项</li>
</o1>
<ul>
	<li>这是无序列表列表项</li>
    <li>这是无序列表列表项</li>
    <li>这是无序列表列表项</li>
    <li>这是无序列表列表项</li>
</ul>

结果：
在这里插入图片描述

超连接标签

<a href="跳转的目标">

示例

<a href="https://www.baidu.com">这会跳转到百度</a>

结果：点击后跳转到百度首页

容器标签

<div>...</div><!--块级容器-->
<span>...</span><!--行级容器-->

容器标签对页面没有任何影响，主要是为了标记哪一部分代码是一个模块，可以让代码更加整齐。

CSS

css层叠样式表，用于修改页面的样式

主要通过选择器的方式来修改页面的样式

选择器格式

选择器（可以是标签、id、class）{
	...样式设置
}

示例：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset='utf-8'>
        <titel>个人名牌</titel>
       	<style>
       		h1.ttt{
				color:blue
			}
       	</style>
    </head>
    <body>
        <h1 class="ttt">修改h1标签中的内容为蓝色</h1>
		<h2>h2中的内容不会收到影响</h2>
    </body>
</html>

在这里插入图片描述

可以直接在html中的head部分用style标签修改页面样式，也可以在head部分连接css文档修改页面样式。

链接语句

<link rel="stylesheet" href="css/css文件名">

常用的css属性

color:字体颜色

font-size:字体大小

background-colar：背景颜色

background-image:背景图片

…

css覆盖关系

html的元素属性会覆盖html文档中的css格式；html文档中的css格式会覆盖外部引入的css文件中的格式。

静态资源和动态资源

静态资源：内容是已经定好的，无论谁访问都不会发送改变。

动态资源：内容是服务器收到请求后生成的。可以根据不同的需求给予不同的内容。

静态、动态资源和文件格式无关，html可以是静态的，也可以是动态的；css可以是静态的也可以是动态的。

玄月望二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5画布树分形
limeiyans喜欢编程的那些事
01-18 1270
说明:刷新页面来查看不同的随机树 body { margin: 0px; padding: 0px; } function drawBranches(startX, startY, trunkWidth, level) { canvas = docum
HTML基础
11-02
HTML基础 ppt
树形结构+html+原生,构建树结构的HTML
weixin_32642109的博客
05-31 1539
背景业务需要的功能，接着上一个话题(扁平关系数据结构转换为深层关系数据结构)，把功能做下去。树结构不好解释，简单说就是一个目录的样子，一级又一级的管理。|-- 顶级1|--|-- 等级1次1|--|--|-- 等级1次1次1|--|--|-- 等级1次1次2|--|-- 等级1次2|--|-- 等级1次3|-- 顶级2然后在观察一下上图的目录结构，看起来很简单，每个列表都差不多。简单拆分为末端节点...
html基础-1-树形标签结构
Neptuneyut的博客
05-05 6213
文章目录html概述语法要素文档类型、字符编码和属性转义字符meta标签总体回顾参考 html概述 html的特征是基于标签识别渲染源码，更确切的说是标签树，都是从html这个根标签写起，其下常包括head和body两个处于同一级别的子标签，分别负责浏览器头部（可暂时理解为网址框）以及网页主体的设置。 <html> <!-- 注释 --> <head> ...
2021-05-16周日复习HTML成果。发现自己一个问题，笔记做得不好
qq_51082388的博客
05-16 127
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>周日学习</title> </head> <body bgcolor="darkcyan"> <!--标题标签<h1>标题1</h1> align是对齐属性 left center right--> <h
web中静态资源和动态资源的概念及区别
热门推荐
weixin_40122615的博客
11-09 3万+
1.静态资源和动态资源的概念 简单来说： 静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。 动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。 2.静态资源和动态资源的区别 a.静态资源一般都是设计好的h
HTML基础知识点
qq_40046544的博客
07-27 8614
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6061
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
全网最全HTML基础
a1085653724的博客
04-20 5058
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
HTML基础.xmind
12-07
HTML基础.xmind
html基础整理
04-19
整理一些html常用的基础的标签作用与其网页的展示效果非常基础，简单易懂
Web前端：HTML篇（四）头部head标签与样式表的导入
sjb2274540432的博客
07-24 985
样式表（Stylesheet）是一种用于定义网页内容外观和布局的文件。它通常与HTML文档一起使用，帮助开发者控制网页的视觉效果、排版、以及元素的呈现方式。最常见的样式表语言是CSS（Cascading Style Sheets，层叠样式表）。以下是样式表的一些主要特点和功能：（GPT说的）分离内容和表现：样式表允许将网页的内容（HTML）与其设计（CSS）分开，使得网站的维护和更新更加方便。例如，可以修改样式，而无需改变HTML结构。控制布局和外观。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1119
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2514
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 736
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1376
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
HTML基础：表单标记详解
本章节详细介绍了HTML基础知识中的表单标记，这是网页设计和交互的重要组成部分。HTML (HyperText Markup Language) 是一种描述性标记语言，非编程语言，主要用于构建网页结构和呈现内容。表单标记`<form>`是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值