HTML+CSS入门

最新推荐文章于 2024-08-01 09:59:14 发布

Regenerant

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量628

点赞数 23

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_80282876/article/details/136969152

版权

一、HTML

1.html的结构

.htm或.html文件

头部：浏览器、搜索引擎所需信息。

主体：网页中包含的具体内容。

文档类型：符合HTML5标准。

lang属性：搜索引擎。en英文，zh中文。

<meta>:元数据

charset属性：字符集编码方式

浏览器：UTF-8（所有语言，占用空间更小

是国际编码。

2.常用标签

（1）标题h1~h6

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

（2）段落p

    <p>段落</p>
	<p>段落</p>
	<p>段落内部文字忽略连续     空格,

	也不会显示空行，且不会换行。</p>

【空格字符&nbsp；（特殊字符，全小写）】

（3）段内换行br

<br />单独出现的标签，直接结束。

<p>这是一个段落。<br />注意规范的写法保留。</p>

（4）预留格式pre

定义预格式化的文本，文本中的空格和换行符会被保留。

    <pre>
		保留  空格

		和空行。
	</pre>

（5）段内分组span

组合行内元素，以便通过CSS样式来格式化。

<body>
	<style type="text/css">
		span{
			color: blue;
			font-weight:bold;
		}
	</style>
	<p>最新<span>中国人口调查报告</span>指出……</p>
</body>

（6）水平线<hr />

	<p>正文</p>
	<hr />
	<p>正文</p>

（7）注释

<!--注释可以

跨行-->

（8）超链接a

<a href ="网址">文字或图片</a>

链接到本站点其他网页 <a href ="news.html">新闻</a>

链接到其他站点 <a href ="http://www.baidu.com">百度</a>

虚拟超链接 <a href ="#">板块2</a>

（9）插入图像img

图像格式：JPG：有损压缩、颜色固定；

GIF：简单动画、背景透明；

PNG：无损压缩、透明、交错、动画。

	<img src="pta.jpg" alt="pta">

（10）区域div

	<div align="center">
		<h1>web前端开发</h1>
		<p>HTMl</p>
		<p>CSS</p>
		<p>JS</p>
	</div>

（11）列表ul ol li

无序列表 ul li

有序列表 ol li

【li 列表项】

（12）表格table tr td

eg: 二行三列表：table>tr*2>td*3

3.全局属性

（1）contentEditable 内容可编辑属性

设定该属性的内容也允许在页面中直接修改。

页面中修改只是临时修改，如果需要长期修改，需要以后学习JS和AJAX等技术配合。

<body>
	<ul contentEditable>
		<li>Regenerant</li>
		<li>Regenerant</li>
		<li>Regenerant</li>
		<li>Regenerant</li>
		<li>Regenerant</li>
		<li>Regenerant</li>
	</ul>
	<p>REGENERANT</p>
</body>

（2）designMode 页面可编辑属性（标签无法使用，只能JS用）

注意：当前属性不是任何标签的属性，而是文档的属性。如果文档设置该属性为on，那么页面中所有元素均可编辑。

	<script>
		document.designMode = 'on';
	</script>

4.<input>类型

文本框<input type="text">
密码<input type="password">
搜索<input type="search">
程度<input type="range">
单选框<input type="radio">
复选框<input type="checkbox">
颜色<input type="color">
选择文件<input type="file">

二、CSS

1.CSS引入方式

（1）行内样式表（不推荐）

（2）内嵌样式表

【即使有公共css代码，也是每个页面都要定义的】

【适合文件很少，css代码也不多的情况】

【如果一个网站有很多页面，每个文件都会变大，后期维护难度也大】

（3）外部样式表

【页面结构html代码与样式css代码的完全分离】

【维护方便】

【如果需要改变网站风格，只需要修改公共css文件】

【可以在同一个html文档内部引用多个外部式样表】

CSS优先级：

多重样式可以层叠，可以覆盖
样式的优先级按照“就近原则”
行内样式>内嵌样式>链接样式>浏览器默认样式

2.CSS选择器

id选择器
标签选择器
类选择器
伪类选择器
属性选择器
结构选择器

3.简单样式

（1）CSS单位

px-像素，cm-厘米，in-英寸，%-百分比，em-1em等于“当前元素”字体大小

（2）CSS颜色

red，blue，green——颜色名http://www.w3school.com.cn/
rgb(x,x,x)——RGB值，每个颜色分量取值0-255。红色rgb(255,0,0)，灰色rgb(66,66,66)
rgb(x%,x%,x%)——RGB百分比值0%-100%。红色rgb(100%,0%,0%)
rgba(x,x,x,x)——RGB值，透明度。
#rrggbb——十六进制数。红色#ff0000

（3）CSS文本属性

（4）CSS字体font

（5）CSS背景

（6）CSS超链接

链接的四种状态：

A:link 超链接的正常状态（没有任何动作前）
A:visited 访问过的超链接状态
A:hover 光标移动到超链接上的状态
A:active 选中超链接时的状态

按照以下次序：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

（7）CSS列表

（8）CSS表格

（9）CSS布局与定位

（10）盒模型

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。

4.简单定位方法

（1）文档流flow

元素分类：

block：独占一行，元素的height、width、margin、padding都可设置。<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form>
Inline：不单独占用一行，width，height不可设置。<span>、<a>
inline-block:同时具备inline元素、block元素的特点，不单独占用一行，元素的height、width、margin、padding都可设置。<img>

元素类型转换：

显示为inline元素 display：block
显示为inline元素 display：inline
显示为inline-block元素 display：inline-block
元素不会被显示 display：none

（2）浮动float

float属性：定义元素在哪个方向浮动，常用于div实现横向多列布局
取值：left，right，none
clear属性：规定元素的哪一侧不允许其他浮动元素
both，清除左右两边的浮动
left和right只能清除一个方向的浮动
none是默认值，只在需要移除已指定的清除值时用到

（3）层layer

像图像软件中的图层一样可以对每个layer能够精确的定位操作。

Position属性

static属性：默认值 top，bottom，left，right，z-index无效
fixed：固定定位相对于浏览器窗口进行定位 top，bottom，left，right，z-index有效
relative：相对定位，定位为relative的元素脱离正常的文档流中，但其在文档流中原位置依然存在。相对于其直接父元素进行定位 top，bottom，left，right，z-index有效
absolute：绝对定位，其在正常流中的原位置不再存在。相对于static定位以外的第一个父元素进行定位 top，bottom，left，right，z-index有效