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的一些总结的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. jeecms jeecmsv93建库

    create tablespace jeecms93 datafile 'jeecms93.dbf' size 100M reuse autoextend on next 50M;1. 2.drop ...

  2. 纯CSS3实现图片展示特效

    本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...

  3. 收藏的链接-Qt

    Qt编写的开源帖子集合(懒人专用) - QTCN开发网 - Powered by phpwind http://www.qtcn.org/bbs/read-htm-tid-85501.html?tds ...

  4. 解决在Spring整合Hibernate配置tx事务管理器出现错误的问题

    问题描述: Error occured processing XML 'org/aopalliance/intercept/MethodInterceptor'. See Error Log for ...

  5. 网站时间显示——基于Date

    网站时间显示 代码实现如下: =============css样式=================== <style> #show{ width: 460px; height: 100p ...

  6. 19-11-2-M

    最后一个当然要模自己辣. %%%Miemengsb ZJ一下: 三道题没有一道会的,唯一的20还是T2输出$n/2$得的 咝…… T1一看,只会暴力. T2一看,像是状压,但是我是$dpsb$,于是弃 ...

  7. <input> type 属性

    单行文本域 语法格式:<input  type = “text” 属性 = “值” /> 常用属性 1  name:文本框的名字.命名规则是:可以包含字母.数字.下划线,只能以字母开头. ...

  8. div 和 span 标记

    div 一般和 css 配合使用  <div>是一个块元素 span  也是和 css 配合使用 <span>是一个行内元素 标记嵌套是  一般是块元素嵌套行内元素 1 块元素 ...

  9. 04_Hibernate检索方式

    一．Hibernate检索方式概述 OID检索方式:按照对象的OID来检索对象(get/load) HQL检索方式:使用面向对象的HQL查询语言 QBC检索方式:使用QBC(Query By Crit ...

  10. <随便写>创建文件批处理文件

    创建一个text文档 写入想写的程序 将后缀改为bat 例如创建一个文件夹: 双击运行bat文件就可以创建文件夹 运行结果: 需要批量处理,就用for循环生成代码,粘贴上去就行了