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>
:-
作用:定义换行机会。
-
无内部属性。
-
第一次书写文章,排版略有欠缺,