HTML 基础概念
THML名称
HyperText Markup Language 超文本标记语言,简称HTML。
认识 html
<!DOCTYPE html> //声明html5文档 <html> //根元素 <head> //文档声明 <meta charset="utf-8" /> //使用utf-8字符集 <title>页面标题</title> //浏览器标签名，搜索引擎搜索的主要依赖<html> <head> 0.指定页面页面关键字有助于seo 优化，指定页面宽度和缩放比例<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 1.可以存放的是编码方式，如 <meta charset="utf-8"> 2.可以存放网页标题，如 <title>hello world</title>，书写这段代码有助于浏览器的seo抓取 3.可以写CSS样式代码，如<style type="text/css"> css代码 </style> 4.还可以链接外部的的css文件，如<link rel="stylesheet" href="css/css01.css"> 5.可以写JavaScript代码，如<script type="text/javascript"> javascript代码 </script> 6.还可以链接外部的JavaScript文件，如<script type="text/javascript" src="js/js01.js"></script> </head> <body> 这里是HTML页面的主体部分。可以存放文字段落、视频、音频文件、表格、表单等主要内容。 前端程序员主要书写的html代码也就是这部分代码，内部含有多种多样的标签 </body> </html> 以上这些代码组成了一个HTML页面文件，即.html文件。
字符集
| 字符集 | 说明 |
|---|---|
| UTF-8 | 字多，有各种国家的语言，但是保存尺寸大，文件臃肿； |
| gb2312 | 字少，只用中文和少数外语和符号，但是尺寸小，文件小巧 |
seo优化
搜索引擎优化（SEO）是一项通过优化网站内容和结构，以提高在搜索引擎结果页中的排名和可见性的过程。它旨在通过针对特定关键词和搜索查询进行优化，吸引更多的有机（非付费）流量，并提高网站的可信度和权威性
HTML基础语法
语法形式
大多数标签是以双标签的形式成对出现，少数标签以单标签的形式出现，各种字符(如空格，table缩进等等)在html中需要被特殊形式字符所替换，每个标签的样式是由内部的属性来控制
分类和归纳
特殊字符集
< - &lt; - 小于号 > - &gt; - 大于号 & - &amp; - 和号 " - &quot; - 双引号 ' - &apos; - 单引号 (在 XML 中使用) © - 版权符号 ® - 注册商标符号 ™ - 商标符号 ° - 度符号 × - 乘号 ÷ - 除号 ♥ - 心形符号 © - 版权符号 © - 版权符号 © - 版权符号
{xmind我已经放置下文，自行下载}
块元素
块级（block）元素的特点：
-
总是在新行上开始；
-
高度，行高以及外边距和内边距都可控制；
-
宽度缺省是它的容器的 100%，除非设定一个宽度；
-
它可以容纳内联元素和其他块元素
块元素
块级（block）元素的特点：
-
总是在新行上开始；
-
高度，行高以及外边距和内边距都可控制；
-
宽度缺省是它的容器的 100%，除非设定一个宽度；
-
它可以容纳内联元素和其他块元素
可变元素
根据上下文确定块状元素和内联元素：
标签枚举
-
<a>:-
作用：定义超链接。
-
内部属性：
href（目标 URL）、target（打开方式）、title（鼠标悬停提示）等。
-
-
<abbr>:-
作用：定义缩写。
-
内部属性：
title（完整的含义）。
-
-
<address>:-
作用：定义地址信息。
-
无内部属性。
-
-
<area>:-
作用：定义图像映射区域。
-
内部属性：
shape（形状）、coords（坐标）、href（目标 URL）等。
-
-
<article>:-
作用：定义文章。
-
无内部属性。
-
-
<aside>:-
作用：定义侧边栏内容。
-
无内部属性。
-
-
<audio>:-
作用：定义音频。
-
内部属性：
src（音频文件 URL）、controls（控件显示）等。
-
-
<b>:-
作用：加粗文本。
-
无内部属性。
-
-
<base>:-
作用：定义基准 URL，用于相对链接。
-
内部属性：
href（基准 URL）。
-
-
<bdi>:-
作用：定义文本方向。
-
无内部属性。
-
-
<bdo>:-
作用：定义文本方向。
-
内部属性：
dir（方向）。
-
-
<blockquote>:-
作用：定义引用块。
-
内部属性：
cite（引用来源 URL）。
-
-
<body>:-
作用：文档主体。
-
无内部属性。
-
-
<br>:-
作用：换行。
-
无内部属性。
-
-
<button>:-
作用：定义按钮。
-
内部属性：
type（按钮类型）、value（按钮值）等。
-
-
<canvas>:-
作用：绘制图形。
-
内部属性：
width、height（画布尺寸）。
-
-
<caption>:-
作用：定义表格标题。
-
无内部属性。
-
-
<cite>:-
作用：引用作品标题。
-
无内部属性。
-
-
<code>:-
作用：定义计算机代码。
-
无内部属性。
-
-
<col>:-
作用：定义表格列的属性。
-
内部属性：
span（列数）、width（列宽）等。
-
-
<colgroup>:-
作用：定义一组表格列的属性。
-
内部属性：
span（列数）、width（列宽）等。
-
-
<data>:-
作用：定义机器可读的数据。
-
内部属性：
value（数据值）。
-
-
<datalist>:-
作用：定义输入字段的选项列表。
-
无内部属性。
-
-
<dd>:-
作用：定义定义列表中的描述。
-
无内部属性。
-
-
<del>:-
作用：定义删除的文本。
-
内部属性：
cite（删除原因 URL）、datetime（删除时间）。
-
-
<details>:-
作用：定义详细信息。
-
内部属性：
open（默认是否展开）。
-
-
<dfn>:-
作用：定义术语。
-
无内部属性。
-
-
<dialog>:-
作用：定义对话框或对话框容器。
-
无内部属性。
-
-
<div>:-
作用：通用容器。
-
无内部属性。
-
-
<dl>:-
作用：定义定义列表。
-
无内部属性。
-
-
<dt>:-
作用：定义定义列表中的术语。
-
无内部属性。
-
-
<em>:-
作用：强调文本。
-
无内部属性。
-
-
<embed>:-
作用：嵌入外部资源。
-
内部属性：
src（资源 URL）、type（资源类型）、width、height等。
-
-
<fieldset>:-
作用：定义表单字段集。
-
无内部属性。
-
-
<figcaption>:-
作用：定义图表或表格标题。
-
无内部属性。
-
-
<figure>:-
作用：定义图表
-
或表格容器。无内部属性。
-
-
<footer>:-
作用：定义页脚。
-
无内部属性。
-
-
<form>:-
作用：定义表单。
-
内部属性：
action（表单提交 URL）、method（提交方法）、enctype（编码类型）等。
-
-
<h1>:-
作用：定义标题 1。
-
无内部属性。
-
-
<h2>:-
作用：定义标题 2。
-
无内部属性。
-
-
<h3>:-
作用：定义标题 3。
-
无内部属性。
-
-
<h4>:-
作用：定义标题 4。
-
无内部属性。
-
-
<h5>:-
作用：定义标题 5。
-
无内部属性。
-
-
<h6>:-
作用：定义标题 6。
-
无内部属性。
-
-
<header>:-
作用：定义页眉。
-
无内部属性。
-
-
<hr>:-
作用：水平线。
-
无内部属性。
-
-
<i>:-
作用：斜体文本。
-
无内部属性。
-
-
<iframe>:-
作用：内联框架。
-
内部属性：
src（框架内容 URL）、width、height等。
-
-
<img>:-
作用：插入图像。
-
内部属性：
src（图像 URL）、alt（替代文本）、width、height等。
-
-
<input>:-
作用：定义输入字段。
-
内部属性：
type（字段类型，如文本、复选框、单选按钮等）、name（字段名称）、value（字段值）等。
-
-
<ins>:-
作用：定义插入的文本。
-
内部属性：
cite（插入原因 URL）、datetime（插入时间）。
-
-
<kbd>:-
作用：定义键盘文本。
-
无内部属性。
-
-
<label>:-
作用：定义表单标签。
-
内部属性：
for（关联字段 ID）。
-
-
<legend>:-
作用：定义表单字段集的标题。
-
无内部属性。
-
-
<li>:-
作用：定义列表项。
-
无内部属性。
-
-
<main>:-
作用：定义主要内容。
-
无内部属性。
-
-
<map>:-
作用：定义图像映射。
-
内部属性：
name（映射名称）。
-
-
<mark>:-
作用：标记文本。
-
无内部属性。
-
-
<menu>:-
作用：定义上下文菜单。
-
无内部属性。
-
-
<menuitem>:-
作用：定义菜单项。
-
内部属性：
type（类型）。
-
-
<meta>:-
作用：提供文档元信息。
-
内部属性：
charset（字符编码）、name（名称）、content（内容）等。
-
-
<meter>:-
作用：定义度量衡。
-
内部属性：
value（值）、min（最小值）、max（最大值）等。
-
-
<nav>:-
作用：定义导航链接。
-
无内部属性。
-
-
<noscript>:-
作用：在脚本不可用时提供替代内容。
-
无内部属性。
-
-
<object>:-
作用：嵌入多媒体资源。
-
内部属性：
data（多媒体资源 URL）、type（资源类型）等。
-
-
<ol>:-
作用：定义有序列表。
-
内部属性：
type（列表类型，如数字、字母等）、start（开始值）等。
-
-
<optgroup>:-
作用：定义选择框选项组。
-
无内部属性。
-
-
<option>:-
作用：定义选择框选项。
-
内部属性：
value（选项值）、selected（默认选中）等。
-
-
<output>:-
作用：定义计算结果输出。
-
无内部属性。
-
-
<p>:-
作用：定义段落。
-
无内部属性。
-
-
<param>:-
作用：为插入的对象定义参数。
-
内部属性：
name、value等。
-
-
<pre>:-
作用：定义预格式化文本。
-
无内部属性。
-
-
<progress>:-
作用：定义进度条。
-
内部属性：
value、max等。
-
38. <q>: - 作用：定义短引用。 - 内部属性：cite（引用来源 URL）。
-
<rp>:-
作用：定义 ruby 注释的起始括弧。
-
无内部属性。
-
-
<rt>:-
作用：定义 ruby 注释的文本。
-
无内部属性。
-
-
<ruby>:-
作用：定义 ruby 注释。
-
无内部属性。
-
-
<s>:-
作用：不建议使用，通常表示删除的文本。
-
无内部属性。
-
-
<samp>:-
作用：定义计算机程序输出。
-
无内部属性。
-
-
<script>:-
作用：包含 JavaScript 代码。
-
内部属性：
src（脚本文件 URL）、type（脚本类型）、async、defer等。
-
-
<section>:-
作用：定义章节。
-
无内部属性。
-
-
<select>:-
作用：定义选择框。
-
内部属性：
name、size、multiple等。
-
-
<small>:-
作用：定义小号文本。
-
无内部属性。
-
-
<source>:-
作用：定义多媒体资源的源。
-
内部属性：
src、type等。
-
-
<span>:-
作用：通用行内容器。
-
无内部属性。
-
-
<strong>:-
作用：强调重要性。
-
无内部属性。
-
-
<style>:-
作用：定义内部样式表。
-
无内部属性。
-
-
<sub>:-
作用：定义下标文本。
-
无内部属性。
-
-
<summary>:-
作用：定义详细内容的摘要。
-
无内部属性。
-
-
<sup>:-
作用：定义上标文本。
-
无内部属性。
-
-
<table>:-
作用：定义表格。
-
内部属性：
border、cellpadding、cellspacing等。
-
-
<tbody>:-
作用：定义表格主体。
-
无内部属性。
-
-
<td>:-
作用：定义表格数据单元格。
-
内部属性：
colspan、rowspan等。
-
-
<textarea>:-
作用：定义文本区域。
-
内部属性：
name、rows、cols等。
-
-
<tfoot>:-
作用：定义表格页脚。
-
无内部属性。
-
-
<th>:-
作用：定义表格头单元格。
-
内部属性：
colspan、rowspan等。
-
-
<thead>:-
作用：定义表格头部。
-
无内部属性。
-
-
<time>:-
作用：表示日期和时间。
-
内部属性：
datetime（日期时间值）。
-
-
<title>:-
作用：定义文档标题，显示在浏览器标签页上。
-
无内部属性。
-
-
<tr>:-
作用：定义表格行。
-
无内部属性。
-
-
<track>:-
作用：为
<video>或<audio>元素定义文本轨道。 -
内部属性：
kind、src、srclang等。
-
-
<u>:-
作用：不建议使用，通常表示下划线文本。
-
无内部属性
-
-
<ul>:-
作用：定义无序列表。
-
无内部属性。
-
-
<var>:-
作用：定义变量。
-
无内部属性。
-
-
<video>:-
作用：定义视频
-
内部属性：
src（视频文件 URL）、controls（控件显示）、width、height等。
-
-
<wbr>:-
作用：定义换行机会。
-
无内部属性。
-
第一次书写文章，排版略有欠缺，
3152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
