导图社区 html基础知识

html基础知识

如何使用html基础知识，构建基础网页骨架？下图带你从基础学习一步步构建基础网页骨架。从html基础、语法规范到基础结构标签，系统地学习html基础知识，为之后的网页学习打好坚实基础。

编辑于2020-07-03 15:40:47

欧拉欧拉

他的近期作品查看更多>>

html基础知识

社区模板帮助中心，点此进入>>

欧拉欧拉

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 32.9k
- 2.3k
- 380
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 14.4k
- 182
- 12
Kacyun
域控上线
- 1.5k
- 11
- 4
jackrao
python思维导图
- 5.3k
- 241
- 8
(*^▽^*)
css
- 1.2k
- 43
- 3
A张舫
CSS
- 3.2k
- 188
- 33
journey
计算机操作系统思维导图
- 4.1k
- 202
- 18
journey
计算机组成原理
- 1.5k
- 70
- 8
journey
IMX6UL(A7)
- 497
- 4
- 1
Handler XU
考试学情分析系统
- 654
- 10
- 1
蒋龙

HTML学习

基础

路径

目录文件夹：普通文件夹，收纳了做网页相关的所有素材，如html文件、多媒体文件等

相对路径：以“引用文件”为参考建立出的目录路径

同级路径 <img src="img.jpg" />

下一级路径 <img src="images/img.jpg" />

上一级路径 <img src="../img.jpg" />

绝对路径:在电脑中的位置或网络中的地址

用vscode创建html文件

打开VS code，新建文件（Ctrl+N），保存(Ctrl+S)为“.html”文件,输入“！”，按下Tab键或者新一点的版本可以直接创建html文件

语法规范

html标签是由尖括号包围的关键词如<html>，通常成对出现如<html></html>。第一个是开始标签，第二个是结束标签，结束标签比开始标签多一个反斜杠“/”。也有极少数特殊情况，为单标签，如<br/>，关键词后有“/”结束标志。

标签之间的关系

包含（嵌套）

并列

基本结构标签（骨架）

“<html></html>”HTML标签

页面中最大的标签，亦称“根标签”

“<head></head>”文档的头部

在head标签中必须包含title标签

"<title></title>"文档的标题

“<body></body>”文档的主体

notebook中写的代码，最后另存为html格式就能打开，显示body中的文字“牛逼plus”

HTML的注释和特殊字符

注释：给程序员看的，不显示在页面中：  快捷键：ctrl+/

特殊字符：一些符号很难或不方便直接使用时用特殊字符来代替如：在网页中想显示"<p>"，需要改为“< p >”再比如空格为&nbsp

HTML常用标签

标题标签

共分六个等级即<h1>-<h6>（h为head的缩写）作用：作为标题使用，并依据重要性递减，一级最重要

<h1>标题标签均为双标签，有结束标签。</h1>

效果：文字加粗加大，且独占一行

段落标签

将文字分段显示

<p>段落</p> “一段一P”

段与段之间有较大的间隔

换行标签（单标签）

强制换行

这是要换的行<br/>

只有行距，没有较大的间隔

文本格式化标签

加粗

斜体

删除线

下划线

<div>和<span>标签

无语义，相当于收纳盒，用来装内容

<div>表示分区，独占一行为一个区</div> <span>表示跨度</span><span>一行可以有多个</span>

图像标签

单标签

src是<img/>的必须属性，用于指定文件的路径和文件名

<img/>的其他属性

alt

当图像不能正常显示时所显示的文字

title

鼠标放到图片上时所显示的文字

width / height / border

设置图像的宽度/高度/边框粗细

格式：<img+空格+属性="属性值"+空格+属性="属性值"+......+/>属性不分先后，属性之间必须加空格

超链接标签

从当前网页跳到另一个页面

href:用于指定链接目标的url地址 target:用于指定链接页面的打开方式，其中"_self"为当前页面打开，"_blank"为在新窗口中打开

链接分类

外部网站

内部链接：网站站点内部页面的相互链接

空链接：herf="#"

下载链接：herf="***.zip/doc/exe"

锚点链接：快速定位到网页中的某个位置

步骤：1.属性设置#名字的形式如<a href="#名字">他的名字是</a> 2.目标位置的标签里添加id属性=名字如<h1 id="名字">小猪佩奇</h1>

布局

表格标签

作用：显示、展示数据

基本语法

<table></table>用于定义表格

<tr></tr>用于定义表格中的行，必须嵌套在table标签中

<td></td>用于定义表格中的单元格，必须嵌套在tr中

表头单元格标签

<th></th>加粗居中显示

表格的相关属性

align

对齐方式

border

边框，默认为""无边框

cellpadding

单元格边沿与内容之间的空白，默认1像素

cellspacing

单元格之间的空白，默认2像素

width/height

表格的宽/高度

表格结构标签

头部：<thead>

内部必须有<tr>标签，一般位于第一行

主体：<tbody>

合并单元格

方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

目标单元格

跨行：最上侧的单元格

跨列：最左侧

步骤

确定合并方式

找目标单元格，写合并代码，如<td colspan="2"></td>

删除多余的单元格

列表标签

作用：布局

无序列表

<ul>定义无序列表，<li>定义列表项

<ul>中只能放<li>标签，但<li>标签中可以放其他内容

有序列表

<ol>定义有序列表，<li>定义列表项（有一定的顺序）

自定义列表

<dl>描述自定义列表，<dt>和<dd>为列表项，通常一个<dt>对应多个<dd>

表单标签

作用：收集用户信息

组成

表单域

<form>用于定义表单域，<form>标签会将范围内的表单元素提交给服务器

<form action="url地址" method="get/post" name="表单域名称"> 各种表单元素 </form>

常用属性

属性

属性值

作用

action

url地址

用于指定接收并处理数据的服务器的url地址

method

get/post

提交数据的方式，其取值为get或post

name

名称

用于指定表单的名称，以区分同一个页面中的多个表单域

表单元素

input输入表单元素

<input type="属性值" name="属性值" value="属性值" />（单标签）

type的常见属性

button

定义可点击按钮

checkbox

定义复选框

file

定义输入字段和“浏览”按钮，供文件上传

hidden

定义隐藏的输入字段

image

定义图像的提交按钮

password

定义密码字段。字符被掩码

radio

定义单选按钮

reset

定义重置按钮。会清楚表单中所有数据

submit

定义提交按钮，发送到服务器

text

定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符

name

定义元素名

单选按钮和复选框要有同样的name值

value

定义元素值

checked

规定此input元素首次加载时应当被选中

maxlength

规定输入字段中的字符的最大长度

select下拉表单元素

<option>中定义selected="selected"则此选项被默认选中

textarea文本域

<label>用于绑定一个表单元素