HTML和css的入门知识点有哪些

这篇文章主要介绍了HTML和css的入门知识点有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML和css的入门知识点有哪些文章都会有所收获，下面我们一起来看看吧。

成都创新互联成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟，建立了一套“以技术为基点，以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目，如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、成都app软件开发公司、移动网站建设、微信网站制作、软件开发、雅安服务器托管等实行标准化操作，让客户可以直观的预知到从成都创新互联可以获得的服务效果。

一，web前端技术

问题：你写网页能不能遵循web标准？你知不知道web前端技术都有什么？

Web前端技术是由w3c组织制定的一系列技术的集合，主要包括：

HTML – 结构标准： 负责网页内容（布局）

CSS – 表现标准、样式标准：美化

JavaScript，简称js，行为标准：负责行为动作、表单验证、数据交互

二，html发展历史

html1.0 – 1993年起草了一个草案，纯文本格式

html2.0

html3.0

html4.0 – 意识：语法松散：Aa – xhtml1.0（x表示严格型的，相对严格：能兼容低版本） -- xhtml2.0（想法：绝对严格） -- 浏览器厂商反对：咱们自己研发html自己用 – html5.0

最终：html5.0仍然是w3c研发

工作：xhtml1.0 + html5.0

vscode:

标签语法：  <标签的名字>内容 -- 双标记

<标签名> -- 单标记

标题： h2-h7

段落  p

布局区块： div

特殊效果文字小图片： span

图片标签 – img

HTML概述及HTML文档基本结构

HTML概述

HTML是HyperText Mark-up Language的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。

HTML文档基本结构

一个html的基本结构如下：

或者：

第一行是文档声明，第二行是“”标签和最后一行“”定义html文档的整体，“”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
 

HTML文档快速创建

新建一个html文档后，可以用快捷键的方式快速创建html文档。快捷键：！+ tab键，或者html:5+tab键

HTML标签入门

标签语法：

学习html语言就是学习标签的用法，html常用的标签有20多个，学会这些标签的使用，就基本上学会了HTML的使用。

标签的使用方法：

块元素标签（行元素）和内联元素标签（行内元素）

标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：

块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。

内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

常用块元素标签

1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小

2、段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距

3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

常用内联元素标签

1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线

2、通用内联容器标签，具有内联元素基本特性，没有其他默认样式

3、图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。

其他常用功能标签

1、换行标签

2、html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

常用html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体，代码如下：

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。

布局示例

根据网页布局的原理以及上面的实例，写出网页的html结构代码。

标签语义化

在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名（也叫做SEO），其次是方便代码的阅读和维护。

带语义的标签

1、h2——h7：表示标题

2、p：表示段落

3、img：表示图片

4、a：表示链接

不带语义的标签

1、div：表示一块内容

2、span：表示行内的一块内容

所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。

css概述

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css基本语法

css的定义方法是：

选择器 { 属性：值； 属性：值； 属性：值；}
 

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：

css引入页面的方式有三种：

1、行内式：通过标签的style属性，在标签上直接写样式。

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

3、外链式：通过link标签，链接外部样式文件到页面中。

1、标签选择器

标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。

举例：

2、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

3、层级选择器

主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。

关于“HTML和css的入门知识点有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML和css的入门知识点有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。