HTML+CSS必要掌握知识点总结

HTML 和 CSS是网页设计的基础技术，要学习这两者，以下是几个关键知识点：

一、HTML结构：

              理解基本的HTML标签及其用途，如, <h1>到<h6>(标题），<p> (段落)，<a> (超链接)，<img> (图像)，<div> (容器)，<hr> (水平线)，<ul><ol><dl>(列表)，<table>表格，<form>表单等。你需要知道如何创建页面内容、布局和组织元素。

1.1、标题标签h1-h6

特点：自动加粗，依次减小。h1最大，h6最小。

水平对齐方式属性：align{属性值是 left  right  center }

1.2、描述性的简单标签

<br> 换行    <b>加粗    <i> 倾斜     <u>下划线    <s>删除线    <font>文字

---

1.3、水平线标签  <hr>

属性：        color 颜色     width 宽度     size  粗细、高度    align 水平对齐（默认居中对齐）

1.4段落标签  <p>   

&nbsp        一个英文空格

&ensp        半个字空格

&emsp        一个字空格

&gt                >(大于号)

&lt                <(小于号)

&copy         版权（©）

&reg           注册（®）

注释：段落有水平对齐方式属性 align（属性值：left right center）

1.5、图像标签 <img>

src             路径（绝对路径和相对路径）

alt              图片非正常加载时显示提示文字

title            鼠标滑过时显示提示文字

width          宽度

height         高度

border        边框

1.6、 列表标签 <ul> <ol> <dl>

1.6.1 无序列表<ul>

快捷键： ul>li{填写内容}*5（任意数字）

可以使用type属性修改项目符号类型

属性值：disc             默认实心圆

              circle            空心圆

              none             无    

               square        小方块

1.6.2 有序列表<ol>

快捷键： ol>li{填写内容}*5（任意数字）

可以使用type属性修改默认符号类型

属性值：1（默认值） a、A、i、I

可以使用start属性修改起始值

可以使用reversed属性设置倒序

1.6.3 自定义列表

自定义列表多用于图文混排，包含两部分内容：dt（定义项） dd（描述项）

快捷键： dl>dt+dd

dl 父级标签  表示列表盒子

dt 子级标签  表示存放图片或者名词

dd 子级标签  表示对图片或者名词的解释

   1.7 、超链接 <a>

        在互联网中，超链接可谓是无处不在，它是web网页中用于连接不同资源的一种机制，使得网页能够进行跳转，它允许用户点击文字或图片，从而跳转到另一个页面、文件、电子邮件地址或执行其他操作，一个网站之中的页面也必须通过超链接连接起来才能称之为网站。

连接源：文字、图片

链接目标：网页、文件、邮箱、网址、应用程序exe、空连接【#】等。

快捷键：ul>li*5(任意数字）>a[#]{任意文字}*5（任意数字）

【#】          #填任意链接

按（tab）键补齐

---

锚点链接：【跳转到当前页面任意位置】

第一步：设置锚点  id属性设置 （属性名必须符合命名规范)

第二步：跳转到锚点（#锚点名）

1.8、表格标签<table>

表格标签中的table标签：代表整个表格，也就是一对table标签就是一个表格。

tr标签：代表整个表格中的一行数据，一对tr标签就是表格中的一行。

td标签：代表表格中一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。

快捷键：table>tr*5(任意数字)>td{内容}*5（任意数字）

属性：width        height        bgcolor

table（width height bgcolor background border cellspacing cellpadding）

tr   (height bgcolor background align valign垂直对齐方式)

td（width bgcolor background align valign colspan水平合并 rowspan 垂直合并）

制作表格步骤：

给tr设置bgcolor=white            （tr的背景色覆盖掉table的背景色）

给table设置cellspacing=1       （调整边框的粗细）

合并的步骤：

设置rowspan=数字，合几为一，就等于几

删除掉被合并的单元格

1.9、表单标签 <form>

        表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。

   表单标签包括：下拉列表 select、文本域textarea、输入框input。

输入框<input>

使用type属性，可以修改输入框的类型

在radio单选框中，必须使用name设置同一组，才能实现单选

在文本框密码框中使用placeholder设置模糊提示文字

下拉列表<select>

下拉列表select是一个整体，里面要包含选项option

运行结果

文本域<textarea>

cols        控制列数/宽度

rows        控制行数/高度

maxlength        控制最大长度/限制字数

二、css样式表

     CSS样式表是一种用于描述HTML文档样式的语言。它使我们能够将样式信息与结构信息分离，使得网页设计更加灵活，易于维护。

2.1 CSS基本选择器

2.2 CSS的使用方式

1.行内样式（优先级最高，不建议使用）

2.内部样式（只能修改一个页面，重用率低）

3.外部样式（可以修改任意页面，重用率高）

2.3文字样式

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

注意：具有统一前缀的属性，可以复合写。

2.4 文本样式

2.5 列表样式

类型 :        list-style-type: square(方块); disc(圆点); circle(圆圈); none（无);

图像 :        list-style-image: url(https://blog.csdn.net/);

位置 :        list-style-position: outside;(外) inside;

2.6 背景样式

本篇文章到这里也就结束了，以上就是为大家总结的HTML+CSS常用知识。