当前位置:首页 > css相关 > 正文内容

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS


(一) HTML5:超文本标记语言


1) :基本概念

Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )
Ö这些标签以<标签名称>的形式出现,用于标记文本内容的含义
Ð浏览器通过元素标签解析文本内容并将结果显示在网页上,而元素标签本身并不会被浏览器显示出来

 


2): 基本结构

HTML5元素的内容一般以起始标签<元素名>开始,以结束标签</元素名>终止
<!Doctype html>
<html>
	<head>
<title>这里是一个网页的标题</title>
   		......
	</head>
<body>
   	这里是一个网页的主体内容
</body>
</html>




DOCTYPE是Document Type的简写,含义为文档类型。

HTML5文档基础结构中第一行就是HTML5的DOCTYPE声明

<html> </html> Html文件开始标签和结束的标签——文档的根标签

<head> </head> 指定html文档的一些属性,例如页面标题,字符集和关键字等-

 


<title> </title> 网页标题标签,即被收藏以及搜索引擎中搜索出的名称
<meta.../> 元数据标签,不显示,但是机器可读,常用于搜索引擎索引(SEO优化)

字符集声明(网页编码声明) <meta charset="utf-8">
关键词声明 <meta name="keywords" content="Xx,Xx,Xx" />
页面描述声明 <meta name="description" content="This is a page about html5" />


<style> </style>
可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各类样式信息
Eg:<style> p{color:read} </style>


<link.../> 链接标签
标签用于连接外部资源和当前HTML5文档,它只出现在首部标签 <head> </head>中,通常用于连接外部样式表
Eg:<head> <link rel="stylesheet" hred="test.css"/> </head>


<script> </script>
此标签为可选,取决于当前页面是否需要使用脚本内容,比如JavaScript。该标签可以直接引用外部脚本文件,也可以直接将脚本命令写在<script> </script>标签中
<head> <script src="test.js"></script> </head>


<body> </body>显示在页面上的内容都写在body里面

 


3) 基本规范

♠ HTML5使用<!--...-->标签为文档进行注释 (多行或者单行)

♠ 早期的HTML规范中,标签的大小写是不敏感的,可能存在大写标签的情况

万维网联盟(W3C)明确规定了在新版本HTML5中必须使用小写格式,包括元素标签本身和其中可能出现的属性均需要遵守此规范

♠ 一些标签,没有结束标签 ,在标签内结束

→比如 换行 <br/>(一般来说加上/更加标准)
→XML规范中,所有的标签都必须有结束标签

♠ 在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号(<)和大于符号(>)是无法直接输出的,因为它们会被误认为是元素标签的组成部分;而连续空格也无法正确显示,会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体(Character Entities)

html的操作思想 (理解即可)

网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装起来),通过修改标签的属性值实现标签内数据样式的变化。一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容 器的属性值,就可以实现容器内数据样式的变化。

 


4) 常用标签

1. 文字标签:修改文字样式

<font> </font>

属性:
	size:   文字的大小 取值范围 1-7,超出了7,默认还是7
	face:  <font  face="字体名称:">文字</font>
	color: 文字颜色 (两种表示方式)

	英文单词:red  green  blue  black  white  yellow

	使用十六进制数表示 #ffffff :  RGB




2. 标题标签、段落标签、换行标签、水平线标签和特殊字符

A:标题标签

<!-- h1 到 h6 大小依次变小,同时自动换行-->
<h1></h1>  <h2></h2>  <h3></h3> .......<h6></h6>



B:段落标签

 

p元素有多种属性,比较常用的是对齐方式align属性

<P align="center">一段居中的文字</P>
<P align="right">一段居右的文字</P>



C:换行标签


<br>

换行标签<br>用于在当前位置产生一个换行,相当于一次回车键所	产生的效果。该标签单独使用,无结束标签
建议使用该标签代替回车键,因为回车键所产生的多个连续换行会被浏览器自动省略

<br>标签每次只能换一行,如需多次换行,必须写多个<br>标签



D:特殊字符

<	&lt;
>	&gt;

空格	&nbsp;

&	&amp;




3. 文本格式标签

A. 字体标签  	<font>
B. 斜体字标签	<i>
C. 粗体字标签	<b> 和 <strong>
D. 上标标签、下标标签	<sup> 和 <sub>
E. 修订标签		<del> 和 <ins>
F. 预格式化标签	<pre>



4. 列表标签

<!-- 无序列表 -->
<ul>
	<li>无序列表项1</li>
	<li>无序列表项2</li>
</ul>


<!-- 有序列表 -->
<ol>
	<li>有序列表项1</li>
	<li>有序列表项2</li>
</ol>




 

TYPE取值设置的符号样式
1以数字进行排列 ,系统默认
a以小写字母排列
A以大写字母排列
i以小写的罗马数字排列
I以大写的罗马数字排列
disc圆点符号,系统默认
circle空心原点
square空心方块

 

<!-- 定义列表 -->
<dl>
<dt>第一个词条
<dd>第一个词条的定义
	......
</dt>
</dl>



5. 图像标签

<img src="图片的路径"/>
语法结构为:
<img src="url" alt="替代文本" name="名字" width="宽度" 	height="高度" border="边框” >
src:图片的路径
width: 图片的宽度
height:图片的高度
alt: 图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容
有些浏览器下不显示(没有效果)



6. 绝路径和相对路径

相对位置输入方法举例
同一目录直接输入链接的文件a.html
链接上一目录先输出 “../” 再输入文件名../b.html
链接下一目录输入目录和文件名,之间以 “/" 分隔test/c.html


7. 超链接标签



A: 链接资源

<a href="链接到资源的路径"> 显示在页面上的内容  </a>


href: 链接的资源的地址
target:设置打开的方式 ,默认是在当前页打开
可以取四个值



属性值表示的含义
_parent在上一级窗口打开(常在框架页面中使用)
_blank新建一个窗口打开
_self在同一窗口打开,是默认取值
_top忽略所有的框架结构,在浏览器的整个窗口打开

 


B: 定位资源

<!-- 如果想要定位资源:定义一个位置 -->
<a name="top">顶部</a>

<!-- 回到这个位置 -->
<a href="#top">回到顶部</a>



8. 移动文字标签

<marquee>移动文字内容</marquee>


属性功能说明属性取值各属性值的功能
behavior设置文字的移动方式Scroll、Slide、alternate循环移动、移动一次停止、来回交替移动
direction设置文字的移动方向left、right、up、down从右向左移动、从左向右移动、从下向上移动、从上向下移动
bgcolor设置文字的背景颜色英文颜色名称表示所用颜色
width设置文字背景的宽数字 (或者百分比)设置背景的绝对宽度
heigth设置文字背景的高数字 (或者百分比)设置背景的绝对高度
hspace和vspace设置文字背景和周围其他元素的空白间距数字设置文字背景和周围其他元素的空白间距的绝对值
loop设置移动文字的循环次数infinite、正整数文字移动无限次、文字移动n次
sscrollmount设置移动文字每次移动的距离数字(默认单位px)文字每次移动的距离
scrolldelay设置移动文字每次移动后的间歇时间数字(默认单位px)文字每次移动后的间歇时间

 



9. 表格标签

可以对数据进行格式化,使数据显示更加清晰,可用于静态页面和动态页面的排版

<table></table>: 表示表格的范围
	width:宽度
	border:边框
	cellpadding:定义内容和单元格的距离
	cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
	bgcolor:背景色
	align:对齐方式
		tr:定义行
			bgcolor:背景色
			align:对齐方式
		td:定义单元格
			colspan:合并列
			rowspan:合并行
	<caption></caption>:表格的标题



10. 表单标签

概念:用于采集用户输入的数据,用于和服务器交互,例如登录或者注册界面

<form></form>: 定义一个表单的范围

属性
action 指定提交数据的URL,默认提交到当前页面
method 指定表单提交方式,常用的有两种,get(默认)和post



简单说一说: get和post区别?

1、get请求地址栏会携带提交的数据,post不会携带

2、get请求安全级别较低,post较高

3、get请求数据大小的限制,post没有限制

 

输入项:可以输入内容或者选择内容的部分

大部分的输入项 使用  <input type="输入项的类型"/>

在输入项里面需要有一个name属性

普通输入项:<input type="text"/>
密码输入项:<input type="password"/>
单选输入项:<input type="radio"/>
复选输入项:<input type="checkbox"/>
			<!-- 
			  在里面需要属性 name
			  name的属性值必须要相同
			  必须有一个value值
			  实现默认选中的属性 
			  checked="checked"
			-->
文件输入项 <input type="file"/> (后面上传时候用到)
下拉输入项 (不是在input标签里面的)
	<select name="birth">
		<option value="1991">1991</option>
		<option value="1992">1992</option>
		<option value="1993">1993</option>
	</select>

	- 默认选择
		selected="selected"
文本:<textarea cols="10" rows="10"></textarea>
隐藏项(不会显示在页面上,但是存在于html代码里面):<input type="hidden" />
提交按钮:<input type="submit"/>
		<input type="submit" value="注册"/>
使用图片提交:<input type="image" src="图片路径"/>
重置按钮: 回到输入项的初始状态:<input type="reset"/>
普通按钮:<input type="button" value=""/>



11. 容器标签

A. <div>标签

标签<div>可将网页页面分割成不同的独立部分,通常用于定义文档中的区域或节。
该标签是一个块级元素(block 	level element),浏览器会自动在<div>和</div>所标记的	区域前后自动放置一个换行符。每个标签可有一个独立的id号。
同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等。


B. <span>标签

标签<span>通常作为文本的容器,它没有特定的含义和样式,只有与CSS同时使用才可以为指定文本设置样式属性。
该标签是一个内联元素(inline element),与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。




(二) 层叠样式表


多个样式可以作用在同一个html元素上,使得页面效果更加好,CSS将网页内容和显示样式进行分离,降低耦合度,提高了开发效率

 

(1) CSS和html结合的方式


内联样式在每个html标签上面都有一个属性 style,把css和html结合在一起

<div style="background-color:red; color:green;">



内部样式使用html的一个标签实现<style>标签,写在head里面


<style type = "texy/css">
 div{
     background-color:blue;
     color:red;
 }
</style>



补充样式style标签里面 使用语句(在某些浏览器下不起作用)


<style type="text/css">
	@import uel(div.css);
</style>



外部样式使用头标签 link,引入外部css文件,第一步 ,创建一个css文件


<link rel="stylesheet" type="text/css" href="css文件的路径"/>




一般使用第四种方式

优先级(一般情况)

由上到下,由外到内。优先级由低到高。

后加载的优先级高

 


(2) CSS的基本选择器

含义:要对哪个标签里面的数据进行操作

 


Θ标签选择器

使用标签名作为选择器的名称

div {
background-color:gray;
clolr:white;
}



Θ class选择器(div.ideal)

每个html标签都有一个属性 class


<div class="ideal">test</div>
 .ideal {
background-color:orange;
}



Θ id选择器 (div#ideal)

每个html标签上面有一个属性 id

<div id="ideal">test</div>
#ideal {
background-color:#333300;
}



优先级:style > id选择器 > class选择器 > 标签选择器

 


(3) CSS的扩展选择器

Θ 关联选择器(调用加空格)

<div><p>test</p></div>

设置div标签里面p标签的样式,嵌套标签里面的样式

div p {
background-color:orange;
}



Θ组合选择器


<div>aaa</div>
<p>bbb</p>

把div和p标签设置成相同的样式,把不同的标签设置成相同的样式	

div,p {
background-color:orange;
}



ΘCSS的盒子模型

在进行布局前需要把数据封装到一块一块的区域内(div)

—边框

border: 2px solid blue;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right



—内边距


padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距



—外边距


margin: 20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距



—float:浮动


left:文本流向对象的右边
right:文本流向对象的左边



布局定位


position:
	属性值
	absolute :
		将对象从文档流中拖出
		可以是top、bottom等属性进行定位
	relative :
		不会把对象从文档流中拖出
		可以使用top、bottom等属性进行定位



∉ 到这里没有了∋

扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/40.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

三剑客实战之Css入门基础知识一[语法基础之选择器]

三剑客实战之Css入门基础知识一[语法基础之选择器]

CSS 语法CSS 规则集(rule-set)由选择器和声明块组成:选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。多条 CSS 声明用分号分隔,声...

三剑客实战之Css入门基础知识[css控制颜色]

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。CSS 文本颜色下面是简单设置文本的颜...

 三剑客实战之Css入门基础知识[css边框属性教程一]

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

css外边距合并外边距合并:定义为当两个垂直外边距相遇时,将形成一个外边距。合并之后的外边距高度是等于两个发生合并的外边距高度中的较大者。外边距合并(叠加)在实践中对网页进行布局时,它会造成许多混淆。也是一个相对比较简单的概念。当一个元素出...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。