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. System.Web.UI.WebControls.FileUpload.cs

    ylbtech-System.Web.UI.WebControls.FileUpload.cs 1. 程序集 System.Web, Version=4.0.0.0, Culture=neutral, ...

  2. ORM（Object/Relation Mapping）框架简介

    ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法,关 ...

  3. windows api（GDI）实现图片旋转

    GDI实现图片旋转,博主在网上找了好多资料,都不太如意. 并且在尝试中发现,如果先用SetViewportOrgEx将HDC上的坐标原点移动到图片中心:再在HDC上的获取每个点,用三角函数进行变换,算 ...

  4. day22_5-xml模块

    # 参考资料:# python模块(转自Yuan先生) - 狂奔__蜗牛 - 博客园# https://www.cnblogs.com/guojintao/articles/9070485.html ...

  5. IK分词器插件

    (1)源码 https://github.com/medcl/elasticsearch-analysis-ik  (2)releases https://github.com/medcl/elast ...

  6. 牛客集训第七场J /// DP

    题目大意: 在矩阵(只有52种字符)中找出所有不包含重复字符的子矩阵个数 #include <bits/stdc++.h> #define ll long long using names ...

  7. css中字体属性的简写

  8. java_缓冲流(字节输入流)

    /** * java.iko.BufferedInputStream extends InputStream * BufferedInputStream:字节缓冲输入流 * 构造方法: * Buffe ...

  9. 2018-8-10-如何删除错误提交的-git-大文件

    title author date CreateTime categories 如何删除错误提交的 git 大文件 lindexi 2018-08-10 19:16:51 +0800 2018-2-1 ...

  10. Nand Flash 控制器中的硬件 ECC 介绍

    ECC 产生方法 ECC 是用于对存储器之间传送数据正确进行校验的一种算法,分硬件 ECC 和软件 ECC 算法两种,在 S3C2410 的 Nand Flash 控制器中实现了由硬件电路(ECC 生 ...