零基础学HTML+CSS+DIV：网页编程入门关键点解析

1星需积分: 12 78 浏览量更新于2024-09-11 收藏 40KB DOCX 举报

"零基础HTML+CSS+DIV笔记分享，涵盖了HTML的基础规范、W3C标准、常用标签、特殊符号、图像标签、超链接、表单元素和按钮等核心概念，旨在帮助初学者快速入门网页编程。" 在网页设计与开发中，HTML (HyperText Markup Language) 是构建网页内容的基础，CSS (Cascading Style Sheets) 用于控制页面的样式，而DIV则是一种布局工具，常用来组织网页结构。本笔记主要针对零基础的学习者，通过简洁明了的记录，使学习过程更为高效。 HTML的基础规范是构建任何HTML文档的基石。遵循这些规范可以确保代码的可读性和浏览器的兼容性： 1. 所有的标签名和属性名应使用小写字母，如 `<div>` 和 `class="example"`。 2. 每个HTML标签都应有相应的闭合标签，如 `<p>` 和 `</p>`。自闭合标签如 `<img>` 应以 `/` 结尾。 3. 属性值需用引号包围，如 `href="http://example.com"`。 4. 标签应正确嵌套，避免混乱的层次结构。 5. 文档顶部应添加文档类型声明，例如 `<!DOCTYPE html>`，以告知浏览器使用哪种HTML版本。 W3C标准提倡内容和表现的分离，这意味着HTML负责结构，CSS负责样式。语义化HTML标签能提高页面的可访问性和搜索引擎优化。例如，使用 `<h1>` 至 `<h6>` 为页面提供层次结构，使用 `<p>` 标签表示段落， `<strong>` 用于强调， `<em>` 表示斜体，以及使用 `<br>` 进行换行。 HTML中的特殊符号，如 ` ` 用于插入非中断空格，`>` 和 `<` 分别代表大于号和小于号，`"` 用于插入双引号，`©` 则用于显示版权符号。图像标签 `<img>` 包含 `src` 属性指定图片源，`alt` 提供替换文字，`title` 设置鼠标悬停提示，`width` 和 `height` 定义尺寸。超链接由 `<a>` 标签创建，`href` 属性指定链接地址，`target` 可以设置新窗口打开(`_blank`)或其他位置。例如，`<a href="http://example.com" target="_blank">访问示例网站</a>`。表单是网页交互的核心，包括列表、表格和各种表单元素。无序列表 `<ul>` 和有序列表 `<ol>` 用于项目列举，定义列表 `<dl>` 用于术语解释。表格 `<table>` 的属性如 `border`, `width`, `height` 控制外观，`<tr>` 表示行，`<td>` 表示单元格，`rowspan` 和 `colspan` 实现跨行和列。表格的对齐方式有 `align`（水平）和 `valign`（垂直）属性。表单元素包括文本输入框 `<input type="text">`、密码输入框 `<input type="password">`、单选按钮 `<input type="radio">`、复选框 `<input type="checkbox">`、下拉列表 `<select>` 和 `<option>`，以及不同类型的按钮如 `<input type="button">`, `<input type="submit">`, `<input type="reset">`。多行文本输入框 `<textarea>` 允许用户输入多行文本。这些笔记为初学者提供了全面的HTML基础，随着CSS和DIV的深入学习，将能够更有效地创建和布局网页。

HTML 的基础规范

标签名和属性名必须小写。

 标签必须关闭。

属性值必须用引号括起来。

标签必须正确嵌套。

必须添加文档类型声明。

 标准

类容（结构）和表现（样式）分离。

 要求语义化。

标签

标题标签：











水平线标签：换行标签：

段落标签：段落标签：

段落标签：换行标签：

加粗 是倾斜

特殊符号：

空格：大于号：小于号：引号： 

版权号：!"

图像标签的基本语法

#!$%图片地址” &$%图像的替代文字”'$%鼠标悬停提示文字”(#)$%图片宽度”#$%图片高度”

超链接的基本用法

&*$%连接地址”&$%目标窗口位置”链接文本或图像&

===============================================================================

表单

列表： ++#无序列表  种

++#有序列表  种

)++)++))定义和解释

表格：&表格 )$,边框宽度” (#)$,表格宽度” #$,表格高度”

一行

)一列

表格跨行： (&表格跨列： !&

&#-水平对齐方式.：/左对齐

!居中对齐

#右对齐

0&#-垂直对齐方式.1顶端对齐

#))居中对齐

2低端对齐

&#基线对齐

下载后可阅读完整内容，剩余3页未读，立即下载

普通网友

粉丝: 0
资源:
2

零基础学HTML+CSS+DIV：网页编程入门关键点解析

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

经典DIV+CSS模板 经典DIV+CSS模板

html+css+javascript笔记

用html+css写一个小米网页头部

用html+css洗一个小米商城头部

html css实现轮播图

jupyter去笔记边框

公交车路线图HTMLcss

flex公交车路线图HTMLcss

最新资源

经典DIV+CSS模板经典DIV+CSS模板