您的位置：首页 > Web前端 > CSS

关于HTML和Css的一些总结

2017-09-07 09:11 976 查看

HTML

HTML特点与基本结构

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

 

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，其主要特点如下： 　　

1、简易性

2、可扩展性 

3、平台无关性。

标记语言语法：

1、<标签名>——>起始标签

标签体（可以有文本内容、子标签）

</标签名>——>结束标签

2、空标签：即没有标签体的标签

   <标签名/>

3、一个html或者xml文件只能有一个根标签，其他内容都出现在根标签里。

4、标签可以有属性，一般属性要出现在起始标签里，属性值用””或者’’引起来，多个属性之间用空格隔开。

<标签名 属性名1=”属性值1”  属性名2=”属性值2”  ……>

注：html标签定义的文件以.html或.htm为结尾，本质就是个文本文件，可以用任意编辑工具编写，打开时用浏览器查看。

HTML基本元素

head

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head>
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web
中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head
部分：<base>, <link>, <meta>, <script>, <style>,
以及 <title>。

<title> 定义是文档的标题。

<meta> 元素可提供有关页面的元信息（meta-information）

例：

<head>

<title>我的网页</title>

<meta name="author" content="Sunys"/>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

body

1、 文本相关

<h1></h1>

<h2></h2>

……

<h6></h6>

<center></center>：居中

<b></b>：加粗

<strong></strong>：加粗

<em></em>：斜体

<i></i>：斜体

<p></p>：段落（默认的段落格式）

<pre></pre>：段落（根据自己的样式不变，即保持写入的状态）

<hr/>：一条横线

<br></br>：换行

<ul>：无顺序排列

<li></li>

<li></li>

……

</ul>

<ol>：有顺序排列

<li></li>

<li></li>

……

</ol>

<dl>：定义列表，<dt>定义列表中的项目，<dd>是描述列表中的项目

<dt></dt>  <dd></dd>

<dt></dt>  <dd></dd>

……

</dl>

2、图片和超链接

图片：<img src=”图片路径” alt=”图片不正常显示” />

超链接：<a href=”资源路径” target=”_self（默认）/_blank”></a>

3、 表格和表单

<table>

<tbody>

<tr>

<td></td>

……

</tr>

……

</tbody>

</table>

border：边框的粗细

bordercolor：边框颜色

cellspacing：单元格间隙

colspan：占几列

rowspan：占几行

注：块级元素，块级元素里的内容会独占一行，例如<ul>、<p>、<div>

行内元素，例如<font>、<span>

表单：<form action=”表单将被提交给哪一个程序处理” method=”get（默认）/post”>

表单体

</form>

在表单里，文本输入框的名必须是唯一的。

4、 文本域

<textarea cols=”多少列” rows=”多少行”></textarea>

5、 文件

<input type=”file”/>

6、 按钮

提交按钮：<input type=”submit”/>

重置按钮：<input type=”reset”/>

普通按钮：<input type=”button”/>

HTML与属性

HTML 标签可以拥有属性。属性提供了有关 HTML
元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

例：<a href="https://www.baidu.com">This is a link</a>

HTML框架与iframe

什么是布局？

布局就如同建筑的结构，在建高楼大厦时都是先把钢筋搭建好，有一个具体的结构之后，建筑工人再接着盖楼。

制作网页就如同盖大楼，布局就如同搭建钢筋，布局的结果直接影响到网页的外观，合理的布局才能令网页显得更加大气、紧凑、美观。

 

 

例：

 

<html>

<frameset rows="15%,60
e713
%,15%" border="5">

<frame name="top" src="top.html"></frame>

<frameset cols="20%,*" >

<frame name="left" src="left.html"></frame>

<frame name="main" src="main.html"></frame>

</frameset>

<frame name="bottom" src="bottom.html"></frame>

</frameset>

</html>

注：跳转时，可使用target。

 

CSS

css功能与特点

CSS(Cascading Stype Sheets)：层叠样式表，主要用来控制视觉效果。

在html里引入CSS代码的方法：

1、 将CSS脚本内嵌在需要定义风格的标签里

<标签名 style=”属性名1：属性值1;属性名2:属性值2;……”>

2、 在head标签里统一用<style>标签定义

<head>

<style type=”text/css’>

标签名{属性名1:属性值1;属性名2:属性值2;……}

</style>

</head>

3、 将css脚本代码单独定义成一个.css文件，在需要使用该文件的html网页里通过link标签引入。

<link type=”text/css” rel=”stylesheet” href=”XXX.css” />

CSS脚本常用的语句：

1、 标签名{属性名:属性值;属性名:属性值;……}

2、 标签名1，标签名2，……{属性名:属性值;属性名:属性值;……}

3、 标签名.风格名{属性名:属性值;属性名:属性值;……}

4、 .风格名{属性名:属性值;属性名:属性值;……}——>在标签里使用时class=”风格名”

5、 #风格名{属性名:属性值;属性名:属性值;……}——>在标签里使用时id=”风格名”

6、 a:状态名{属性名:属性值;属性名:属性值;……}——>控制超链接不同状态下的显示格式

例：a{……}

a:hover{……}——>鼠标悬停在超链接上时的状态。

常用的css属性

1、 文本相关

text-align(对齐方式)：left/center/right

color：指定文字颜色

text-indent：缩进距离（例：text-indent:10px;）

2、 字体相关

font-family：字体

font-weight(字体宽度)：normal/bold/lighter/bolder

font-size：字体大小

3、 颜色背景

background-color：背景颜色

background：url(图片路径)——>背景图片

background-size：背景大小

4、 边框相关

boder

5、 超链接相关

a:hover——>是把鼠标放上去时悬停的状况

6、 常用属性

display：显示方式

block——>块级元素

inline——>内联的，行内元素

none——>隐藏，不显示且不在网页占任何位置

float：浮动方式

left——>允许接下来的元素与某列成一行并向左挤我

right——>允许接下来的元素与某列成一行并向右挤我

补白

padding：内补白(padding、padding-top/left/right/bottom)

padding：上 下 左 右

padding：上下 右左

margin：外补白

 

css选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

比如要控制某个DIV下的某个TABLE的偶数行的样式时，就可以用CSS选择器。

基础选择器

复合选择器

属性选择器

伪类选择器

结构性伪类选择器

css定位

相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在

它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它

的起点进行移动。

例：

<div style="border: 1px solid red;

width: 200px;

height: 200px;position:relative;

left:100px;

top:100px">

</div>

 

绝对定位

绝对定位是布局定位中相当重要且最难控制的定位类型。

首先绝对定位是不占空间的，运用了绝对定位的DIV会脱离原来的Z轴，浮动起来，因此视觉上会与其他的元素重叠。

绝对定位是以body的左上点为原点进行位移。

代码为：absolute

浮动定位

浮动定位一般用于使标签横向排列。

使用方式为float：left

例：

<div style="background-color: red;width: 100px;height: 100px;float: left;"></div>

<div style="background-color: black;width: 100px;height: 100px;float: left;"></div>

<div style="background-color: yellow;width: 100px;height: 100px;float: left;"></div>

 

 

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航