HTML总结HTML上部分网页开发相关概念网站和网页的关系网站是由多个网页组成的。什么是网页？使用HTML语法编写的html文件，文件后缀是.html或者.htm内容包含文字、链接、音频、视频等使用浏览器打开查看总结：网页就是一个 后缀为 html的文件，由浏览器负责解析生成图形界面HTML简介html是超文本标记语言（Hyper Text Markup Language ）。超文本是什么意思？超文本是指可以链接到另一个文档或文本.网页的形成：网页是由许多html标签包裹文字拼起来的。HTML语法规范：HTML是一种超文本标记语言，由固定的HTML标签组成HTML标签 分类单标签：有些特殊的标签必须是单个出现 如<img /> （就好像现在的我，听说单身的人都很优秀）双标签：标签成对出现，如<html></html> 成双成对标签有两种关系：包含关系(父子)<head> <title></title></head>并列关系(兄弟)<head></head><body></body>HTML基本结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title></head><body> <!-- body和/body标签之间是写html标签的地方 --> <!-- 这里写内容标签（这是注释，网页上看不到，是给我们程序员看的） --> <h1>我是一级标题</h1></body></html>每个网页都会有一个基本的结构标签，（就像你上学要买书包，本子，笔一样）html标签 是根标签head标签：是页面头部title标签：页面的标题body标签：页面的主体。开发环境前端开发神器 vscode下载地址: https://code.visualstudio.com...好用插件（插件不宜过多，安装的多了降低vs code 性能）Chinese 汉化包open in browser 编辑页面右键浏览器打开Matertial Icon Theme 文件图标vs code 设置新建文件：ctrl + n保存文件 ctrl+s,注意文件后缀为.html放大缩小代码字体：ctrl+加号键 或减号键浏览器：首选谷歌chrome下载地址：https://www.google.cn/intl/zh...HTML常用标签标题标签注释标签段落标签换行标签列表标签图片标签与相对路径音频与视频标签超链接标签标题标签h1~h6 大小关系h1>h2>h3>h4>h5>h6<h1> 我是一级标题，我最大</h1><h6> 我是六级标签，我最小</h6>特点：每个标题独占一行标题的文字 加粗，字号加大注释：场景：我们写代码的时候代码多了，所以留下注释说明这段代码的作用给其他开发者看给自己看语法快捷键：ctrl + /<!-- 我是注释 --><!-- 我也是 注释-->特点：注释标签 只能在源码中看到浏览器会忽略注释中的内容，不会显示给用户看段落与换行标签：段落场景：文章内容需要分段显示语法：<p>我是一个段落</p>特点：前后换行，段落间自动空行浏览器宽度不够时自动换行换行场景： 如果希望某段文字强制换行显示，就可以使用换行标签语法：1.单标签2.换行，不空格列表列表场景： 列表标签主要用来自由布局显示数据列表特点： 整齐、有序布局时方便三种列表： 1.无序列表 <ul> <li></li>... </ul> 2.有序列表 <ol> <li></li>... </ol> 3.自定义列表 <dl> <dt></dt> <dd></dd> <dd></dd> <dt></dt>... <dd></dd> <dd></dd> </dl> ul中只能放li 比如 ol中只能放li 比如 dl中只能放dt和 dd 注意dt和dd是兄弟关系，经常一个dt对应多个dd图像标签与相对路径图像场景：在网页中插入指定路径的图片语法：<img src = "图片路径">相对路径的三种分类同级路径 符号 ./下一级路径 符号 ./上一级路径 符号 ../音频标签<audio src="音乐地址" controls> </audio>兼容写法<audio controls> <source src="不同格式后缀路径"> <source src="不同格式后缀路径"> 您的浏览器不支持 audio,升级浏览器，或者点击<a href="音频压缩包地址">下载音频</a></audio>视频标签语法：<video src="路径" controls></video>兼容写法<video> <source src=""> <source src=""> 您的浏览器不支持 audio,升级浏览器，或者点击<a href="音频压缩包地址">下载音频</a></video>链接标签<a href="跳转目标" ></a><!-- 在新窗口打开 --><a href="跳转目标" target="_blank"></a>符号实体常用实体符号空格 大于号 >小于号 <版权 ©HTML下半部分元数据及作用元数据标签：描述网页相关信息的数据，如网页编码、关键词、描述信息、等（搜索引擎优化网站优化）设置关键字：<meta name="keywords" content="定义搜索关键词，有利于搜索引擎收录">设置网页内容描述：<meta name="descripton" content="描述网站做什么的">设置网页重定向：<meta http-equiy="refresh" content="3，url=http://baidu.com">lang语言种类作用：标识 文字内容 所使用的语言语法：<html lang="语言代码"> ...</html><!-- 语言代码有 zh-CN 中文简体 ja 日文 en 英文-->字符集语法：<meta charset="UTF-8">一般都用UTF-8表格基本语法： <table> <tr> <td>单元格内容</td> <td>单元格内容</td> ... </tr> ... </table>table 标签：定义表格tr标签：定义表格行td标签：定义表格单元格表格合并单元格跨行合并（纵向合并）：rowspan = "要合并的单元格个数"跨列合并（横向合并）：colspan = "要合并的单元格个数"表格结构标签：标签解释：thead 标签：定义表格头(复杂的表格头可以有多行)tbody 标签：定义表格主体，主要用来包含数据(一个表格可以有多个表格主体)tfoot 标签：定义表格脚，主要用来包含统计数据(用的少)属性：border：表格边框 cellspacing：单元格间的间距cellpadding：单元格的内容与其边框的内边距 align：表格的对齐方式，通常是left，center，rightbgcolor：表格的背景颜色 background：表格的背景图片width：表格宽度 height：表格高度border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于前两个边框宽度之和caption：表格标题（写在table标签中最前面）表单<form action="提交网址"> <!-- 文字，表单控件 --> </form>百度搜索w3shool网址查看http://www.w3s.com.cn/
