带你从基础学习一步步构建基础网页骨架。从html基础、语法规范到基础结构标签,系统地学习html基础知识,为之后的网页学习打好坚实基础
树图思维导图提供 HTML学习思维导图 在线思维导图免费制作,点击“编辑”按钮,可对 HTML学习思维导图 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:cc4e59065375a5ffd9d984ff9846be33
HTML学习思维导图模板大纲
路径
目录文件夹和根目录
目录文件夹:普通文件夹,收纳了做网页相关的所有素材,如html文件、多媒体文件等
根目录:打开目录文件夹的第一层
相对路径:以“引用文件”为参考建立出的目录路径
同级路径 <img src="img.jpg" />
下一级路径 <img src="images/img.jpg" />
上一级路径 <img src="../img.jpg" />
绝对路径:在电脑中的位置或网络中的地址
<img src="D:\.....\...\....\img.jpg" />或 <img src="http://www.*******.com/.../logo.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”
注释:给程序员看的,不显示在页面中: <!--注释语句--> 快捷键:ctrl+/
特殊字符:一些符号很难或不方便直接使用时用特殊字符来代替 如:在网页中想显示"<p>",需要改为“< p >”再比如空格为 
标题标签
共分六个等级即<h1>-<h6>(h为head的缩写) 作用:作为标题使用,并依据重要性递减,一级最重要
<h1>标题标签均为双标签,有结束标签。</h1>
效果:文字加粗加大,且独占一行
段落标签
将文字分段显示
<p>段落</p> “一段一P”
段与段之间有较大的间隔
换行标签(单标签)
强制换行
这是要换的行<br/>
只有行距,没有较大的间隔
文本格式化标签
加粗
<strong></strong>或<b></b>
斜体
<em></em>或<i></i>
删除线
<del></del>或<s></s>
下划线
<ins></ins>或<u></u>
<div>和<span>标签
无语义,相当于收纳盒,用来装内容
<div>表示分区,独占一行为一个区</div> <span>表示跨度</span><span>一行可以有多个</span>
图像标签
<img src="图像URL"/>
单标签
src是<img/>的必须属性,用于指定文件的路径和文件名
<img/>的其他属性
alt
当图像不能正常显示时所显示的文字
title
鼠标放到图片上时所显示的文字
width / height / border
设置图像的宽度/高度/边框粗细
格式:<img+空格+属性="属性值"+空格+属性="属性值"+......+/>属性不分先后,属性之间必须加空格
超链接标签
从当前网页跳到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式" 文本或图像 </a>
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>
删除多余的单元格
列表标签
作用:布局
无序列表
有序列表
自定义列表
表单标签
作用:收集用户信息
组成
表单域
<form>用于定义表单域,<form>标签会将范围内的表单元素提交给服务器
常用属性
属性
属性值
作用
action
url地址
用于指定接收并处理数据的服务器的url地址
method
C
提交数据的方式,其取值为get或post
name
名称
用于指定表单的名称,以区分同一个页面中的多个表单域
表单元素
input输入表单元素
<input type="属性值" name="属性值" value="属性值" />(单标签)
select下拉表单元素
<select> <option>A</option> <option>B</option> </select>
<option>中定义selected="selected"则此选项被默认选中
textarea文本域
<textarea cols="50"(每行可显示50个字符) rows="10"(可显示10行)> 文本内容 </textarea>
<label>用于绑定一个表单元素
<label for="man"> 男:</lable> <input type="radio" name="sex" id="man"/>
树图思维导图提供 学习的意义与快乐 在线思维导图免费制作,点击“编辑”按钮,可对 学习的意义与快乐 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:e41041065011de1948bf2b2f59b2760c
树图思维导图提供 科技计划项目资金预算编制总体要求的学习和整理 在线思维导图免费制作,点击“编辑”按钮,可对 科技计划项目资金预算编制总体要求的学习和整理 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:49470946de6296e1813ed1ed5efc14ba