HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,CSS全称层叠样式可以使得网站,创建文档内容清晰地独立于文档表现层,CSS可以让简单的HTML页面变得漂亮起来,通常会将HTML与CSS结合起来使用,这俩算是好基友了.

HTML 基础简介

通常情况下,一个最基本的网页格式如下面的例子所示的样子,具体的代码和解释如下:

<!DOCTYPE html>                #文档说明,告诉浏览器当前的文档类型

<html lang="en">               #指定文件的格式等

<head>                         #HTML头部信息

    <meta charset="UTF-8">     #指定文件编码方式

    <title>Title</title>       #指定文件标题

</head>

<body>                         #body区域是HTML文档的主体部分

</body>

</html>

◆Head 标签◆

head标签用于定义文档的头部,它是所有头部元素的容器.<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等,文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等.绝大多数文档头部包含的数据都不会真正作为内容显示给读者,<title>定义文档的标题,它是 head 部分中唯一必需的元素.

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

<head>

    <meta charset="UTF-8">

    <meta name="keywords" content="这里">                             #网页的关键字

    <meta name="description" content="这里">                          #网页的描述信息

    <meta http-equiv="Refresh" content="2;">                          #每2秒中刷新以下网页

    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> #2秒后重定向到某网站

    <title>my web</title>                                             #网页的窗口标题

    <link rel="shortcut icon" href="http://www.xx.com/favicon.ico">   #指定网页图标

    <link rel="stylesheet" href="mycss.css">                          #引用外部css文件

    <script type="text/javascript" src="./lyshark.js"></script>       #引用外部js文件

</head>

◆Body 标签◆

body 标签是成对出现的,在<body>...</body>标签对之间的内容,将显示在Web浏览器窗口的用户区域,它是HTML文档中最主要的部分,我们可以把HTML文档的主体区域简单地理解成标题以外的所有部分,该部分可以包含<table>,<font>,<img>,<div>等标签,结束标签</body>用来指明主体区域的结尾.

在body标签中可以规定整个文档的一些基本属性,例如以下几个属性.

属性名称 属性说明
bgcolor 指定HTML文档背景色
text 指定HTML文档中文字颜色
link 指定HTML文档中,待链接超链接对象的颜色
alink 指定HTML文档中,链接超链接对象的颜色
vlink 指定HTML文档中,已链接超链接对象的颜色
background 指定HTML文档中,文档的背景文件

◆特殊字符◆

在HTML中有很多特殊的符号是需要特别处理的,例如<,>这两个符号是用来表示标签的开始和结束的,没有办法通过直接按键来输入,必须用输入编码表示法&lt;来输入.

通常情况下HTML文件,会自动截去多余的空格,不管加多少空格,都被看作一个空格,如果要显示空格中的多个空格,可以使用&nbsp;表示空格,常用的特殊字符及显示结果如以下表格中整理的内容.

源代码 HTML显示结果
& nbsp; 插入一个非间断空格
& ensp; 插入两个普通空格的宽度
& emsp; 插入四个普通空格的宽度
< 插入一个小于号<
> 插入一个大于号>
& 插入一个and符号
" 插入一个双引号

以上的一些简介,就已经说面完了所有关于HTML结构的问题了,HTML不算是一门编程语言,我们只需要学习一些常用的标签就可以了,下面将具体介绍一些常用的标签的属性与使用方法.

HTML 常用标签

格式标签: 格式化标签常用的如下所示,其中Div标签是在布局中使用最频繁的,其他的用的少.

<h1></h1>     标题标记,共有6个级别,范围1~6

<div></div>   块级标签,分区显示标记,也称之为层标记

<p></p>       换段落标记,由于多个空格和回车在HTML中会被等效为一个空格

<span></span> 内联标签,字符占多少标签就占多少

<br><br/>     强制换行标记,让后面的文字、图片、表格等,显示在下一行

<hr><hr/>     水平分割线标记,段落之间的分割线

<center>      居中对齐标记,让段落或者是文字相对于父标记居中显示

<pre></pre>   预格式化标记,保留预先编排好的格式

文本标签 常用的文本标签也就以下这些,但是我们基本不会使用,字体调整一般会使用CSS来操作.

<b></b>       粗字体标记

<i></i>       斜字体标记

<sub></sub>   文字下标字体标记

<sup></sup>   文字上标字体标记

<tt>:</tt>    打印机字体标记

<cite></cite> 引用方式的字体,通常是斜体

<em></em>     表示强调,通常显示为斜体字

<strong>      表示强调,通常显示为粗体字

<small>       小型字体标记

<big></big>   大型字体标记

<u></u>       下划线字体标记

<font>:字体设置标记,设置字体的格式,三个常用属性

       (1)size（字体大小）:<font size="14px">

       (2)color（颜色）:<font color="red">

       (3)face（字体）:<font face="微软雅黑">

列表标签 列表标签中最常用的也就是li,ul这两种形式,分别是有序和无序标签组.

<li>: 列表项目标记,每一个列表使用一个<li>标记

<ul>: 无序列表标记,此标签声明的列表没有序号

<ol>: 有序列表标记,可以显示特定的一些顺序

<dl><dt><dd>: 定义型列表,对列表条目进行简短的说明

< -----------------------[ol定义格式]----------------------- >

<ol type="符号类型">

	<li type="符号类型"></li>

	<li type="符号类型"></li>

</ol>

< -----------------------[dl定义格式]----------------------- >

<dl>

	<dt>软件说明：</dt>

	<dd>简单介绍软件的功能及基本应用</dd>

	<dt>软件界面</dt>

	<dd>用于选择软件的外观</dd>

</dl>

A超链接标签: 该标签定义超链接,用于从当前页面链接到其他页面,或从页面的某个位置跳转到当前页面的指定位置.

<a href="地址" target="打开方式" name="页面锚点名称" >链接文字</a>

<a href="https://baidu.com" target="_blank">百度</a>

< -----------------------[参数解释]----------------------- >

href:链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等

target:

	(1) _blank在一个新的窗口中打开链接

	(2) _seif(默认值)在当前窗口中打开链接

	(3) _parent在父窗口中打开页面（框架中使用较多）

	(4) _top在顶层窗口中打开文件（框架中使用较多）

超链接瞄点: 使用超链接瞄点,如下例子寻找页面中id=i1的标签,将其标签显示在页面顶部.

<body>

    <a href="#i1">第一章</a>

    <a href="#i2">第二章</a>

    <!--id每一个标签的id属性值不允许重复;id属性可以不写-->

    <div id="i1" style="height: 800px";>第一章内容</div>

    <div id="i2" style="height: 500px";>第二章内容</div>

</body>

Img图片标签: 该标签用于指定嵌套一些图片图像,将图像展现出来.

<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">

< -----------------------[参数解释]----------------------- >

src属性：指定我们要加载的图片的路径和图片的名称以及图片格式

width属性：指定图片的宽度,单位px、em、cm、mm

height属性：指定图片的高度,单位px、em、cm、mm

border属性：指定图标的边框宽度,单位px、em、cm、mm

alt属性：(1)作用一：当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字

         (2)作用二：如果图像没有下载或者加载失败,会用文字来代替图像显示

         (3)作用三: 搜索引擎可以通过这个属性的文字来抓取图片

音频与视频: 下面的两对,embed是音频文件,video是视频文件,其他参数自行百度.

<div class="mp3">

	<embed height="50" width="100" src="music.mp3">

</div>

<div class="mp4">

	<video width="320" height="240" controls>

		<source src="movie.mp4" type="video/mp4">

	</video>

</div>

HTML 表单标签

HTML 使用表单向服务器提交请求,表单、表单控件的主要作用就是收集用户输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器.因此在Web编程中,表单主要用于收集用户输入的数据,在需要与用户交互的Web页面中,表单、表单控件都是极为常用的,下面将收集几种常用的表单控件.

Label标签: label标签不会向用户呈现任何特殊效果,只起到显示的作用,标签需要和控件ID关联.

<form>

    <label for="username">用户名:</label>

    <input type="text" name="user" id="username">

    <label for="password">密码:</label>

    <input type="password" name="pasd" id="password">

</form>

Form 表单: 用于生成输入表单,该元素是用来提交数据必选结构,也是HTML中最基础的元素.

<form action="服务器地址" name="表单名称" method="post|get">

< -----------------------[参数解释]----------------------- >

name       指定表单的唯一名称,建议其属性与ID属性保持一致方便管理

enctype    设置表单的资料的编码方式,用于input标签type="file"时使用

target     指定使用哪种方式打开目标URL,属性有:_blank,_parent,_self,_top四个值.

action     表单数据的处理程序的URL地址,表单中不需要使用action属性也要指定其属性为"no"

method     传送数据的方式,分为post和get两种方式

	get方式:  get方式提交时,会将表单的内容附加在URL地址的后面,且不具备保密性

	post方式: post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理

Input 控件: 该表单是网页控件表单,其中包括了常用的网页控件,也是最重要的表单之一.

<input type="类型" name="" value="" size="" maxlength="" placeholder="" />

<input type="file" name="上传文件" enctype="multipart/form-data"/>

< -----------------------[type类型]----------------------- >

type = "text"       文本输入框        type = "color"   颜色选择器

type = "password"   密码输入框        type = "date"    日期选择器

type = "email"      邮件输入框        type = "time"    时间选择器

type = "radio"      单选框           type = "week"     周选择器

type = "checkbox"   复选框           type = "month"    月选择器 

type = "submit"     提交按钮         type = "number"   数字选择器

type = "button"     普通按钮         type = "search"   本地搜索框

type = "reset"      重置按钮         type = "range"    网页拖动条  

type = "hidden"     隐藏域           type = "file"     文件域

type = "image"      图像域           type = "progress" 滚动条 

< -----------------------[参数解释]----------------------- >

value       默认输入的值

name        定义input名称

size        定义输入框框的长度

src         指定图像域所显示图像的URL

checked     设置指定单选框复选框为选中状态,该属性只能是checked

disabled    设置首次加载时禁用当前元素,该属性只能是disabled

maxlength   限制输入框最大允许输入的字符长度,maxlength=10

readonly    指定该文本框内的值不允许用户的修改,readonly=true

placeholder 指定输入框的默认提示信息,placeholder="hello lyshark"

Select 表单: 该表单用于创建列表框或者是下拉菜单,该元素必须和option元素结合使用.

<select name="名称" size="10" multiple>

	<optgroup label="北方"/>

		<option value="1" selected>北京</option>

		<option value="2">山东</option>

	<optgroup label="南方"/>

		<option value="3" selected>深圳</option>

		<option value="4">上海</option>

		<option value="5">江苏</option>

</select>

< -----------------------[参数解释]----------------------- >

select 属性

		size      指定该列表框内可同时显示多少个列表项

		name      定义这个列表的名称,就是列表的名字

		multiple  该属性不用赋值其作用是,是否使用多选或者下拉框

option 属性

		value     给选项赋值,指定传送到服务器上面的值

		selected  指定默认的选项

optgroup 属性

		label     分组的名字

Textarea 标签: 可以实现接收用户输入,用户可以在文本域中输入任意字符,并且长度没有限制.

<textarea name="名称" rows="" cols="" value=""> ... ... </textarea>

< -----------------------[参数解释]----------------------- >

name       指定标签的名字

value      指定标签的默认值

cols       指定文本域的宽度

rows       指定文本域的高度

disabled   指定禁用文本域

readonly   指定文本域只读

List 列表: 列表方法,可以将一个普通文本框,通过使用datalist标签将其变成一个列表.

<form action="buy" method="post">

	<input type="text" name="test" list="book">

</form>

<datalist id="book">

	<option value="Linux"> Linux 系统管理</option>

	<option value="Python"> Python 全栈开发</option>

	<option value="Java"> Java 程序设计</option>

</datalist>

Table 表格: 表格的定义由table标签来定义,每个表格均有若干行,每行被分割为若干单元格由td标签定义.

<table border="1">				        定义一个表格

	<caption>				        定义表格标题

		<tr>				        定义表格的行

			<th>姓名</th>           字段1

			<th>性别</th>           字段2

			<th>年龄</th>           字段3

		</tr>

		<tr>

			<td rowspan="1">陈荣华</td>	定义表格单元

			<td rowspan="3">男</td>

			<td rowspan="2">22岁</td>

		</tr>

	</caption>

</table>

Fieldset标签: 该标签主要用来装饰form表单,<legend>标签为fieldset元素定义标题.

<form name="login" method="get">

    <fieldset>

        <legend>用户登录</legend>

        用户名:<input type="text" name="username">

        密码:<input type="password" name="password">

        <input type="submit" value="登陆">

    </fieldset>

</form>

Iframe标签: 创建包含另外一个文档的内联框架(即行内框架),说白了就是网页中嵌入网页.

<iframe src="https://www.baidu.com" width="100%" height="500">指定高度宽度显示</iframe>

<iframe src="https://www.baidu.com" frameborder="0">移除边框显示</iframe>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

CSS 的引用方法

CSS全称层叠样式表(Cascading Style Sheets),CSS使得网站可以,创建文档内容清晰地独立于文档表现层,CSS可以让简单的HTML页面变得漂亮起来。

直接引用: 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.

<body>

	<p style="color: red"> hello lyshark </p>

	<div style="color: yellow ; background: red"> hello div </div>

</body>

头部引用: 直接在HTML头部使用style类型声明,以下是对div标签进行修改的代码.

<head>

    <style type="text/css">

      .div{

            color:yellow ;

            background:red ;

        }

    </style>

</head>

外部引用: 外部引用是最常用的一种引用方式,就是将CSS与HTML代码分离,方便管理.

<head>

	<link type="text/css" rel="stylesheet" href="mystyle.css" />

	<link type="text/css" rel="stylesheet" href="css/style.css" />

	<link type="text/css" rel="stylesheet" href="//google.com/style.css" />

</head>

导入引用: 此引用方式,有一定的局限性,而且受引用数量的限制,一般不使用,了解即可.

<head>

    <style>

        div {

              background-color: red !important ;

              @import "style.css" ;

              @import "mystyle.css" ;

            }

    </style>

</head>

CSS 常用选择器

通用选择器: 通用选择器就是使用星号来标注,则会对所有的页面元素生效,也就是全局生效.

<head>

	<style type="text/css">

        *{

            background: red ;

            color: bisque ;

        }

    </style>

</head>

<body>

	<div>这是DIV标签</div>

	<p>这是P标签2</p>

	<p>这是P标签1</p>

</body>

标签选择器: 比如使用以下方法,就可以使指定的DIV标签进行修改,凡是全局范围的DIV标签都会应用.

<head>

    <style type="text/css">

        div{

            background: red;

            color: bisque;

        }

    </style>

</head>

<body>

	<div>这是DIV标签1</div>

	<div>这是DIV标签2</div>

	<p>这是P标签2</p>

	<p>这是P标签1</p>

</body>

ID选择器: 以下案例中只对ID=div_id1的标签修改,警号代表ID调用,注意的ID号是唯一的不能够重复.

<head>

    <style type="text/css">

        #div_id1{

            background: red;

            color: bisque;

        }

    </style>

</head>

<body>

<div id="div_id1"> 这是DIV标签1</div>

<div id="div_id2"> 这是DIV标签2</div>

</body>

Class选择器: 以下案例就是类选择器的使用技巧,类选择器一般用句号代表,该类的名称允许重复.

<head>

    <style type="text/css">

        .lyshark{

            background: red;

            color: bisque;

        }

    </style>

</head>

<body>

<div class="lyshark">这是DIV标签

    <div class="lyshark">子标签也会变</div>

    <div class="lyshark">子标签也会变</div>

</div>

</body>

嵌套选择器: 如下嵌套,查找id=outher标签,里面的class=A1,里面的class=B1,将其变成红色.

<head>

    <style type="text/css">

        #outher .A1 .B1{

            color: red;

        }

    </style>

</head>

<body>

<div id="outher">

    <div class="A1"> hello A1

        <div class="B1"> hello B1 </div>

    </div>

    	<div class="A2"> hello A2</div>

</div>

</body>

组合选择器: 组合的意思就是将一些标签组合在一起,让它们使用相同的CSS代码.

<head>

    <style type="text/css">

        div,h1,p{

            color: red;

        }

    </style>

</head>

<body>

	<div>hello div</div>

	<h1>hello h1</h1>

	<p>hello P</p>

</body>

后代选择器: 后代也就是继承的意思,以下所有在h1标签内的em标签中的内容全部变成红色.

<head>

    <style type="text/css">

        h1 em{ color: red; }

    </style>

</head>

<body>

	<h1> hello <em>lyshark</em> </h1>

	<p> hello <em>lyshark</em> </p>

</body>

子代选择器: 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器.

<head>

	<style type="text/css">

		h1 > strong {color:red;}

	</style>

</head>

<body>

	<h1> hello <strong>lyshrk</strong> <strong>lyshrk</strong> </h1>

	<h1> hello <em><strong>lyshrk</strong></em> </h1>

</body>

相邻选择器: 通过使用相邻选择器,如下解释,将把h1标签的后面的第一个p标签变成红色.

<head>

    <style type="text/css">

        h1 + p {color: red;}

    </style>

</head>

<body>

	<h1>This is a heading.</h1>

	<p>This is paragraph.</p>

	<p>This is paragraph.</p>

	<p>This is paragraph.</p>

</body>

属性选择器: 通过属性选择器实现选择指定的标签,过程中可以指定My=lyshark这样的自定义类型.

<head>

    <style type="text/css">

    	[class="mydiv"]{ color: red;}

    	div[My="lyshark"]{color: green;}

    	div[id ^="myid"]{color: yellow;}

    </style>

</head>

<body>

    <div class="mydiv"> hello lyshark </div>

    <div My="lyshark"> hello lyshark </div>

    <div id="myid"> hello lyshark </div>

</body>

伪元素选择器(1): 鼠标经过超链接呈现出不同的状态,或者点击超链接会出现不同的效果.

<head>

	<style type="text/css">

		a:link {color: #FF0000}           #鼠标没有碰过的样式

		a:visited {color: #00FF00}        #已经访问过的链接样式

		a:hover {color: #FF00FF}          #鼠标放上去的样子

		a:active {color: #0000FF}         #选择链接时的样式

	</style>

</head>

<body>

	<a href="www.baidu.com" target="_blank">这是链接</a>

	<p>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效</p>

	<p>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效</p>

</body>

伪元素选择器(2): 伪元素after的功能是在P标签后面添加一行内容,而before功能则是在P标签前添加.

<head>

    <style type="text/css">

        p:after{content:"lyshark";}

        p:before{content:"my";}

    </style>

</head>

<body>

	<p> ---name--- </p>

</body>

CSS 常用的属性

颜色属性: 颜色属性,多用于对标签的配置,以下列举的方式为最常用的四种颜色选择方式.

<h1 style="color: red"> 红色的h1标签 </h1>

<h1 style="color: #ff6600"> 橙色的h1标签 </h1>

<h1 style="color: rgb(255,255,0)"> 黄色的h1标签 </h1>

<h1 style="color: rgba(255,20,255,1)"> 紫色的h1标签 </h1>

字体属性: 字体属性用来调节网页中的各种字体的显示效果,包括调节字体大小,类型,状态等.

< ----------------------[设置字体大小]---------------------- >

<h1 style="font-size: 15px"> 设置字体大小15像素 </h1>

<h1 style="font-size: 30%"> 设置全局字体30% </h1>

<h1 style="font-size: larger"> 设置字体格式 </h1>

< ----------------------[设置字体类型]---------------------- >

<h1 style="font-family: 微软雅黑,Serif"> 设置微软雅黑 </h1>

<h1 style="font-family: 华文新魏,Serif"> 设置华文新魏 </h1>

<h1 style="font-family: 新宋体,Serif"> 设置新宋体 </h1>

< ----------------------[设置字体状态]---------------------- >

<h1 style="font-weight: normal">默认值</h1>

<h1 style="font-weight: 100">直接赋值</h1>

<h1 style="font-weight: bold">显示加粗</h1>

<h1 style="font-weight: bolder">显示更粗</h1>

<h1 style="font-weight: lighter">显示更细</h1>

< ----------------------[添加字体阴影]---------------------- >

<h1 style="text-shadow: red 5px 5px 2px;">添加字体阴影</h1>

<h1 style="text-shadow: -5px -5px 2px gray;">向左上角投影</h1>

<h1 style="text-shadow: -5px 5px 2px gray;">向左下角投影</h1>

< ----------------------[其他常用状态]---------------------- >

<h1 style="text-decoration: underline">添加下划线</h1>

<h1 style="text-decoration: line-through">添加批注横批</h1>

<h1 style="text-transform: uppercase">全部字母大写</h1>

<h1 style="text-transform: lowercase">全部字母小写</h1>

背景属性: 背景属性用于控制背景色,背景图片等一些显示格式,还可以控制背景图片的排列方式.

<body style="background-color: red"> 设置背景颜色为红色</body>

<body style="background-size: 30px 50px"> 设置图像大小</body>

<body style="background-position: center;"> 居中显示图片</body>

<body style="background-repeat: no-repeat"> 不重复图片</body>

<body style="background-attachment: fixed"> 固定图片位置</body>

<body style="background-repeat: repeat"> 重复铺满图片</body>

<body style="background-image:url(image.bmp)"> 设置背景图片</body>

<body style="background-repeat: repeat-x"> 向X轴重复</body>

<body style="background-repeat: repeat-y"> 向Y轴重复</body>

<body style="background: 背景颜色 url(图像) 重复 位置"> 简写模式</body>

<body style="background: red url(images/bg.jpg) no-repeat top center"> 简写实例</body>

文本属性: 文本属性用于控制整个段落,或者是整个div元素的显示效果,包括缩进文字对齐等.

< ----------------------[常用文本控制]---------------------- >

<div style="text-indent: 150px"> 行首缩进150像素</div>

<div style="letter-spacing: 10px"> 字符间距10像素</div>

<div style="word-spacing: 20px"> 单行间距20像素</div>

<div style="line-height: 200px"> 控制文本行高</div>

<div style="white-space: nowrap"> 强制不换行,直到遇到br</div>

< ----------------------[文本排列控制]---------------------- >

<div style="text-align: center"> 居中对齐</div>

<div style="text-align: right"> 居右对齐</div>

<div style="text-align: left"> 居左对齐</div>

<div style="direction: rtl"> 文本从左边流入</div>

<div style="direction: ltr"> 文本从右边流入</div>

边框属性: 边框属性用于设置目标对象的边框特征,包括边框颜色,粗细,以及使用线条等.

< ----------------------[常见边框类型]---------------------- >

<div style="border-style: solid">普通边框</div>

none   #无边框            inherit #继承

solid  #直线边框          groove #凸槽边框

dashed #虚线边框          ridge  #垄状边框

dotted #点状边框          inset  #边框

double #双线边框          outset #边框

< ----------------------[常用边框格式]---------------------- >

<div style="border-style: solid;border-width: thin"> 细线边框</div>

px      #固定值的边框     thick   #粗边框     inherit #继承

medium  #中等边框         thin    #细边框

< ----------------------[常用边框颜色]---------------------- >

<div style="border: 10px #ff6600 solid"> 边框简写格式</div>

<div style="border-style: solid;border-radius: 20px"> 椭圆边框</div>

<div style="border-style: solid;border-color: red"> 红色边框</div>

<div style="border-style: solid;border-color: #ff0ff0"> 紫色边框</div>

<div style="border-style: solid;border-color: rgb(255,254,3)"> 黄色边框</div>

<div style="border-style: solid;border-color: rgba(255,254,3)"> 黄色边框</div>

位置属性: 位置属性就是指定元素的位置,它可以用来控制任何网页元素在浏览器文档窗口中的位置.

< ----------------------[位置调节属性]---------------------- >

left:                设置元素左边的水平位置

top:                 设置元素顶部的垂直位置

width:               设置元素显示的宽度像素

height:              设置元素显示的高度像素

z-index:             设置叠层的优先级,常用于模态对话框

< ----------------------[常用定位属性]---------------------- >

position: 用于设定队形的定位方式,分别有以下三种取值.

-> absolute(绝对定位)  精确的定位元素在页面的独立位置,不考虑页面上的其他元素位置.

-> relative(相对定位)  相对定位所设定的位置是相对于元素通常应在的位置的偏移量.

-> static(无特殊定位)  默认方法,使用HTML中通常的定位方法,不用再专门设置元素的位置值.

布局属性: 布局属性用于指定元素在网页中如何放置,主要包括以下几种属性.

< ----------------------[控件显示属性]---------------------- >

visibility: 用于设置元素的可见状态,默认有以下三种属性：

-> inherit  继承父层的显示属性

-> visible  显示在网页中

-> hidden   隐藏指定元素

display: 用于设置元素的可见状态,默认有以下4种属性：

-> block     在元素的前和后都会有换行

-> inline    在元素的前和后都不会有换行

-> list-item 与block相同,但增加了目录列表项标记

-> none      不显示元素,也就是隐藏元素.

< ----------------------[控件其他属性]---------------------- >

clip: 用于绝对定位元素的可视区域,其他的区域隐藏:

-> clip:rect(top,right,bottom,left)

overflow: 设置如果元素中内容超出了元素的大小时如何处理:

-> visible  增加元素的显示空间大小

-> hdden    保持元素的显示大小不变

-> scroll   表示总是显示滚动条

-> auto     超出显示大小才显示滚动条

float: 设置元素是否为浮动模式,可设置左浮动和右浮动:

-> left     表示文本在这个元素的左边

-> right    表示文本在这个元素的右边

-> none     表示这个元素两边不能有空文本

clear: 清除该元素旁边的其他浮动对象,常与float通用:

-> both     表示不允许有浮动的对象

-> none     允许两边都可有浮动对象

-> left     不允许左边有浮动的对象

-> right    不允许右边有浮动的对象

page-break-before:always: 设置打印该元素前是否强制分页

page-break-after:always:  设置打印该元素后是否强制分页

边缘属性: 边缘属性包括元素边界的矩形区域的特征,边缘属性包括margin,padding,width,style.

< ----------------------[3个边界属性]---------------------- >

margin:  设置元素边界与头元素之间的空隙大小.

padding: 设置元素边界与内容之间的空隙大小.

border:  设置元素内间隙与外间隙之间的距离.

< ----------------------[属性与颜色]---------------------- >

border-top-width     指定上边框宽度

border-right-width   指定右边框宽度

border-bottom-width  指定下边框宽度

border-left-width    指定左边框宽度

border-top-color     指定上边框颜色

border-top-style     指定上边框样式

列表属性: 列表属性用于设置列表项标记的类型,列表项图片和位置,以提供灵活列表显示.

list-style-type:none          无标记

-> disc             默认,标记是实心圆

-> circle           标记是空心圆

-> square           标记是实心方块

-> decimal          标记是数字

-> lower-alpha      小写英文字母

-> upper-alpha      大写英文字母

-> decimal-leading-zero  0开头的数字标记

< ------------------------------------------------------- >

list-style-position:inside    列表项目标记放置在文本以内,且环绕文本根据标记对齐

-> outside          默认值,保持标记位于文本的左侧

-> inherit          规定应该从父元素继承list-style-position属性的值

< ------------------------------------------------------- >

list-style-image:URL          图像的路径

-> none             默认无图形被显示

-> inherit          规定应该从父元素继承list-style-image属性的值

简写方式: list-style:square inside url('./arrow.jpg');

CSS 之盒子模式

所有的页面的元素都可以看成是一个盒子,占据一定的页面空间,我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置,盒子模型是由:内容(Content)、边框(Border)、间隙(padding)、外间隔(margin)组成,为了便于理解可以把盒子模型想象成一幅画,content是画本身,padding是画与画框的留白,border是画框,margin是画与画之间距离。

盒子演示实例: 盒子的自由定位例子,以下代码配合边框调节,用来练习盒子的自由定位.

<style>

    body{

        margin: 0px;

    }

    #div1{

        background-color: green;

        width: 300px;

        height: 300px;

        border: 1px solid red;

    }

    #div2{

        background-color: yellow;

        width: 100px;

        height: 100px;

        /*margin-top: 100px;*/

        /*margin-left: 100px;*/

        margin: 100px;

    }

</style>

</head>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

元素居中设置: 将DIV容器设置到页面的正中心,并可以自动的调整页面的大小,容器中可放内容.

.form-center{

            width: 100px;

            height: 100px;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            margin: auto;

        }

脱离文档流居中: 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态

<body>

<style type="text/css">

.center{

    display: block;

    position: fixed;

    _position: absolute;

    top: 50%;

    left: 50%;

    width: 666px;

    height:400px;

    margin-left: -333px;

    margin-top: -200px;

    z-index: 10001;

    box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;

    background-color: #fff;

}

</style>

<div class="center">

</div>

</body>

元素放置右下角: 将元素放置在屏幕右下角,通过定位position:fixed选项实现这一效果.

.form-right{

    background-color: #5f2dab;

    width: 300px;

    height: 100px;

    position: fixed;

    right: 20px;

    bottom: 10px;

  }

实现页面小尖角: 在页面的指定位置绘制小倒转的尖角符号.

.icon {

    display: inline-block;

    border-top:15px solid red;

    border-right:15px solid transparent;

    border-bottom:15px solid transparent;

    border-left:15px solid transparent;

}

float浮动模式: 通过使用float:left选项,使元素自动浮动在其他标签之上,可设置浮动的位置,使用clear清理格式.

<head>

    <meta charset="UTF-8">

    <style>

        .outer{

            background-color: green;

        }

        .menu1{

            background-color: blue;

            width: 100px;

            height: 20px;

            float: left;

        }

        .menu2{

            background-color: yellow;

            width: 100px;

            height: 20px;

            float: left;

        }

        .clear{

            clear: both;

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="menu1">菜单1</div>

    <div class="menu2">菜单2</div>

    <div class="clear"></div>           <!--撑起来,让上面的标签浮动且不覆盖里面的内容-->

</div>

    <div class="bottom" style="background-color: aquamarine">底部菜单</div>

</body>

后台布局: 最后附上一个简单的后台管理框架.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin:0;

        }

        .pg-header {

            height:48px;

            background-color: #2459a2;

        }

        .pg-body .body-menu{

            position: absolute;

            top:48px;

            left:0;

            bottom:0;

            width:200px;

            background:red;

        }

        .pg-body .body-content{

            position: absolute;

            top:48px;

            left:210px;

            right:0;

            background:green;

            /*开启下面,滚动条不变*/

            /*bottom:0;*/

            /*overflow: auto;*/

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-body">

        <div class="body-menu"></div>

        <div class="body-content">

          <h1>hello world </h1>

        </div>

    </div>

    <div class="pg-heaher"></div>

</body>

</html>

Web前端开发HTML基础的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. Web前端开发JavaScript基础

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  3. Web前端开发CSS基础

    CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...

  4. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  5. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  6. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  7. 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

           在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...

  8. 零基础学习Web前端开发

    目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...

  9. WEB前端开发--2（HTML基础）

    HTML基础 HTML不分大小写 1.HTML概述 HTML(HyperText MarkUp Language)"超文本标记语言",他是制作网页的标准语言 1.1 标签--元素 ...

随机推荐

  1. 关于SpringBoot跨域的问题

    直接在启动类里面加这一段代码就行: @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource sourc ...

  2. idea如果发生@override is not allowed when implement 错误，可以在Project Structure-Modules中更改Language level，设置为6以上的。

  3. legend3---6、legend3爬坑杂记

    legend3---6.legend3爬坑杂记 一.总结 一句话总结: 学东西不做项目也学不到深处,其实也就是学了没理解透, 1.lavarel中模型关联可以用的实质是? lavarel在数据库中插入 ...

  4. excel怎么只打印某页？excel怎么只打印某几页

    有时候我们需要打印的excel文件,内容较多有好几页,而我们只需要打印里面的部分内容,为了减少纸张.碳粉的浪费,我们怎样精准打印某页或某几页呢?   工具/原料   Excel / WPS软件 方法/ ...

  5. vue 混入 mixin，自定义指令，过滤器

    vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = {  // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...

  6. CoordinatorLayout使用全解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012124438/article/details/56701641 CoordinatorLayo ...

  7. 一句话说明Facbook React证书的矛盾点

    这项专利授权说,如果您要使用我们根据这项授权发布的软件,假如您因为专利侵权而提起诉讼,您将失去我们的专利许可.

  8. 编写 Model 层的代码

    创建 App 这里把所有 Model 划分为三类:blog 相关.配置相关和评论相关.这么分的好处是便于独立维护各个模块,也便于在开发时分配任务. blog App 创建一个名为 blog 的 app ...

  9. 小D课堂 - 零基础入门SpringBoot2.X到实战_第11节 Logback日志框架介绍和SpringBoot整合实战_45、SpringBoot2.x日志讲解和Logback配置实战

    笔记 2.SpringBoot2.x日志讲解和自定义Logback配置实战     简介:讲解SpringBoot2.x整合Logback配置实战 1.官网介绍:https://docs.spring ...

  10. 3、kubeadm初始化Kubernetes集群

    同步时间 # ntpdate time.nist.gov k8s集群组成 k8s部署环境  https://kubernetes.io/docs/setup/independent/create-cl ...