HTML基础和CSS

HTML基础

语法

常规标记 双标记

<标记 属性="属性值" 属性="属性值">文本</标记>

空标记 单标记

<标记 属性="属性值" 属性="属性值"/>

：

<h1-h6>标题内容</h1-h6>(1-6为标题不同选择）

<p>段落</p>（文章段落使用）

<i>文字倾斜</i> <em>文字倾斜</em>（文字 倾斜 时使用）

<b>字体加粗</b> <strong>字体加粗</strong>（字体加粗时使用）

<u>增加下划线</u>（文本需要增加 下划线 时使用）

<s>增加删除线</s> <del>增加删除线</del>（文本需要增加 删除线 时使用）

^字号上标（例如 ™，²，...）

_字号下标（例如 ₁，₂，...)

<hr>（当文本需要增加水平线时使用 ）

---

<br>（当文本需要在特定文字位置换行时使用）

文本列表

无序列表（前面不带顺序标记）

<ul>
   <li></li>
   <li></li>
   <li></li>
   ......
</ul>

:

（ <ul type="circle"></ul>表示前面为实心圆     <ul type="disc"></ul>表示前面为空心圆  默认情况下为实心圆 ）

有序列表（前面带有顺序标记）

<ol>
   <li></li>
   <li></li>
   <li></li>
   ......
</ol>

:

（ <ol type="A"></ol>表示前面为英文abcd开头     <ol type="Ⅰ"></ol>表示前面为ⅠⅡⅢⅣ               默认情况下为阿拉伯数字；如果需要从特定数字或字母符号开始 需加上" start="特定数字或字母符号" "）

自定义列表（图片或文字自定义）

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    ......
</dl>

:

(自定义列表可以包含图片，<dt>可以包含文字也可以是图片</dt>，<dd>相关文字</dd>）

插入图片

<img src="图片位置路径"    title="鼠标放在图片上的信息显示"   alt="图片不显示时候的文字提醒" />

<img src="pic/新闻_05.jpg" title="新闻图片" alt="我是图片">

插入图片时路径一般有"绝对路径"和"相对路径"两种

绝对路径：文件在硬盘上的真正地址，例如这个"新闻_05.jpg"图片是在"D:\ 0H5 \ pic"里面，因此它的绝对路径就是"D:\ 0H5 \ pic \ 新闻_05.jpg"；不过绝对路径一般不会使用，因为在使用时，图片在自己的计算机会显示正常，但是上传到服务器上时不会显示，毕竟图片是在自己的计算机上！

相对路径：文件相对于自己的目标文件位置，如果当前在写的文件和图片在同一目录下，只需要书写<img src="新闻_05.jpg">即可；如果当前在写的文件和图片所在的文件夹在同一目录下，则需要先打开图片所在的文件夹，再书写图片信息--<img src="pic / 新闻_05.jpg">；如果当前再写的文件所在的文件夹和图片所在的文件夹在同一目录下，则需要先退回再打开图片所在文件夹书写图片信息--<img src=".. / pic / 新闻_05.jpg"；需要注意的是，(../）表示的意思是退回一次，如果需要多次重复即可。

超链接

点击之后加载新网页

<a href="跳转路径" title="鼠标悬停信息" target="当前网页跳转或者打开新网页跳转"></a>

其中target属性可以为"_self"  当前页面；也可以为"_blank"  新窗口打开。

划分页面

通常使用div划分页面

<div>页面内容</div>

选择部分文内容编辑

当整段内容中，有部分需要更改或者设置内容时，可以选择用<span></span>划分内容

<p>
文本内容文本内容文本内<span>单独设置的内容</span>容文本内容文本内容文文本内容
</p>

用"span"区分之后，可以使用CSS进行其他设置了。

创建表单

表单创建使用 ↓

<form method="" action="">
   <input type="" placeholder="" name="" value="" />
   <input type="" placeholder="" name="" value="" />
</form>

其中，method为"get"或"post"，"get"时从服务器上获取数据，"post"是向服务器上传送数据，"get"是把参数数据队列加到提交表单的action属性所致的url中，值和表单内的各个字段一一对应，在url中可以看到；"post"是通过http post机制，将表单内的各个字段与其内容放置在html header内一起传送到action属性所指的url中，用户是看不到这个过程的。get方式服务器用的request ouerystring获取变量的值，post方式是服务器用request form获取提交的数据。并且get传送的数据非常小，不能大于2KB，post传送数据较大，一般默认不受限制，但是IIS4中最大量为80KB，IIS5中为100KB。而且get安全性较低，post安全性较高，但是get执行的效率要更好。

type属性输入框的内容有：

type="text"表示文本内容    type="password"表示密码内容    

 

     ←text显示

     ←password显示

type="submit"表示提交按钮，同等与<button>提交</button>

 

      ←<input type="submit" value="登录"/>

type="button"为单纯的按钮

type="reset"为清空的效果→      

placeholder为表单内未填写时显示的内容

 

     ←placeholder="请输入用户名"

     ←placeholder="请输入密码"

action为想要发送表单数据的地址

name必须要设置，否则在提交表单时，用户输入的数据就不会被发送的服务器的

value表示值的内容

CSS

层叠样式表：修饰网页信息的显示格式。我们在搭建网页时，需要不断修饰内容，这里需要使用到CSS。

创建样式表有："行内样式"；"内部样式"；"外部样式"。

行内样式

在想要修饰的文本内创建style

<div  style="width:200px; height:50px;">

文本内容

</div>

 行内样式缺点有：结构不分离，不利于维护，样式不可重复使用。

内部样式

在head里面书写需要的标签style，在head里面书写style，type的属性可加可不加。

内部样式结构分离，好维护，样式重用，但是只能在一个页面内使用，不能导入其他页面。

外部样式

先在html中创建文本对象，再重新建立一个CSS文件，将CSS文件导入html中

        ←css文件内容

创建文本内容后，重新创建css文件，书写修饰内容，可以利用两种方法导入

第一种：<link rel="stylesheet" type="text/css" href="css文件的路径"/>   其中rel（relation）为定义关联性；stylesheet为样式表。

第二种： <style type="text/css">

              @import url(css文件的路径);

              </style>

外部样式结构分离，好维护，样式重用，多个页面使用，适合整站开发或者长页面。

附加：

css选择的语法

选择器（也可以叫选择符）{属性:属性值;       属性:属性值;     ......}

属性和属性值必须放在{}内，属性和属性值需要用   :   连接，每条属性需要用   ;   结束。

link和@import的区别

link属于XHTML标签，@import是css提供的方式；页面加载时link引用的css会被一同加载，而@import是在页面加载完之后才会被加载，所以有时候会出现页面闪烁或者没有样式等问题；@import是css2.1提出来的，所以有些老的浏览器会不支持，而link不会出现这种问题；另外在使用dom控制样式时，使用JavaScript控制dom改变样式，只能使用link标签，不能使用@import。

选择器的分类

在使用css修饰文本时候，因为html中修饰的对象名称并不是只有一种，当我们只需要修改其中个别内容时，就需要区别对待，划分名称修饰。

选择器有5大类：基本选择器，层次选择器，伪类选择器，属性选择器，伪对象（伪元素）选择器

基本选择器

类型选择器↓

修饰某种元素或者该文档中某类元素时，可以使用

例：div{width:200px; height:50px;}或者p{width:200px; height:50px;}

class选择器↓

需要区分文档中的元素或者标签时可以使用，比如文档中有多个div或者p或者其他标签

这时候需要在需要修饰的标签内加上class名字

例：<div class="div1">文本内容</div>   <p class="p1"></p>

然后书写class的名称修饰文本，书写时名称前需要加上   .   →   .div1{width:200px; height:50px;}   .p1{width:200px; height:50px;}

class的名称可以任意选择，但是不能以数字开头，并且单个标签的clss名称可以设置多个名字，<div class="div1 a1 b1 c1">，中间空格隔开即可。

ID选择器↓

需要区分文档中的元素或者标签时可以使用，比如文档中有多个div或者p或者其他标签

这时候需要在需要修饰的标签内加上ID名字

例：<div id="div1">文本内容</div>   <p id="p1"></p>

然后书写id的名称修饰文本，书写时名称前需要加上   #   →   #div1{width:200px; height:50px;}     #p1{width:200px; height:50px;}

id的名称可以任意选择，但是不能以数字开头，注意，ID具有唯一性，所以属性值只能是1个。

通配符↓

需要让所有标签同时修饰时候可以使用

例：*{属性: 属性值;}     *{width:200px;  height:50px;}

群组选择器↓

当多种元素需要修饰时候可以使用

例：选择器1,选择器2,选择器3,选择器4{属性:属性值;}    div,.a1,#a2{width:200px; height:50px;}

选择器之间用   ,   隔开即可，这样可以减少代码量，提高性能。

层次选择器

后代选择器（包含选择器）↓

选择父元素内所包含的所有子类元素，子孙后代全部选择

例：父元素 子元素{属性:属性值;}    div p{属性:属性值;}就代表选择div里面的所有p元素

子选择器↓

只改变父元素里面的所有儿子元素，而不改变孙子元素或者重孙元素

例：父元素>子元素{属性:属性值;}    div>p{属性:属性值;}就代表选择div里面所有的儿子p，p里面的却不会被选择

相邻兄弟选择器↓

只改变某个元素后面紧挨着的那个元素

例：某1+某2{属性:属性值;}    div+p{属性:属性值;}就代表紧挨着div的p会被修饰，其他的不会

通用兄弟选择器↓

改变某个元素后面的所有的元素

例：某1~某2{属性:属性值;}     div~p{属性:属性值;}就代表div之后所有的p都会被修饰，其他的不会

CSS文本属性修饰

font-size表示字体的大小，单位可以是px；pt；em等，换算单位是12pt=16px=1em，浏览器默认字体大小为16px。例：{font-size:16px;}

color表示字体的颜色，可以是颜色的英文，也可以是#ff0，或者color:rgb{255,255,255}0-255。

font-family表示字体，当字体是中文字体、英文字体中间有空格是，需要加上双引号，多个字体中间可以用逗号链接，会先解析第一个，电脑没有这个就会依次解析，直到有该字体。

font-weight表示字体加粗，font-weight:bolder（更粗的）、font-weight:bold（加粗）、font-weight:normal（不加粗），也可以用数字表示：font-weight:100-900;其中100-500不加粗，600-900为加粗。

font-style表示字体倾斜，font-style:italic（斜体字）、font-style:oblique（倾斜的文字）、font-style:normal（不倾斜）

text-align表示文本对齐，text-align:left水平靠左、text-align:right水平靠右、tet-align:center水平居中、text-ailgn:justify水平两端对齐，但是只对多行起作用。

line-height表示行高，line-height:**px实现文本垂直居中，**表示行距

font表示文字简写，可以简化代码，但是顺序固定→font-style font-weight font-size/line-height font-family，简写例：font:italic bold 30px/80px "宋体"；而且必须同时指定font-size和font-family才能使用。

text-decoration表示文本修饰，text-decoration:noen表示没有修饰，text-decoration:underline表示下划线、tet-decoration:overline表示上划线、text-decoration:though表示删除线。

text-indent表示首行缩进，text-indent可以是负值，只对第一行起作用、例：text-indent:2em表示首行缩进2个字。

letter-spacing表示字间距，控制文字之间的间距，word-spacing表示词间距。

CSS的背景属性

background-color表示背景颜色，background-color:red;

background-image表示背景图片，background-image:url(图片路径);

background-repeat表示图片平铺，background-repeat:no-repeat(不平铺）repeat（平铺）repeat-x（横向平铺）repeat-y（纵向平铺）

background-position背景图片定位，background-position:水平位置 垂直位置;位置可以给负值，需要居中可以直接书写（center center）

background-attachment表示背景图片固定，background-attachment:scroll（滚动）fixed（固定）固定之后就相对于浏览器不动了。

list-style表示列表属性简写，list-style:none表示去除列表符号。

注：继承性

css继承表示包在内部的标签可以继承外部标签的属性样式，子元素可以继承父元素的属性

可以继承的元素：font-size，font-family，font-style，font-weight，font，letter-spacing，line-height，text-aligh，tet-indent，list-style