HTML5
2025-03-12 08:29:08 1 举报
AI智能生成
HTML
作者其他创作
大纲/内容
开始学习html
元素(Element)
所有的元素都需要正确的打开和关闭
块级元素和内联元素
块级元素,独占一行。例如<span></span>
内联元素,不独占一行。例如<h1></h1>
空元素
属性(Attribute) 包含元素的额外信息
双引号包裹
剖析 HTML 文档
<!DOCTYPE html>: 声明文档类型。
<html></html>: <html> 元素。这个元素包裹了页面中所有的内容,有时被称为根元素。
<head></head>: <head> 元素。这个元素是一个容器,它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。
<meta charset="utf-8">: <meta> 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据
<title></title>: <title> 元素。这设置了页面的标题
<body></body>: <body> 元素。包含了你访问页面时所有显示在页面上的内容,包含文本、图片、视频、游戏、可播放音频轨道等等。
HTML 中的空白
无论你在 HTML 元素的内容中使用多少空格(包括一个或多个空白字符或换行),当渲染这些代码的时候,HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。
实体引用:在 HTML 中包含特殊字符
HTML 注释
<!-- <p>我在注释内!</p> -->
HTML 文本处理基础
基础:标题和段落
每个段落是通过 <p> 元素标签进行定义的
每个标题(Heading)都必须被包裹在一个标题元素中:
列表
无序列表
有序列表
嵌套列表
重点强调
<strong>(strong importance)元素来标记这样的情况
斜体字、粗体字、下划线
<i> 被用来传达传统上用斜体表达的意义
<b> 被用来传达传统上用粗体表达的意义
<u> 被用来传达传统上用下划线表达的意义
文本格式进阶
描述列表
标记一组项目及其相关描述,例如术语和定义,或者是问题和答案等。
描述列表使用与其他列表类型不同的闭合标签——<dl>;此外,每一项都用 <dt>(description term)元素闭合。每个描述都用 <dd>(description definition)元素闭合。
引用
块引用 <blockquote>
行内引用 <q>
引文 <cite>
标记联系方式 <address>。
上标和下标 <sup> 和 <sub>
当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标
标记时间和日期 <time>
HTML 中的图片
<img src="dinosaur.jpg" alt="恐龙" />
CSS 背景图片
HTML 元素 举例几个常用的元素
HTML 元素参考
<button> 按钮
form 表单
<input> 输入框
<select> 选择框
<option> 选择框项
<table>:表格元素
HTML 头 <head>
与 <body> 元素内容不同,页面在浏览器加载后它的内容不会在浏览器中显示,它的作用是保存页面的一些元数据。
添加标题 <title>
元数据:<meta> 元素
指定文档中的字符编码 <meta charset="utf-8" />
添加作者和描述
增加自定义图标
<link rel="icon" href="favicon.ico" type="image/x-icon" />
在 HTML 中应用 CSS 和 JavaScript
<link rel="stylesheet" href="my-css-file.css" />
为文档设定主语言
<html lang="zh-CN">
文档与网站架构
文档的基本组成部分
<header>:页眉。
<nav>:导航栏
<main>:主内容
主内容中还可以有各种子内容区段,可用<article>、<section> 和 <div> 等元素表示。
<aside>:侧边栏
经常嵌套在 <main> 中
<footer>:页脚。
HTML 布局元素细节
无语义元素div,span
<span> 是一个内联的(inline)无语义元素
<div> 是一个块级无语义元素
换行与水平分割线
<br>:换行元素
<hr>:主题性中断元素
创建超链接
HTML 表格基础
<table></table>。每一个表格的内容都包含在这两个标签中
最小的内容容器是单元格 <td>
<tr> 表示一行
<th> 标题
HTML 表格进阶特性和无障碍
使用 <caption> 为你的表格增加一个标题
添加 <thead>、<tbody> 和 <tfoot> 结构
<thead> 元素必须包住表格的表头部分。一般是第一行
<tbody> 元素需要包住表格内容的主要部分(不是表头和表尾)
<tfoot> 元素需要包住表格的表尾部分。一般是最后一行
实例练习
0 条评论
下一页