HTML+CSS理论篇

最新推荐文章于 2022-01-11 17:21:40 发布
最新推荐文章于 2022-01-11 17:21:40 发布
阅读量243 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwl3190217171/article/details/112254101
版权

一、html 初级篇 - 基础标签

<html lang="en,zh">
<head>
	<meata charset="utf-8">
	<title>淘宝网，淘，呸！</title>
	<meta content="服装" name="keywords">
	<meta content="这是一个你穿了就不想脱的衣服" name="description">
</head>

<body>
	<!--告诉搜索引擎爬虫，我们网站是关于什么内容的 -->
	<p>this is paragraph!!!</p><p>this is paragraph!!!</p><p>this is paragraph!!!</p>
	www.xwl.com

	h${标题}*6
	<strong>加粗</strong>
	<em>斜体</em>
	<del style="color: #999">￥50</del>
	<address>安徽省六安市霍邱县,web coffce</address>

	<div>举个例子</div><div>举个例子</div><div>举个例子</div><div>举个例子</div>

	<span>举个石头</span><span>举个石头</span><span>举个石头</span><span>举个石头</span>

	<div style="color: #999 ">
		<strong>加粗</strong>
		<em>斜体</em>
	</div>
</body>
</html>

运行效果

小结：

“SEO：搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益。SEO包含站外SEO和站内SEO两方面。”

gb2312中文简体\gbk中文且有繁体\unicode万国码\utf-8万国码升级版

<div></div>,<span></span>容器功能，捆绑操作

 

 

 

 

二、html 进阶篇 - 高级标签

空格、回车在HTML中是文字分隔符

&nbsp       空格

&lt 小于     (less than)

&gt 大于（great than)

单标签<br>       换行

单标签<meta>

单标签<hr>     水平线

 

有序列表：type属性有：1，A，a，i，I

<ol type="a">
        <li>marvel</li>
        <li>速度8</li>
        <li>返老还童</li>
        <li>了不起的比尔盖茨</li>
 </ol>

 

倒序

<ol type="a" reversed="reversed">
        <li>marvel</li>
        <li>速度8</li>
        <li>返老还童</li>
        <li>了不起的比尔盖茨</li>
    </ol>

 

<ol type="a" start="2">
        <li>marvel</li>
        <li>速度8</li>
        <li>返老还童</li>
        <li>了不起的比尔盖茨</li>
    </ol> 

 

    <img src="https://p.qpic.cn/qqconadmin/0/64c2070d0d1a494cac68e8a36e1323d1/0" style="width: 200px;" alt="这是范爷" title="this is fanye">
    <!--     1.网上url
    2.本地的绝对路径
    3.本地的相对路径-->
    <!-- alt 图片占位符-->
    <!--title 图片提示符 -->

target在新标签打开  

//Anchor 锚点

 //1.超链接；2，锚点；3.打电话；4.协议限定符

form表单

<form method="get" action="">
        <p>
            username:<input type="text" name="username">
        </p>
        <p>password:<input type="password" name="password"></p>
        <input type="submit">
    </form>

发送数据需要有数据名name和数据值value

 

<input type="radio" name="star">；这里input type可以是radio单选或者checkbox复选，name:定义哪些是一个选择题选项

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	你们喜欢看的电影
	<ol type="a" start="2">
		<li>marvel</li>
		<li>速度8</li>
		<li>返老还童</li>
		<li>了不起的比尔盖茨</li>
	</ol>

	<ul type="circle">
		<li>天猫</li>
		<li>聚划算</li>
		<li>天猫超市</li>
	</ul>

	<img src="https://p.qpic.cn/qqconadmin/0/64c2070d0d1a494cac68e8a36e1323d1/0" style="width: 200px;" alt="这是范爷" title="this is fanye">
	<!-- 
	1.网上url
	2.本地的绝对路径
	3.本地的相对路径-->
	<!-- alt 图片占位符-->
	<!--title 图片提示符 -->

	<a href="https://www.baidu.com">www.baidu.com </a>
	<a href="https://www.baidu.com" style="width:100px;height: 100px;display: block;background:red" target="_blank"> </a>
	<!--target在新标签打开 -->
	//Anchor 锚点
	//1.超链接；2，锚点；3.打电话；4.协议限定符
	<div id="demo1" style="width:100px;height: 100px;background: : green">demo1</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

	<div id="demo2" style="width:100px;height: 100px;background: : red">demo2</div>
	<a style="display:block;position:fixed;bottom: 100px;right: 100px;height:50px;border: 1px solidblack"href="#demo1">find demo1</a>
	<a style="display:block;position:fixed;bottom: 200px;right: 100px;height:50px;border: 1px solidblack"href="#demo2">find demo2</a>

	<a href="tel:13349003030">给龙哥打电话</a>
	<a href="mailto:3190217171@qq.com">给龙哥发邮件</a>

	<a href="javascript:while(1){alert('让你手欠')}">你点我试试呀！come on! 来呀！</a>


	<form method="get" action="">
		<p>
			username:<input type="text" name="username">
		</p>
		<p>password:<input type="password" name="password"></p>
		<input type="submit">
	</form>

选择你喜欢的女明星
	1.迪丽热巴<input type="radio" name="star" value="dilireba">
	2.古力娜扎<input type="radio" name="star" value="gulinazha">
	3.马尔扎哈<input type="radio" name="star" value="maerzhaha">
	<input type="submit">


	<p>
		username:<input type="text" name="username" style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if (this.value=='') {this.value='请输入用户名';this.style.color='#999'}">
	</p>

</html>

checked,默认选中

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form method="get" action="">
	<h1>
		Choose Your SEX!!!
	</h1>
	male:<input type="radio" name="sex" value="male" checked="checked">
	female:<input type="radio" name="sex" value="female">
	<br>
	<input type="submit">
	</form>
</body>
</html>

多选

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form method="get" action="">
<h1>
		choose your fruit!!!
	</h1>
	apple:<input type="checkbox" name="fruit" value="apple">
	orange:<input type="checkbox" name="fruit" value="orange">
	banana:<input type="checkbox" name="fruit" value="banana">
	<input type="submit">
		</form>
</body>
</html>

select表单

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form method="get" action="">
	
	<h1>
		Province
	</h1>
	<select name="Province">
		<option value="beijing">beijing</option>
		<option value="shanghai">shanghai</option>
		<option value="tianjin">tianjin</option>
	</select>
	<br>
	<input type="submit">
	</form>
</body>
</html>

 

市面上主流浏览器的内核有哪些？

 

 

 HTML        结构

CSS           样式

JavaScript 行为

终于HTML主要标签告一段落了！

 

三、css初级篇-css引入css基础选择器权重

cascading style sheet          层叠样式表

1引入CSS

1.1、行间样式

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!-- 引入CSS
	1.行间样式 -->
	<div style="
	width: 100px;
	height: 100px;
	background-color: red;
	">
		
	</div>
</body>
</html>

1.2、页面级CSS

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
<!-- 	2.页面级CSS -->
	<div>
	</div>
</body>
</html>

1.3、外部CSS文件

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 	3.外部CSS文件 -->
	<div></div>
</body>
</html>

新建lesson3.css

div{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: black;
}

异步加载

2选择器

2.1 id

#only{
	background-color: red;

}

#only1{
	background-color: green;
}
<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<form method="get" action="">
<!-- 1.选择器 -->
<div id="only">123</div>
<div id="only1">234</div>
</body>
</html>

2.2 class

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<form method="get" action="">
<!-- 2.class -->
<div class="demo">123</div>
</body>
</html>
#only{
	background-color: red;

}

#only1{
	background-color: green;
}

.demo{
	background-color: yellow;
}

class 多对多

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<form method="get" action="">
<!-- 2.class -->
<div class="demo">123</div>
<div class="demo demo1">234</div>
</body>
</html>
#only{
	background-color: red;

}

#only1{
	background-color: green;
}

.demo{
	background-color: yellow;
}
.demo1{
	color: #f40;
}

 2.3标签选择器

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 3.标签选择器 -->
<div>123</div>
<div>234</div>

</body>
</html>
div{
	background-color: black;
}

2.4通配符

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>

<!-- 
4.通配符 -->
</body>
</html>

 

*{
	background-color: green;
	
}

优先级：！important>行间样式>id>class|属性>标签选择器>通配符

CSS权重（256进制）

！important                       Infinity

行间样式                           1000

id                                        100

class|属性|伪类                   10

标签|伪元素                          1

通配符                                   0

 

神圣雅诗人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML网页设计原理是什么,HTML+CSS网页设计详解
weixin_29146779的博客
05-31 841
HTML+CSS网页设计详解编辑锁定讨论上传视频《HTML+CSS网页设计详解》是2013年12月1日清华大学出版社出版的图书，作者是任昱衡。书名HTML+CSS网页设计详解作者任昱衡ISBN9787302343202定价53.80元出版社清华大学出版社出版时间2013年12月1日[1]HTML+CSS网页设计详解内容简介编辑《HTML+CSS网页设计详解》[2]主要介绍页...
HTML+CSS基础（HTML篇）
Panda_Program的博客
09-01 1806
1、了解HTML、CSS、JavaScript 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容...
html+css notes (ongoing 20/4/12)
weixin_45743001的博客
03-03 543
HTML+CSS 笔记 注释 <!-- 注释内容 --> 元素 <a>内容</a> 超链接 <a href="https://www.baidu.com" title="baidu">百度</a> 属性的种类 全局属性：title 局部属性: 元素的种类 空元素：没有结束标记 <meta charset="UTF-8">...
B01_html+css理论
岛主
06-18 142
html的3大重点：表单、表格、超链接 css的4大中重点：盒装模型、div+css、span+css、…
HTMLl和CSS基本知识点
weixin_30412167的博客
05-31 92
1.HTTP:超文本传输协议　　HTTP请求（HTTP request）部分： 　　　　请求行【HTTP方式（get或者post）；请求url；HTTP版本】 　　　　请求头 　　　 空行 　　　　消息体 　　HTTP响应（HTTP response）部分：　　　 　　　...
HTML与CSS 5天的理论知识汇总
JJ_Zhangjian的博客
06-10 362
总结： 1. web前端 - HTML: 负责搭建页面结构和内容 （盖房子 毛坯房） - CSS: 负责美化页面 （装修） - JavaScript:负责给页面添加动态效果和动态内容 - JQeury: 是一个js框架，为了简化js开发而生 2. 数据库 待更新 html学习内容 1:主要学习有哪些标签（tag或标...
HTML+CSS基础（CSS篇下）
Panda_Program的博客
09-03 612
CSS格式化排版 === ##1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字
大学生网页制作之美食篇html+css静态网页设计
06-14
在“大学生网页制作之美食篇html+css静态网页设计”这个项目中，学生将学习如何运用HTML、CSS以及JavaScript这三种基础的Web开发技术来创建一个以美食为主题的静态网页。这个设计实例对于初学者来说非常实用，因为它...
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
HTML5、CSS3和JavaScript是现代网页开发的三大核心技术，它们共同构建了互联网上丰富多彩的交互式用户体验。这篇教程结合源代码，旨在帮助初学者快速入门这三门语言，并掌握实际开发技能。 HTML5（HyperText Markup...
html+css传智播客老师整理7天的笔记
01-04
HTML和CSS是构建网页设计与布局的两大核心技术。HTML（HyperText Markup Language）负责结构化内容，而CSS（Cascading Style Sheets）则用于样式化这些内容，使其呈现出丰富多彩的视觉效果。这篇7天笔记由传智播客的...
HTML+CSS+JavaScript快速入门+实战演练
01-08
HTML、CSS和JavaScript是构建网页和交互式用户体验的三大核心技术。这篇文章将为你提供一个快速入门的框架，并通过实战演练帮助你巩固所学。 首先，HTML（HyperText Markup Language）是网页内容的基础，它定义了...
运行emqx start 打开浏览器输入localhost：18083提示拒绝了我的请求
神圣雅诗人
01-11 9973
我是运行emqx start 打开浏览器输入localhost：18083提示拒绝了我的请求 检查本地的情况 这里说两个cmd命令行检验127.0.0.1和localhost是否可用的命令 ping 127.0.0.1 ping localhost 发现127.0.0.1可以ping通，但是localhost不通 解决方法 1.打开控制面板，搜索“程序”，点击“启动或关闭Windows功能”! 2.把下面的IIS的勾选上（需要把子目录全部打开，全部勾完，这里才会显示勾，要是子目录没有勾完，这里显示的是一个
uni-app框架
神圣雅诗人
07-02 1371
https://uniapp.dcloud.io/ 环境安装 全局安装vue-cli npm install -g @vue/cli 创建uni-app 使用正式版（对应HBuilderX最新正式版） vue create -p dcloudio/uni-preset-vue my-project 使用alpha版（对应HBuilderX最新alpha版） vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project 此时，
图床，一组图片统一路径的解决方案
神圣雅诗人
06-21 285
Image Upload - SM.MS - Simple Free Image Hosting 100 - 路过图床 聚合图床 - 免费无限图片上传 https://github.com/Molunerfinn/PicGo/releases GitHub 在此，我们就拿 GitHub 作为图床来说一下具体用法。由于在国内访问 GitHub 速度不是很快，不过如果你有特殊工具或者适应这样的速度的话，那就不妨使用一下，这是个不错的选择 首先登陆 GitHub，新建一个仓库或者也可以使用一个已有
小程序默认样式
神圣雅诗人
08-25 158
1.swiper标签存在默认宽度和高度 100% * 150px 2.image标签存在默认宽度和高度 320px * 240px 3.设计图片和轮播图 先看一下原图的宽高：750*340，让图片的高度自适应，宽度等于100%，让swiper标签的高度变成和图片的高一样 4.图片标签 mode属性 渲染模式 widthFix ...
WEB开发-tomcat基础
神圣雅诗人
01-31 144
Tomcat的配置和部署 一、Tomcat的简介和作用 二、部署Tomcat和目录介绍 三、配置，启动Tomcat
IDEA快捷键
神圣雅诗人
02-11 136
IDEA快捷键

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神圣雅诗人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值