HTML/CSS 笔记

最新推荐文章于 2024-08-12 15:57:18 发布

Quietw

最新推荐文章于 2024-08-12 15:57:18 发布

阅读量204

点赞数

分类专栏： HTML/CSS 前端

本文链接：https://blog.csdn.net/Mr_Quiet/article/details/81909429

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML/CSS

6 篇文章 0 订阅

订阅专栏

HTML

DTD文档

声明必须是HTML的第一行，位于<html>标签之前。
DTD文档模型在HTML4中有三种模式，而在HTML5中只有一种模式。
DOCTYPE不是HTML标签，它不区分大小，它没有结束标签。

HTML5

<!DOCTYPE html>

html5当中只使用这一种类型的DOCTYPE，现在大部分网站都使用html5。

HTML4.01 Strict严格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

该DTD包含所有HTML元素和属性，但不包括展示性和弃用的元素（比如font）。不允许框架。

HTML4.01 Transitional过渡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

该DTD所包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font）。不允许框架。

HTML4.01 Frameset框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

该DTD等同于HTML4.01Transitional，但允许框架集内容。

几种标签

<meta>：用来告知浏览器关于文档的附加信息，如定义页面使用语言，自动刷新并指向新页面，网页定级评价，控制页面显示窗口等。meta标签共有两个属性，分别是http-equiv属性和name（用于描述网页）属性。

语法格式：<meta name = "参数" content = "具体数值">，常用的属性参数有keyword、description、auther，设置文档字符集（charset="UTF-8"）和移动开发的一些设置等。

<H1>：有align属性，能自动换行，能自动换行的都有align属性。

<span>:里面不能嵌套换行标签

<div>:自动换行，里面能嵌套任何标签

<sup>\<sub>：上标\下标

<font>：有size和color属性

<img>：title：鼠标放上去有提示信息，alt：占位符，align设置对其方式：有5个可选值，top，bottom，middle，left，right

<a>：在ie中给img加a标签会有边框

<table>：style="border-collapse:collapse"，为表格设置合并边框模型；cellpadding属性：表格内边距；cellspacing属性：表格之间的距离；rowspan，colspan合并单元格；

表单

<form action="success.html" method="post">
	账号：<input type="text" name="username" id="" value="" placeholder="请输入账号"/>
	密码：<input type="password" name="password" id="" value="" placeholder="请输入密码"/>
	<input type="submit" name="" id="" value="登录"/>
	<input type="reset" name="" id="" value="清空"/>
</form>

fieldset>legend：边框+文字

特殊属性：required（必填）、readonly（只读）

H5特殊属性：date，clolor，range，search等

块级标签与行内标签

块级标签：H1~H6，hr，p，table，tr，div，form等

内敛标签：font，i，u，del，b，span，a，td，input，select，textarea等

HTML5新增元素

http://www.runoob.com/html/html5-intro.html

常见HTML5新增标签：

header
footer
article
aside
details
summary：detail中的标题
figure：规定独立的流内容，具有缩进功能
figcaption：figure的标题
mark：标记
nav：导航链接
meter：用来表示范围已知且可度量的内容
ruby：加注释，和rt一起用，rt的内容会显示在文字上面，相当于拼音
progress：进度条
datalist：定义选项列表，通常与input使用，可用于模糊查询

CSS

有三种使用方式：行间样式表，内部样式表，外部样式表，还有@import（不推荐使用）。

display：inline-block：不独占一行的块元素。

background-attachment：设置背景图片是否跟着滚动。

text-overflow：文本溢出修饰，同时设置white-space不自动换行（nowrap），over-flowhidden。

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

text-transform：文字大小写。

vertical-align：设置多个内容垂直对齐方式，在td中能直接用。

一般高度由内容撑开。

属性选择器：

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。