HTML 快速复习

加粗不用特别记忆

HTML扩展名

　　.html 和.htm

<!DOCTYPE html>声明，引用官方DTD文件，DTD文件时对标签的使用进行定义。

<html>

<head>

　　<title>

　　　　name ="keywords" 告诉搜索引擎网页关键字

　　　　　　　 "description"告诉搜索引擎网站主要内容

"author" 介绍作者信息

"Refresh"网页定制跳转需要添加URL =""

content = "xx,xx,xx"

　　<style>

<body>

<h1> ~<6> 大小递减

　　align = ""

center、left、right、justify

<ul>

<table>

&nbsp

&lt

常用选择器、标签、类、ID、属性选择器

#a .b p{color:red;} *{}四种选择器

Css具有继承性，text font line开头的属性一级color属性都可以继承

！import>行内>ID>类>标签

ul .mylist li a {} 后代选择器

ul>li {} 子代选择器

伪类选择器（查其他资料）

UI元素状态选择器

属性选择器 [class^=d] {}

块级元素总是独占一行，宽度、高度、内边距、外边距都可控制

行内元素和相邻行内元素在同一行表示，宽度、高度、内边距的 padding-top/padding-bottom 和外边距的margin-top/margin-bottom都不可改变，

但是内边距padding-left/padding-right和外边距的 margin-left/margin-right都可以改变

浏览器还有默认行内元素他们拥有内在尺寸，可设置高宽，但是不会换行，比如input、img、buttom

font-weight 定义字体粗细

font-style 设置字体风格，字体显示样式。

　　normal 默认

　　oblique 倾斜字体

　　italic 斜体

inherit 从父元素继承

font-size 设置字体大小

　　设置px

　　larger 相对父元素字体尺寸相对增大

　　smaller 相对父相对减小

　　lenght 百分比或浮点数单位组成长度值

font-family 设置字体类型

　　：微软雅黑；：华文彩云；

line-height 设置行高 px单位

字体复合属性：

font ：

　　顺序

　　font -style font -variant font -weight font-size font -family

　　后两个必须保持顺序前三个可以不写或者打乱顺序

文本颜色属性：

color

　　red

　　#a3c70c

　　rgb(xxx,xxx,xxx)

首行缩进text-index

　　百分比、浮点数、单位表示、允许负值

字体间距 letter-spacing

　　取值可以为正可以为负 em、px

单词间距 word-spacing

文本对齐方式 taxt-align

　　center

　　left　

　　right

　　justify 文本两端对齐

　　inherit 继承父元素对齐

文本垂直对齐 vertical-align

可以使用服务器字体

rbga（）和opacity 区别

rbga作用于文字本身透明度，opacity作用于元素及内所有子元素透明度。

图像格式

GIF，图像文件小、下载块、可执行透明区域

PNG，不失真，剑油GIF和JPG色彩模式，网络传输快、无损数据压缩。

标签<img>

参数：

alt 图片不显示时的替代文本 text

title 为元素提供信息

src 路径 url

height 高度 px %

width 宽度 px %

相对路径以index.html做参照

边框

border ：px style color

1px solid #16457ff；

border-radius 设置图像圆角。

可以设置4个值，设置一个值时表示4个角设置相同圆角。

box-shadow 设置图像阴影

box-shadow：x,y,blur,color ; x,y表示垂直位移，blur表示模糊半径最后一个颜色

图像与文字的对齐方式

.class{

vertical-align:

} 放在img的class中

图文混排设置图片浮动

背景颜色：

background-color:

背景图：

background-image：url（“src”）；

背景图平铺

background-repeat : no-repeat; 一般用no-repeat

背景图位置：

background-position

可以单独指定

left top 如果仅指定一个位置其他值都是center

background-position：%x，%y 使用百分比左上角0%0% ，右下角100% 100%;

background-position:px,px;

inherit 从父元素继承

渐变背景

线性渐变（linear-gradient）和径向渐变(radial-gradient)

linear-gradient(方向，颜色1，位置1，颜色2，位置2...)

兼容参数

-webkit-linear-gradient(方向，颜色1，位置1，颜色2，位置2...)

常用

background ：-webkit-linear-gradient(方向，颜色1，位置1，颜色2，位置2...)

line-height 和height设置一样大小，可以实现单行文字垂直居中。

超链接

target 打开方式

值：_blank在新窗口中打开，_self在自身窗口中打开

可以定义图片热点区域，一张图片上有多个不同的超链接

锚点

超链接到其他页面的锚点

text-decoration：none;去掉超链接中的下划线

a:link 设置a未被访问前的样式

a:visited 设置a对象在某链接地址已被访问过的样式

a:hover 设置a对象在鼠标指针悬浮时的样式

a:active 设置a对象在被用户点击未松开的样式

display：none 与visibility：hidden区别？

display：none 会把元素完全溢出不占空间，visibility元素继续占用空间只是不可见

display是非继承的，visibility：visible是继承的。

<ul> <li></li></ul> 列表

ul参数

list-style：设置符号一般为none；可以设置图片数字字母

css sprites 是精灵图将一个页面所有涉及的图片制成一张大图，利用background进行背景定位，减少http请求，提高性能

为什么现在开发很少使用table布局？

由于html中table标签卢兰速度慢，table内容是自适应的，为了自适应需要计算，可能出现一段时间空白。

表单基本结构

form

属性action、method、name

表单input标签

常用type

text、password、hidden（隐藏域）、radio、checkbox

<label> 标签，在label元素内点击文本就会触发此空间

设置label的for属性与其相关元素id属性相同

自定义按钮

与input的button相比可以提供更强大的功能，按钮中可以包括图像或者文本。

属性：

name、type、value（初始值）、disabled（是否禁用）

</select>

使用<fieldset><legend> 将表单内相关元素分组

</fieldset>

多行文本域

input新的表单类型

email、url、number、range（一定范围数字值输入域）、rdata pickers（日期选择器）、search（搜索域）、color（颜色选择器）、tel电话验证

meter定义度量衡比如磁盘用量、查询结果相关性

progress定义运行中任务进度、进程、入下载文件到本地的进度值

keygen提供验证用户的可靠方法。

formaction 属性让表单内的元素提交到不同url

formmethod 属性可以动态的设置表单以post或者get方式提交，覆盖form元素原有的method属性。一般设置在submit上

autofocus 属性用于页面加载完后，某个表单自动获得焦点 autofocus=“autofocus”

placeholder 属性用于设置文本框或者文本域中未输入内容时显示的内容，当用户获得该文本框的焦点或输入时候，该属性值就会消失。

list属性需要结合<datalist>标签一起使用。

</datalist>

效果是类似百度搜索框的下拉菜单

autocomplete 属性，是否启动自动完成功能，自动完成功能当用户在字段开始输入时，浏览器基于之前的输入的值显示出在字段中填写的选项。

HTML5 新增客户端效验

required 表单不能为空属性值可以使required或省略

pattern 定义表单满足相应的正则表达式。

novalidata 禁用整个表单验证功能

必填表单

posted on 2020-04-20 10:56 thotf 阅读(389) 评论(0) 收藏举报

刷新页面返回顶部

thotf

HTML 快速复习

导航

公告