HTML与CSS学习笔记：基础与常见标签解析

html

需积分: 9 169 浏览量更新于2024-07-16 收藏 8.8MB DOC 举报

身份认证购VIP最低享 7 折!

30元优惠券

“Html+Css.doc 是一份个人整理的HTML与CSS学习笔记，共计120页，内容清晰，包括效果截图和代码示例，非常适合HTML和CSS初学者作为参考。” HTML（HyperText Markup Language）是一种标记语言，常用于创建网页。CSS（Cascading Style Sheets）则用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。这两者是网页开发的基础，HTML负责结构，CSS负责样式。在HTML中，基本格式通常包括文档声明、HTML元素、头部元素和主体元素。例如： ```html <!DOCTYPE html> //HTML5文档声明，告诉浏览器使用哪个HTML版本解析 <html lang="en"> //表明文档的语言编码，这里是英文 <head> //头部元素，包含元信息，不可见 <meta charset="utf-8"> //声明字符编码，避免乱码 <title>MyWebPage</title> //声明文档标题 </head> <body> //主体元素，存放可见内容 goodgoodstudy! daydayup! </body> </html> ``` HTML中的常用标签： - ``：用于添加注释，浏览器会忽略这些内容。 - `<meta>`：提供文档的额外信息，如作者、描述、关键词等，也可以设置编码、刷新页面等。 - `<h1> to <h6>`：定义标题级别，越大字号越小，用于组织文档结构。 - `<p>`：定义段落，自动添加行间距。 - `<pre>`：保留文本格式，如空格和换行。 - `<b>` 和 `<strong>`：加粗文字，`<strong>`更强调语义，适合CSS扩展。 - `<i>` 和 `<em>`：斜体，`<em>`同样强调语义，CSS中可扩展功能。 - `<del>` 和 `<s>`：删除线，表示内容被删除，CSS中可区分用途。 - `<u>`：下划线，用于表示链接或其他强调。 - `<ins>`：下划线并强调，表示新添加内容。 - `<small>`：小号字体，常用于免责声明或次要信息。 CSS用于美化HTML元素，通过选择器和属性来定义样式。例如，改变文本颜色： ```css p { color: blue; } ``` 这个例子中，所有段落（`<p>`标签）的文本颜色都会变为蓝色。CSS允许更复杂的布局和样式控制，如浮动、定位、盒模型、响应式设计等。这份笔记涵盖了HTML基础和CSS基础知识，对于初学者来说，是一个很好的起点，可以帮助理解和应用这些基本概念，逐步掌握网页设计的核心技能。通过实例和效果截图，学习者可以直观地看到代码的效果，提高学习效率。

资源详情

资源推荐

【nav 元素】

·用来定义目录、导航栏、超链接。通常用它给超链接分组用来定义导航栏，包

括主导航栏，和侧边导航栏

·并非所有的超链接都放在 nav 元素中，通常只把一个文档中的主导航栏放在

nav 中

·在文章页面中，nav 还可以用来给一个文字做一个目录的超链接

time

·time 元素代表 24 小时中的某个时刻或某个日期，表示时刻时允许带时差。它

可以定义很多格式的日期和时间

·datetime（用来给浏览器、搜索引擎识别）属性中日期与时间之间要用"T"文字

分隔，"T"表示时间。请注意倒数第二行，时间加上 Z 文字表示给机器编码时使

用 UTC 标准时间，表示向机器编码另一地区时间，如果是编码本地时间，则不

需要添加时差。

·pubdate 属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那

个日期是文章、新闻的发表日期。

<time datetime="2015-10-22T20:00+09:00"> 美国时间 2015 年 10 月 12 日 8

点</time>

hgroup/address

【hgroup 元素】

通常用来给标题分组，通常放在 header 中；但是并非强制要求，也不是绝对的。

<h1>我是主标题</h1>

<h1>我是副标题</h1>

</hgroup>

</header>

【address 元素】

·通常用用来说明作者的联系信息，例如名字，E-mail，电话，地址等

·address 元素中的内容会以斜体显示。

figure/figcaption

【figure 元素】

figure 元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图

像、图表等等。道理类似 hgroup（对标题分组），它是对媒体元素分组。

【figcaption 元素】

用来给 figure 元素定义标题。

表单

form

·用来定义一个表单，是建立表单的基础元素，（就类似定义表格的 table）

·表单的其他元素包含在 form 元素中，其主要子元素有：input/button/select......

属性

action：指定表单的发送地址（服务器地址）

method：表单数据发送至服务器的方法，常用的有两种：get/post

target：指定在何处打开 action 属性所指定的 URL 目标。可以添加 target=

“_blank”在新窗口中打开提交页面

novalidate：设置数据提交时不进行验证 novalidate=“”

enctype：规定在发送到服务器之前应该如何对表单数据进行编码。通常情况下

我们使用默认值即可

当 method 设定发送方式为 get 时，不必设置该属性；

当 method 设定发送方式为 post 时该属性才有效；

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，

在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符

号转换为 ASCII HEX 值）。

当值设为"multipart/form-data"时表示：不对字符编码。在使用包含文件上传

控件的表单时（比如当 input 的 type 值为 file 时），必须使用该值。

text/plain:空格转换为 "+" 加号，但不对特殊字符编码。

accept：指定服务器处理表单时所能接受的数据形态，一般默认即可

accept-charset：规定服务器处理表单数据所接受的字符集。 accept-charset 属性

允许您指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表

单中的数据。通常情况下我们使用默认值即可，此属性的默认值是

"unknown"，表示表单的字符集与包含表单的文档的字符集相同

get

和

post

提交的区别

get 方法提交（默认方法），数据会附在网址之后主动提交给服务器，安全隐患

较大

file:///C:/Users/Administrator/Desktop/1/www.hao123.com?

user=Owl_Baby&password=666666666

post 方法提交，数据不会附在网址后，会将数据打包发送给服务器，等候服务

器来读取数据进行处理

input

·用来设置表单中的内容项，比如输入内容的文本框，按钮等

·不仅可以布置在表单中，也可以在表单之外的元素使用

属性

属性属性值作用

剩余63页未读，继续阅读

「已注销」

粉丝: 10
资源: 8

HTML与CSS学习笔记：基础与常见标签解析

毕向东HTML_CSS_JavaScript教程笔记

html+css.doc

用lxml.etree+Xpath或者beautifulsoup +CSS Selector获取html_doc.html文件中的所有超链接。

员工应聘登记表html+css+div

word丢失css.css

php电商网站开发流程图,php网上购物平台设计+ER图+流程图.doc

free spire.doc for .net html首行不缩进问题

java 解析text/html数据

阿里 web前端开发规范手册.doc

用html和css.javaScript等技术，写一个可以在网页上输入某个网站地址就能下载该网站的所有图片

java解析html

html实现图表的源代码,HTML5表格制作源代码.doc

写一个Java爬虫，爬取网页上css样式

html实现可以发送doc/txt文件的在线聊天室源码

网页设计html5留言板代码,web网页设计期末大作业_留言板制作.doc

如何在HTML到DOCX转换时保持CSS样式？

请分别生成几篇python的MySQL操作、scoket通信、flask框架、html、css、javas的参考文献，请以标准格式给出

计算机基础知识 事业编,事业单位考试计算机基础知识大全.doc

最新资源

计算机基础知识事业编,事业单位考试计算机基础知识大全.doc