`

HTML CSS、入门知识点

 
阅读更多

HTML基本结构

文档类型的说明:<!doctype  html public .............>,有三种

<html>的两个属性:dir(文档显示方向),lang(使用的语言)

元素和属性名不区分大小写,大部分属性值不区分大小写,class和id属性的值区分大小写

字符实体:&nbsp表示空格,等等

 

辅助性元素

<title>设置页面标题,网页左上角

<base href="">设置网页基础URL

<link rel="stylesheet" type="text/css"  href="url">链接到css文件

<script type="text/javascript" src="url">链接到js文件

<meta name="XXX"  content="XXX">元数据

<link rel="icon" href="url">定义浏览器左上角小图标

 

网页文本设计

<hn>标题标记

<font face="字体"  size='x' color='#000000' align='center'>

<b>粗体

<strong>粗体

<i>斜体

<em>斜体

<cite>斜体

<big>加大字号

<small>减小字号

<hr>水平分割线

<pre> 将文字按照源代码的样子显示在浏览器上

 

 

列表

<ul><li>无序号的列表

<ol><li>有序号的列表

 

 

超链接

<a href="httpurl">该url必须带有http前缀

<a target="_blank">开到新窗口

<a title='xxx'>链接提示信息

<a href="#html" >  <div id="html">  定义锚点,链接到该div

<a href="mailto:zzqecnu@163.com"> 给邮箱发邮件

<a onclick="return false;">禁用链接

 

 

图像

图像映射(将图像的一部分变成链接):<img usemap="#xxx">  <map name='xxx'><area shap="rect/circle/poly" href='url'></map>

 

表格设计

 <td colspane ='2'>合并左右两个单元格

<td rowspane ='2'>合并上下两个单元格

 <caption>表格标题

<td nowrap>禁止换行

 

表单设计

<form action="url"  method="get/post">

<input type="image">图像按钮

<select><option></option></select>选择列表

<input type=""  disabled/>不可用控件

<input type=""  readonly/>只读控件

 

多媒体

<embed type="XXX"  src="url">插入多媒体

<marquee>滚动文字

 

——————————————      CSS      ————————————————————————

 margin 外留白

padding 内留白

选择器的多各类用空格隔开

@import url("url")导入样式

css优先级:内联样式>嵌入式样式>导入样式>链接样式 

 font-family 字体

font-style:oblique 文字偏斜体

font-weight 加粗

line-height:xx px 行间距

text-align 对齐方式

vertical-align 垂直对齐方式

background-image 背景图片

background-color 背景颜色

background-repeat 背景图片自动平铺

background-position 背景图片位置

text-transform 英文大小写自动转换 

 font-size 文字大小

text-decoration 文字上中下画线

text-indent 首行缩进

 

图片特效

border-style 图片边框类型

border-color 图片边框颜色

border-width 图片边框粗细

box-shadow 块的阴影效果

 

 css高级特效

css中最后一个有效的样式将覆盖前面的有效样式

两个选择器直接连接——交集选择器

两个选择器用逗号连接——并集选择器

两个选择器用空格连接——后代选择器

 

网页布局

div对象本身是一个占据整行的对象

浮动的框可以左右移动,直到其外边缘碰到其包含框或另外一个框的边缘

相对定位(float:left):让这个元素相对于其起点进行移动top或left的值

绝对定位(position:absolute):对象浮在网页上方

悬浮定位(position:fixed):块随着网页滚动条上下移动

overflow:当对象的内容超出其指定的高度和宽度时怎么办

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    html&css入门基础知识点.pdf

    HTML和CSS基础知识点 HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...

    HTML+CSS的入门知识点总结

    HTML+CSS入门知识点总结 HTML(HyperText Markup Language)是用于创建网页的标准标记语言,而CSS(Cascading Style Sheets)是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点,涵盖HTML的基本结构、CSS...

    htmlcss入门基础知识点.pdf

    HTML和CSS基础知识点 HTML(Hyper Text Markup Language)是一种标记语言,用于描述网页的结构和内容。它不是一种编程语言,而是一种标记语言,使用标记标签(markup tag)来描述网页的结构和内容。 HTML的基本...

    html5和CSS知识点分享

    CSS3和html5的知识点总结,适合入门的朋友预览。是学习CSS3之前,预习的好知识点。

    HTML与CSS入门经典 第8版 英文原版

    ### HTML与CSS入门经典 第8版 英文原版 #### 知识点概览 本书《HTML与CSS入门经典 第8版》是一本全面介绍HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)基础知识的专业教材。通过24小时的教学...

    css入门常用的代码

    ### CSS入门常用代码详解 #### 一、如何开始CSS 在编写HTML文档的CSS样式之前,需要对整个页面进行布局分析。这一步骤至关重要,它不仅有助于清晰地规划页面结构,还能确保最终的设计符合预期。 - **分析页面布局...

    Html+Css+Javascript从入门到精通.pdf

    以下是根据该书内容整理出的重要知识点: #### 第一部分:HTML基础知识 **第一章:了解HTML、Web与Internet** - **互联网的起源**:介绍互联网的发展历史及其重要意义。 - **浏览器介绍**:概述主流浏览器的功能...

    HTML与CSS入门经典 第八版.pdf

    根据提供的文件信息,“HTML与CSS入门经典 第八版”似乎是一本专注于介绍HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)基础知识的教材。以下是对该书可能涵盖的一些核心知识点进行的详细解析:...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    通过这个“上百个CSS实例集合”,你可以亲手实践这些知识点,逐步巩固理论并提升实际操作能力。从基础的样式设置到复杂的布局设计,每一个实例都是一个学习和进步的机会,让你的CSS技能更上一层楼。开始探索这个丰富...

    css从入门到精通

    循序渐进的讲述了网页基础知识和CSS布局的实战技术,从基本概念到具体实践、从对网页的认识到制作网页、从使用CSS进行网页局部的设计到进行整个网站的布局制作都进行了详细的阐述,并对具体知识点进行了详细的实例...

    html+css入门小兔鲜项目

    HTML+CSS入门小兔鲜项目 本项目旨在使用 HTML 和 CSS 来构建一个小兔鲜项目,学习目标是能够在网页中使用精灵图,使用背景大小属性,设置背景图片的大小,认识 CSS 写作顺序,提高代码专业性和浏览器渲染性能,以及...

    XHTML与CSS入门经典 从零开始系列教程

    这个"XHTML与CSS入门经典 从零开始系列教程"提供了一条系统学习的路径,旨在帮助新手快速入门并逐步精通。 首先,XHTML(Extensible Hypertext Markup Language)是一种改良版的HTML,它结合了HTML的易用性和XML的...

    html5+css3从入门到精通

    以下是一些HTML5的关键知识点: 1. **新标签**:HTML5引入了许多新的语义元素,如、、、、和,这些元素帮助开发者更好地定义网页内容的结构。 2. **媒体元素**:HTML5的和标签使得直接在网页中嵌入音频和视频变得...

    CSS快速入门.doc

    ### CSS快速入门知识点详解 #### 一、CSS简介 - **定义**:CSS全称为Cascading Style Sheets,即层叠样式表。它是一种用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 - **作用**:通过CSS,...

    HTML与CSS入门经典

    《HTML与CSS入门经典》(第8版)是由Julie C. Meloni所著的一本关于网页设计与开发的实用书籍。这本书作为入门教材,主要讲解了HTML(HyperText Markup Language,超文本标记语言)和CSS(Cascading Style Sheets,...

    HTML5+CSS3从入门到精通.zip

    HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页设计的灵活性和表现力。在JavaWeb前端开发中,熟练掌握这两项技术...通过阅读"HTML5+CSS3从入门到精通1.pdf"这份文档,你可以系统地学习并掌握这些关键知识点。

    XHTML与CSS入门经典-从零开始

    以下是一些核心知识点: 1. **XHTML基本结构**:每个XHTML文档都由文档类型声明(DOCTYPE)、HTML根元素、头元素(head)和体元素(body)组成。了解这些元素及其子元素的用途至关重要。 2. **XHTML标签**:XHTML...

    HTML+CSS网页设计与布局从入门到精通 PDF

    这本书“HTML+CSS网页设计与布局从入门到精通”应该会详细讲解这些内容,帮助读者从基础到高级逐步掌握HTML和CSS的使用,从而能够独立创建出美观且功能完善的网页。无论你是初学者还是希望深化理解的开发者,这都是...

    CSS3 +HTML5入门到精通

    【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开,这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...

Global site tag (gtag.js) - Google Analytics