HTML+CSS基础入门教程

需积分: 10 106 浏览量更新于2024-07-20 收藏 2.7MB PDF 举报

"HTML+CSS基础教程" HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 是构建网页和实现网页样式的两大核心技术。HTML是网页内容的基础，负责组织网页的结构，如标题、段落、链接和图像等元素。而CSS则是用来美化这些元素的，设定字体、颜色、布局等视觉表现。 1. HTML标签语法 HTML标签通常由英文尖括号包围，分为开始标签和结束标签，例如`<p>`和`</p>`代表一个段落。标签可以嵌套，但需注意嵌套顺序，确保开始与结束标签匹配。HTML标签不区分大小写，但推荐使用小写。 1.1 常用HTML标签 - `<h1>`至`<h6>`用于定义标题，`<h1>`是最大标题，`<h6>`是最小标题。 - `<p>`表示段落。 - `<a>`创建超链接，如`<a href="http://example.com">链接文本</a>`。 - `<img>`插入图片，如`<img src="image.jpg" alt="图片描述">`。 - `<div>`是块级元素，常用于布局。 - `<span>`是内联元素，用于组合文本或应用样式。 1.2 `<head>`标签的作用 <head>标签包含文档的元数据，如标题、字符集设置、样式表引用、脚本等。其中： - `<title>`定义了浏览器顶部的标题栏内容，对SEO（搜索引擎优化）至关重要。 - `<meta>`标签提供文档的元信息，如描述、关键词、字符集等。 - `<link>`用于引入外部样式表，如`<link rel="stylesheet" href="style.css">`。 - `<style>`标签内可以直接编写CSS样式，控制页面样式。 1. HTML的固定结构基本的HTML文档结构如下： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title>  </head> <body>  <h1>标题</h1> <p>段落内容</p>  </body> </html> ``` `<!DOCTYPE html>`声明文档类型，`<html>`是整个文档的根元素，`<body>`包含所有可见网页内容。 CSS与HTML的分离原则提倡将样式代码放入外部样式表文件（如style.css），以提高代码可维护性和可重用性。通过`<link>`标签引用外部样式表，可实现这一目标。了解并掌握HTML和CSS的基本概念和用法，是成为一名合格的前端开发者的第一步。通过不断实践和学习，可以创建出功能丰富、视觉美观的网页。同时，随着技术发展，学习JavaScript和其他前端框架（如React、Vue等）将使你具备更全面的Web开发能力。

xhtml1.0 版本 <hr/>

注意：现多采用 xhtml1.0 版本，这种版本相对规范。<hr/>标签与<br/>标签一样是一

个空标签，因而只有一个开始标签，没有结束标签。<hr/>标签在浏览器中的默认样式

线条比较粗，颜色为灰色(可通过后期 CSS 样式表进行修改)。

（11）<address>标签:为网页加入地址信息。网页中网站的联系地址信息需要在网页

中展示出来，也可是电子邮件地址、签名、文档的作者身份。

语法:

<address>联系地址信息</address>

(样式默认为斜体，可用 CSS 样式修改)

(12)<code>标签、<pre 标签>;<code>标签为加入一行代码（囊括一行，只需一组代

码），<pre>标签为加入多行代码（囊括多行，只需一组代码）。

例如;

<pre>

var message=“欢迎”；

for(var i=1；i<=10；i++)

{

alert(message)；

}

</pre>

语法:

<pre>语言代码段</pre>

(<pre>标签作用:预格式化的文本，被 pre 元素包围的文本通常会保留空格和换行

符。)

(13)<ul>标签、<ol>标签;添加信息列表。<ul>标签无顺序之分，每项自带一个圆点；

<ol>标签有顺序之分，每项默认自带一个序号，由 1 开始依次递增。

语法：

<ul>

······

</ul>

<ol>

······

</ol>

(14)<div>标签与 id 属性:排版，可将信息作为独立的逻辑部分划分出来，比如，网页

中的独立的栏目板块，就是这样一个逻辑部分。

语法:

剩余25页未读，继续阅读

隔壁逗皮菌

粉丝: 0
资源: 5

HTML+CSS基础入门教程

html + css 基础学习.zip

html+css基础代码

HTML+CSS基础知识点.pdf

HTML+CSS基础

html+css基础.md

html+css基础知识总结

HTML+CSS基础.pptx

HTML+CSS基础教程-介绍HTML和CSS的基础知识 学习HTML基础语法、标签、CSS基础语法和选择器

html+css基础知识点整合

html+css基础总结（思维导图）

最新资源

HTML+CSS基础教程-介绍HTML和CSS的基础知识学习HTML基础语法、标签、CSS基础语法和选择器