html+css

阅读量：6260 次

发布时间：2019-06-22

本文共 3839 字，大约阅读时间需要 12 分钟。

1. 什么是html

hyper 超级 text 文本 markup 标记 language 语言

超文本标记语言，俗称网页

2. html 文件结构

以 .html 或 .htm 结尾的文本文件

1) 标签一般成对出现：<标签名> </标签名>

2) 最外层的标签<html></html> 其它标签必须在它之内

3) doctype 用来说明html的版本如：<!DOCTYPE html>

###1 .格式

            
            网页标题</titie>    </head>            要显示的内容

head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题

主要的是网页中与内容无关的部分

body标签里放的是要显示的内容部分

3. 常用标签

3.1 标题标签

<h1>...<h6> 标题从1到6，字号依次减小

3.2 段落标签（正文）

<p> 可以起到内容换行的作用，普通文本是不会自动换行的

3.3

分隔符 <hr> 不需要结束标签, 加一道横线

换行符 <br> 不需要结束标签, 起到换行的作用

3.4 标签的属性: 格式：属性名="属性值"

可以用来定义标签的宽、高、颜色等等

3.5 图片标签 img

src 属性代表图片路径

更多注释内容

alt 是图片访问不到时的提示文字

width 表示宽度（单位是像素）

height 表示高度（单位是像素）

3.6 超链接 a 【重点】

href 属性表示跳转的目标

方式1:两个网页之间跳转：

超链接提示文字

方式2：网页内跳转 (锚点)

超链接提示文字

方式3：图片作为超链接

3.7 列表

有序列表 (order)


       
     列表项

无序列表 (unorder)


       
     列表项

3.8表格

其中 thead, tbody, tfoot 里又可以分为行与列

<tr> 表示行 '<td>' 表示列

例：

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

与<td>类似的'<th>'，他们都是代表一列，但'<th>'其中的文本默认是居中并加粗

简写 table[border=1] [width=100%]>tbody>tr2>td2

同时生成thead和tbody 需要用() 把他们分组，平级的用+连在一起

table>(thead>tr>td3)+(tbody>tr4>td*3)

行1列1  conlspan用来合并行 2：代表合并2行行1列1  rowspan用来合并列

表单标签

  文本框  密码框  单选, name取值相同的为一组 checked表示默认值为  复选, name取值相同的为一组      普通按钮      重置按钮      提交按钮 文本域

所有标签都有 name="" 带有name的表单在提交时才会把表单值发送给服务器

都有 value=""

都有 readonly 只读可以提交给服务器

都有 disabled 禁用不会提交给服务器

required 是否必填，如果空值，不允许提交表单

4. 行内样式


    <标签 style="多个样式">

4.1 颜色控制

color:颜色值

颜色值可以是英文单词：red，blue，green，yellow, black, white

也可以是红绿蓝三原色： rgb(255,0,0)

还可以是16进制的值来表示： #FF0000

background-color: 背景色

4.2 字体相关的样式

font-size 像素 n px; 字体本身大小 n em;

font-family 字体名称：如宋体，隶书 ...

font-style: italic; 斜体

font-weight: bold; 粗体

文字修饰 text-decoration: 值(line-through 贯穿线， underline 下划线)

4.3 对齐方式

text-align: center 居中， left 左对齐， right 右对齐

4.4 背景相关

background-image: url(背景图片路径)

background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)

background-size: 110px 缩放背景图大小

4.5 div 标签

容器标签，可以容纳其它标签

<div>

<p>

<table>

...

</div>

作用：1）页面布局， 2) 统一处理

4.6 宽高

width: 宽度

height: 高度

单位可以以像素为单位 n px, 还可以是百分比 n %(以父元素为基准)

4.7 边框

border-color: 颜色

border-style: 样式（实线等）

border-width: 宽度

可以把它们合并为一个

border: blue solid 100%;

border-top 上边框

border-right 右边框

border-bottom 下边框

border-left 左边框

style="border-collapse: collapse" 去掉多余的空隙

1. 内间距

标签和内容之间的间隙，称为内间距

padding 可以同时控制4个方向上的内间距

padding : 10px 10px 10px 10px;

上右下左

padding : 20px 5px;

上下左右

padding : 10px

上下左右

padding-top

padding-right

padding-bottom

padding-left

2. 外间距

同级标签之间的间隙，称为外间距

margin: 10px 10px 10px 10px;

上右下左

margin :10px

上下左右

margin-top

margin-right

margin-bottom

margin-left

去掉和网页间的间隙

3. 盒子模型

外间距 --》边框 --》内间距 --》内容

4. z-index

代表该元素在z轴的位置，数字越大越向外, 要配合绝对定位使用

position:absolute; left:x坐标（向右）; top:y坐标(向下)

绝对定位

rgba(红, 绿, 蓝, 透明度)

0~1 0 表示完全透明， 1 表示不透明

5. 样式表

重用样式

格式：

选择器 { 样式 }

首先使用选择器去匹配标签，匹配到的标签就会应用{}之中的样式

5.1 元素选择器

根据标签的名称进行匹配

例如div 是匹配页面中所有的div标签，p匹配页面中所有的p标签 ...

5.2 class 选择器

根据标签的 class 属性的值进行匹配

            .class值 { 样式 }

5.3 id选择器

根据标签的id属性值进行匹配

   id的取值要唯一#id值 {样式  }

5.4 父子选择器

父选择器>子选择器

最终选中的是子选择器匹配的标签，但必须满足条件：父标签要和父选择器匹配

5.5 后代选择器

祖先选择器后代选择器

5.6 伪类选择器

:hover 当鼠标悬浮在标签之上，算匹配

:nth-child 当作为第n个孩子元素, n从1开始

:last-child 当作为最后一个孩子元素

5.7 选择器的优先级

1) 当多个选择器都匹配到同一个标签时，会产生优先级问题：

!important > style行内样式 > #id > .class > 元素

!important 用来提升某个样式的优先级, 写法：

样式 !important

2) 子标签可以从父标签继承某个样式，例如color

子标签自己定义了同名样式，那么它会覆盖父标签的样式

3) 同优先级别的选择器，后定义的会覆盖前面定义的

6. 在网页之间重用样式

需要用到外部样式表，可以把选择器，样式的定义放在一个 *.css 的文件当中（样式表文件）

引入外部的样式表：

好处：可以更大程度地在多个网页间重用样式，让网站的风格统一

内部样式表可以实现本网页特殊的样式，采用覆盖的方法，可以覆盖掉外部样式表的样式

转载于:https://blog.51cto.com/13852519/2175461

你可能感兴趣的文章

【HTML5游戏开发小技巧】RPG情形对话中，令文本逐琢夸出

ASP.NET网页动态添加、更新或删除数据行

查看>>

vbs获取当前主机IP

查看>>

IIS7中的站点、应用程序和虚拟目录详细介绍

查看>>

为何C语言（的函数调用）需要堆栈，而汇编语言却不需要堆栈

查看>>

对Map按key和value分别排序

查看>>

知名第三方编译版tete009 Firefox 24.0

生成CSV文件后再将CSV文件导入到mysql

查看>>

Html.DropDownListFor练习(2)

查看>>

Eclipse+Maven创建webapp项目<一>

查看>>