目录
今天开始，我们才真正的走进web开发前端，开始系统的学习几种语言。我们先从最基本的HTML语言开始学习
第一部分 认识html
一.语言概述
html语言是用来描述网页结构的一种标准语言。“超文本”就是通过超链接的形式，将文本有机的组织在一起；“标记”是指应用一些预先定义好的标签来描述网页的标题、段落、图片、超链接等内容，每种标签都具有特定的含义
二.所含内容
1.标签
标签通常由开始标签和结束标签成对组成，标签名代表特定含义。
<title> 前端开发 </title>
/开始标签/ /内容/ /结束标签/2. 属性
标签可以由属性来描述它的具体属性。属性由属性名和属性值构成，由=号链接，
属性由“”括起来。属性可以由多个组成，其先后顺序不影响含义
3.元素
标签与其包含的文本内容共同构成了html元素，元素呈嵌套结构
- 父元素、子元素、兄弟元素
- 空元素
-
<html> <body> <h1> </h1> //h1和p为兄弟元素 <p> </p> </body> </html>
第二部分 常见的HTML标签
一.有关文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
</html>注解：
<!DOCTYPE html> 这个声明文档类型，浏览器将按照HTML5标准解析文档
<html lang="en"> 浏览器将按照英语标准解析
<meta charset="UTF-8"> 声明网页字符集的 编码方式。注意保存网页时的编码方式要与其一致
二.语义化结构标签
div标签用于划分区域，本来没有特定含义，以下为一系列的语义化结构标签
| header | 页眉，可以作为整个页面的页眉，也可以是某个部分的页眉 |
| nav | 导航条 |
| footer | 页脚 |
| main | 页面的主要内容，一个页面只能使用一次 |
| aside | 侧栏 |
| article | 可以独自被外部引用的内容，能用article就用article |
| section | 用于一段主题性的文字 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<div id="container">页面全部内容的容器
<header>页眉
<nav>导航条</nav>
</header>
<div id="sidebar">边栏条
<aside>边栏一</aside>
<aside>边栏二</aside>
</div>
<main>内容
<article>文章一</article>
<article>文章二</article>
</main>
<footer>页脚</footer>
</div>
</body>
</html>三.HTML常见的标签
1. 有关文本的标签
- 标题h1--h6，每级标题默认加粗显示
- 段落 p：将正文文字划分为一个段落，每个段落结束后自动换行。段落内不会自动换行
- 段内换行 br
<p>html语言是用来描述网页结构的一种标准语言。“超文本”就是通过超链接的形式，将文本有机的组织在一起；“标记”是指应用一些预先定义好的标签来描述网页的标题、段落、图片、超链接等内容，每种标签都具有特定的含义</p>
<p>html语言是用来描述网页结构的一种标准语言。<br/>“超文本”就是通过超链接的形式，将文本有机的组织在一起；<br/>“标记”是指应用一些预先定义好的标签来描述网页的标题、段落、图片、超链接等内容，每种标签都具有特定的含义 
(段内换行的例子）
- 预留格式pre：默认情况下，段落内连续的空格只会被显示成一个空格，预留格式可以按照文本原本的格式显示在页面中
- 段内组合span：可以组合一小段文字，对其进行单独样式设置
- 强调：strong，默认加粗显示；em，默认斜体显示
- 水平分割线：<hr/>,线条样式不可以设置，width设置宽度，align设置左右对齐
<hr width="500" align="left"/>（表示水平分割选，宽度500左对齐）
2.超链接标签 <a> </a>
- 跳转到外部网站
<a href="网站地址">学习网站</a> ，点击学习网站之后，会跳转到相应网页去
- 跳转到本网站的另一个页面
两个网页一定要在同一个文件夹内
<a href="网页名">学习资料</a>
- 跳转到当前页面的特定位置
<article id="top">..........</article> <!--定义锚点-->
<p><a href="#top">返回顶部</a> <!--跳转锚点-->- 虚拟超链接：当跳转位置不定时，采用虚拟超链接
<a href="#">学习网站</a>
3.图像、音频、视频
- 图像：格式为.jpg .gif .png
<img src="图片位置+文件名+拓展名" alt="替换文字"/>
最好让图片和文件在一个文件夹里
- 音频 常见的的音频格式为ogg、MP3、wav
src取值有文件位置、文件名、拓展名构成，controls属性可选，取值“co ntrols”表示显示控制条；loop属性可选，取值“loop”表示循环播放
<audio src="音频文件" controls="controls" loop="loop"></audio>- 视频 视频格式MP4、WEBM、OGG
<video src="视频文件" controls="controls" loop="loop" width="视频宽度"></video>4.列表、表格
- 列表：有序列表、无序列表 、自定义列表
有序列表
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>无序列表
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>自定义列表
<dl>
<dt>....</dt> <!--列表项-->
<dd>....</dd> <!-- 列表项描述 -->
</dl>- 表格
| table | 表头 |
| caption | 表格标题 |
| thead | 表头 |
| tr | 表格中的一行 |
| th | 表头单元格（内容） |
| tbody | 表体 |
| tfoot | 表尾 |
border：添加边框；rowspan：合并行、纵向合并；colspan：合并列、横向合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lizi</title>
</head>
<body>
<table border="1">
<caption>订单列表</caption>
<thead>
<tr>
<th>订单号</th>
<th>商品</th>
<th>价格</th>
</tr>
<tr>
<th>001</th>
<th>图书</th>
<th>45</th>
</tr>
</thead>
</table>
</body>
</html> 
5.表单
表单域
<form name="表单名称" method="get|post" action="后端处理页面">
表单元素
</form>name:表单名称
method:发送表单数据的方法。get：用于安全性要求较低；post：安全性较高
action ：向何处发送表单数据，即处理表单数据的后端页面
- 文本框、密码框
<form>
账户： <input type="text" name="userName" placeholder="请输入用户名"/> <br/>
密码: <input type="password" name="userPsd" placeholder="请输入密码"/>
</form>text:文本框；password:密码框；placeholer：用于显示在文本框的输入提示
- 提交按钮、重置按钮
<input type="submit|reset" name="名称" value="内部文本"/>
submit:提交按钮；reset：重置按钮
<form>
aihao: <input type="text">
<input type="submit" value="确定"/>
<input type="reset" value="重置"/>
</form>- 单选框、复选框
<input type="radio|checkbox" name="名称" value="值" checked="checked"/>
type:取值为radio时表示为单选框；checkbox为复选框
checked：当设置为“checked”时，该选项为默认选项
- 下拉列表
<form>
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
</form>- 按钮
<button><img src="baidu.png"></button>- 文本域
<textarea cols="50" rows="10">在这里输入内容.....<./textarea>
cols:列数值；rows:行数值
以下是标签总结，若有不全，请读者谅解
| 类别 | 标签名 | 含义 | 类别 | 标签名 | 含义 |
| 文本 | h1-h6 | 标题（1-6级） | 媒体 | img | 图像 |
| p | 段落文字 | audio | 音频 | ||
| br | 段内换行 | video | 视频 | ||
| pre | 预留格式 | 超链接 | a | 超链接 | |
| span | 段内组合 | 列表 | ol | 有序列表 | |
| strong | 黑体强调 | ul | 无序列表 | ||
| em | 斜体强调 | dl | 自定义列表 | ||
| 表格 | table | 表格 | li | 列表项 | |
| caption | 标题 | 表单 | form | 表单 | |
| thead | 表头 | input | 详见下表 | ||
| tbody | 表体 | select | 下拉列表 | ||
| tfoot | 表尾 | option | 下拉列表选项 | ||
| tr | 行 | label | 标签 | ||
| td | 数据单元格 | button | 按钮 | ||
| th | 表头单元格 | textarea | 文本框 | ||
| ------ | 其他 | hr | 水平分割线 | ||
| ----- | 注释 | <!-- --> | 注释 |
| 标签名 | 属性 | 属性值（记得加双引号） | 含义 |
| input | type | text | 文本框 |
| password | 密码框 | ||
| submit | 提交按钮 | ||
| reset | 重置按钮 | ||
| radio | 单选框 | ||
| checkbox | 复选框 |
第三部分 认识浏览器
一.基本概念
浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。
二.浏览器的组成
三.主流浏览器的分类
三.浏览器的内核
以上资料均来自与百度百科。我对浏览器的了解实在少
所有人都应该了解的浏览器发展史，内核 userAgent 一个视频全了解！_哔哩哔哩_bilibili求三连，求关注参考https://zh.wikipedia.orghttps://humanwhocodes.com/blog/2010/01/12/history-of-the-user-agent-stringhttp://litten.me/2014/09/26/history-of-browser-useragenthttps://wwww.huxiu.com/article/312327
https://www.bilibili.com/video/BV1YE411A75H?from=search&seid=17531250904322644489&spm_id_from=333.337.0.0【干货】浏览器是如何运作的？_哔哩哔哩_bilibili揭秘浏览器运行原理，让你彻底搞定HTML是如何渲染到页面上的。
https://www.bilibili.com/video/BV1x54y1B7RE?from=search&seid=11251713719960347877&spm_id_from=333.337.0.0
这一周的预习，不仅让我巩固复习了所学的HTML标签，更让我架构了对于HTML的一个整体框架的了解，唯一遗憾的是，之前对于浏览器的了解少之又少，实在写不出什么东西，希望在课堂上可以学到更多的知识
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
