关于HTML和Css的一些总结
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
部分：标签" data-token="822c8fffb732cdebd8fbe77f3db3d40d"><base>, 标签" data-token="973d60a3b0bca6283e6c496f26949b8a"><link>, <meta>, 标签" data-token="534ef157262a5f8698848cc74ae1b7d4"><script>, 标签" data-token="19bbcdc9e1ad6fe67de90ff060c1a9a0"><style>,
以及 标签" data-token="bbdb71e642b7a1b9255d39e04b33b430"><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%,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>
关于HTML和Css的一些总结的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Bzoj 1036 树的统计 分类： ACM TYPE 2014-12-29 18:55 72人阅读 评论(0) 收藏
Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...
- pip install mysql-python报错1. Unable to find vcvarsall.bat 2 fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory 3.error: command 'mt.exe' failed with exit statu
最近在安装mysql -python 时报错折腾了半天,通过以下方法解决: 1. pip install mysql-python报错 Unable to find vcvarsall.bat (参考 ...
- java_缓冲流(字符输出流)
/** 字符缓冲流: * java.io.BufferedWriter extends writer * BufferedWriter:字符缓冲输出流: * * 构造方法: * BufferedWri ...
- Spark中使用Java编程的常用方法
原文引自:http://blog.sina.com.cn/s/blog_628cc2b70102w9up.html 一.初始化SparkContext System.setProperty(" ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 如何快速合并多个TXT文本内容
工作中有时候需要合并很多文本内容,例如一些推送清单之类,一个一个打开去复制粘贴的话,少量还行,如果txt文本数据量大(10+M以上)且文件数量多(成百上千),这种方式就显得很低效了.具体要求如下: ...
- Android开发 处理内存申请失败的报错(Failed to allocate a 38189038 byte allocation with 16777216 free bytes and 20MB until OOM)
问题原因 当你在操作图片或者其他大量文件数据时会出现:Failed to allocate a 38189038 byte allocation with 16777216 free bytes an ...
- 记 openSUSE 42.3 升级到Leap 15.0
先将系统的软件更新到最新版本 sudo zypper update 删除42.3的软件源,若有其他数据源,如nginx的,也需要一并删除,可使用zypper lr -d 来查询 sudo zypper ...
- SCOI2015
这周各种头疼,一直睡觉+发呆,啥子都没干. 就补一下之前的东西. d1t1小凸玩矩阵 传送门 一开始脑子抽写了最小费用最大流,不知道自己怎么想的. 第k大最小,明显的二分,又是二分图,二分第k大值,把 ...
- 对比两个String无规律包含连续4个相同字符返回true的方法
package com.qif.dsa.util; import java.util.ArrayList; import java.util.List; /** * @author * @Title: ...