目录
今天开始,我们才真正的走进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/312327https://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的一个整体框架的了解,唯一遗憾的是,之前对于浏览器的了解少之又少,实在写不出什么东西,希望在课堂上可以学到更多的知识