HTML和CSS基础

最新推荐文章于 2024-07-25 15:07:09 发布
最新推荐文章于 2024-07-25 15:07:09 发布
阅读量120 收藏 1
点赞数
分类专栏： 前端知识及前端框架 文章标签： html 列表 css web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy971733014/article/details/103625293
版权

HTML和CSS

四、HTML结构

<!DOCTYPE html><!-- 文档声明 ，表示这是一个html页面-->
<html>
	<head><!-- 页面的头部 -->
		<title标题</title><!-- 标题 -->
	</head>
	<body><!-- html的主体 -->
		正文部分
	</body>
</html>

五、基本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!-- html基本标签 -->
		<i>字体倾斜</i><br>
		<b>字体加粗</b><br>
		<u>字体有下划线</u><br>
		<p>段落一</p><br>
		<p>段落二</p><br>
		<hr></hr><br><!-- 分割线 -->
		<h1>最大标题标签</h1><br>
		<h6>最小标题标签</h6><br>
		
		<!-- 修改文字 -->
		<font color="red">设置颜色为红色</font>
		
		<!-- 容器标签 -->
		<div style="background-color: yellow;">emmmmm....</div><!-- 占用的位置是一行 -->
		<span style="background-color: blue;">....emmmmm</span><!-- 内容有多宽就占用多宽的空间距离 -->
	</body>
</html>

六、超链接A标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	<!-- href : 写的是一个链接地址 -->
	
	<!-- 绝对路径并且在新窗口打开文档 -->
	<a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_blank">百度一下</a><br>
	
	<!-- 相对路径并且在本窗口打开文档
		./ 本目录
		../上一级目录
	 -->
	<a href="./01_html结构.html" target=""_self"">东京喰种链接</a>
	</body>
</html>

七、图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	<!-- src 属性  ： 资源路径(必须有)      jpg,bmp,png,gif
		 alt 属性： 图片资源找不到的时候显示文字提示
		 width 属性：设置图片宽度
		 heigth 属性：设置图片高度（只写一个属性，等比缩放） -->
	
	<img alt="" src="../image/djcz.jpg"><br>
	<img alt="图片不存在" src="../image/ch.jpg"><br>	
	<img alt="" src="../image/timg.gif"><br>
	<img alt="" src="../image/djcz.jpg" width="500px"><br><!-- 等比例缩放 -->
	<img alt="" src="../image/djcz.jpg" width="500px" height="300px">
	</body>
</html>

八、列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	<!-- 无序列表 -->
	<ul>
		<li>银时</li>
		<li>新八</li>
		<li>神乐</li>
	</ul><dr>
	
	<!-- 无序嵌套列表 -->
	<ul>
		<li>芳村</li>
		<li>利世</li>
		<li>分类
			<ul>
				<li>羽赫</li>
				<li>鳞赫</li>
			</ul>
		</li>
	</ul><dr>
	
	<!-- 有序列表 -->
	<ol>
		<li>银时</li>
		<li>新八</li>
		<li>神乐</li>
	</ol><dr>
	
	<!-- 定义列表 -->
	<dl>
		<dt>猪皮</dt>
		<dd>曼基康短腿猫</dd>
		<dt>中分</dt>
		<dd>中华田园猫</dd>
	</dl>
	</body>
</html>

九、表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!-- 表格默认是没有边框的，cellspacing将单元格合并 -->
		<table border="1" width="700px" align="center" cellspacing="0px">
			<caption>表格</caption><!-- 定义表格标题 -->
			<tr style="height: 30px"><!-- 代表一行,设置行高 -->
		    	<th>一</th><!-- 定义表格的表头，效果为加粗居中 -->
		    	<th>二</th>
		    	<th>三</th>
		    	<th>四</th>
		 	</tr>
			<tr style="height: 30px">
				<td></td><!-- 代表一列 -->
				<td rowspan="2"></td><!-- 代表跨行 -->
				<td></td>
			</tr>
			<tr style="height: 30px">
				<td>最后&emsp;一行!</td><!-- 中文空格 -->
				<td></td>
				<td colspan="2"></td><!-- 代表跨列 -->
				<td></td>
			</tr>
			<tr style="height: 30px">
				<td>最后&nbsp;&nbsp;&nbsp;一行！</td><!-- 英文空格 ，三个英文空格等于一个中文空格-->
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

十、表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<form action="#" method="get">
			<!-- 单行文本输入框 -->
			用户名 ： <input type="text"><br>
			<!-- 密码输入框 -->
			密码 ： <input type="password"><br>
			<!-- 单选框， name分组，name一样就是一组 -->
			性别 ：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>
			<!-- 复选框  -->
			爱好 ：<input type="checkbox">篮球<input type="checkbox">游泳<input type="checkbox">跑步<br>
			<!-- 隐藏控件,中转数据 -->
			<input type="hidden"><br>
			<!-- 文件选择控件 -->
			<input type="file"><br>
			<!-- 图片提交按钮 -->
			<input type="image" scr="../image/djcz.jpg"><br>
			<!-- 下拉框 -->
			省份 <select>
					<option>四川省</option>
					<option>江苏省</option>
					<option>浙江省</option>
			</select>
			城市 <select>
					<option>成都市</option>
					<option>德阳市</option>
					<option>绵阳市</option>
			</select><br>
			<!-- 单行文本输入框 
			Rows: 代表行（多少个字符）
			Cols:代表列（多少个字符）
			-->
			简介 ：<textarea rows="10" cols="50"></textarea>
			<!-- 按钮主要是配合js页面脚本代码 -->
			<!-- 普通按钮 -->
			<input type = "button"  value = "来按一下">
			<!-- 重置按钮 -->
			<input type = "reset"  value = "重置表单">
			<!-- 提交按钮 -->
			<input type = "submit"  value = "提交表单">
		</form>
	</body>
</html>

十一、CSS选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
		/* 	<!-- 通用选择器 -->
			*{
			background-color:blue;
			} */
			/* <!-- 标签选择器 -->
			div{
			background-color:blue;
			} */
			/* <!-- 类选择器 -->
			.a{
			background-color:blue;
			} */
			<!-- id选择器 -->
			/* #b{
			background-color:blue;
			} */ 
		</style>
	</head>
	<body>
		<div class="a">A</div>
		<div id = "b">B</div>
		<div>C</div>
		<div>D</div>
	</body>
</html>

十二、引用、继承与优先级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../css/css.css">
		<style type="text/css">
			#c{
			color: yellow !important;
			}
		</style>
	</head>
	<body>
	<!-- 就近原则
	!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 -->
		<span style="color: red;">A</span>
		<span>B</span>
		<span style="color: red" id = "c">C</span>
		<span>D</span>
	</body>
</html>
a.过去现在时。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML和Css的学习
SYX_lh的博客
10-19 3590
学习HTML和Css
HTML+CSS基础面试题总结
yueu11的博客
05-16 2151
1. display:none; 和visibility:hidden;的区别 display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。 visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。 2.CSS 选择器权重如何计算 就近原则：直接选中的，一定比继承的权重大。 一样近，比权重： id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。 行内 > 内嵌 = 外联 > 导入 !importa
HTML+CSS学习总结
weixin_53351919的博客
06-26 2808
html+css学习总结
CSS基础（超详解）
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
HTML与CSS基础笔试和期末题库
qq_51066068的博客
07-01 6258
1.使用文本编辑器编辑完HTML后，扩展名可以是__html___或___htm__。 2.表格的标签是____table______，单元格的标签是____td______。 3.在编辑table表格时，合并行使用 __rowspan_____合并列使用_____colspan____。 4.在CSS层叠样式表当中经常用到的三种选择器：___元素选择器___、__类选择器__、__id选择器__。...
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
html，css和js
weixin_44985964的博客
11-30 4726
访问某个变量。没有被定义创建函数/函数声明/函数定义function 函数名（形参列表）{函数体return 返回值；}
CSS基础
书启鸿蒙知秋枫
12-28 5966
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
讲解HTML和CSS（超详细）
Jinmuyan_的博客
05-06 1万+
讲解HTML和CSS（超详细）一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结 提示：以下是我的一些经验之谈，下面案例可供参考 一、初始HTML和CSS 1.html的发展历史 HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0 – 1995年11月作为RFC 1866发布，在RFC 2854于2
前端基础之CSS扫盲
trong_ 的烂笔头
02-27 7036
光使用HTML来写一个前端页面的话其实只是写了一个大体的框架, 整体的页面并不工整美观, 而CSS可以在HTML的基础之上将页面优化的非常好看, HTML只是描述了网页的结构和有什么内容(也就是让网页有了 “骨”), 而CSS可以自由的设置网页的布局和样式(包括大小/位置/字体/颜色/背景等), 可以让网页的内容充实起来(让网页有了 “皮和肉”), CSS也叫层叠样式表, 一个元素可以运用多组样式, 有多层叠加的效果.
好知网（html和css基础考试试题）.rar
08-24
【HTML与CSS基础知识点详解】 HTML（HyperText Markup Language）是网页内容的结构化语言，而CSS（Cascading Style Sheets）则是用于控制网页样式并实现布局的技术。这两个核心技术是构建任何现代网页的基础。 1. ...
HTML-CSS基础课程：HTML和CSS基础课程
02-11
HTML和CSS基础课程 程序 在本课程中，我们将涵盖以下主题 基本概念和HTML5中的第一个原型，输入，按钮，图像以及W3C的验证。 在我们的项目中添加CSS，度量，颜色和字体。 盒子造型I. 作坊。 响应式设计和媒体...
html+css基础代码
06-16
本资料包“html+css基础代码”显然是为了帮助初学者理解这两门语言的基础知识。 HTML是一种标记语言，它使用一系列预定义的标签来告诉浏览器如何呈现网页内容。例如，`<html>`标签定义整个HTML文档的开始，`<head>`...
html和css学习心得.doc
12-21
HTML和CSS基础知识 在学习Web前端开发时，HTML和CSS是两个基础知识点。HTML（HyperText Markup Language）是一种标准通用标记语言，用来创建网页；CSS（Cascading Style Sheets）是一种样式表语言，用来控制网页的...
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2744
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
CSS 的工作原理
07-25 1158
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1896
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
2024浙江省行政区划矢量图层-省市县乡镇四级行政区划数据下载-带python代码
最新发布
08-02
2024最新浙江省行政区划矢量图层数据，包含省、市、县、乡镇四级行政区划数据下载，附带shp转geojson的python代码
HTML和CSS基础资料
06-11
CSS基础： 1. CSS选择器：CSS选择器用于选择要应用样式的HTML元素。例如，#id选择器选择具有指定ID属性的元素，.class选择器选择具有指定类名的元素。 2. CSS属性：CSS属性用于定义元素的样式。例如，color属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值