认知网页
问:前端人员的工作跟什么打交道答:网页 网页的构成:由文字,图片,超链接,多媒体(音频,视频,Flash)等组成!
浏览器的分类和内核
五大常见浏览器介绍:(内核做个了解)
-
IE (edge)(Trident)
-
火狐(firefox)(Gecko)
-
谷歌(chrome)(blink)
-
苹果(safari)(webkit)
-
欧朋(Opera)(blink 早期:presto )
浏览器的内核相当于汽车的发动机,是最核心的存在,它负责将代码转换成用户眼中的界面
查看统计网站: http://tongji.baidu.com/data/browser
web标准
-
网页的结构(后缀名字为.html的文件)
-
网页的样式(后缀名字为.css的文件)
-
网页的行为(后缀名字为.js的文件)
各司其职:
-
网页的结构:负责网页的内容整理和分类
-
网页的样式:负责设置网页的板式,颜色,文字大小
-
网页的行为:负责网页的动态交互
认知HTML
概念:HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
说白了HTML就是用尖括号包裹起来的英文单词,浏览器对这个尖括号包裹起来的英文单词有特殊的解释
如:<strong>加粗</strong> <h1>大标题</h1> 等等
HTML骨架
HTML有固定的基本格式,就跟我们书信有基本的格式是一样的
<html>
<head>
<title>页面的标题</title>
</head>
<body>
这里写内容
</body>
</html>
HTML的其他介绍
标签的关系
嵌套关系
<html><head></head></html>
并列关系
<head></head><body></body>
HTML的标签分类
双标签:如<strong>标签的内容</strong> 语法:<开始标签> 标签内容 </结束标签>
单标签:<br/>单标签都是功能性的标签,例如换行等功能 里面不需要添加内容 语法:<标签名 />
认知标签
1. 标题标签 <hn>标题内容</hn> 设置一个标题 n的取值范围是1-6 1的权重最高,6最小
2. 段落标签 <p>段落内容</p>
3. 水平线标签 <hr /> 单标签 作用是呈现一个水平线
4. 换行标签 <br /> 单标签 作用是换行
字体格式化标签
5. 加粗字体 <strong>字体加粗</strong> <b>字体加粗</b>
6. 倾斜字体 <em>字体倾斜</em> <i>字体倾斜</i>
7. 字体贯穿线 <del>字体贯穿</del> <s>字体贯穿</s>
8. 字体下划线 <ins>字体下划线</ins> <u>字体下划线</u>
标签语义化
一个需求可以用不同的标签来完成,那么这之间有什么区别呢?一个是标签语义强,起强调作用。一个是没有语义,没有强调作用语义好的网页更受SEO的喜欢,在搜索引擎里面的排名会更靠前
SEO优化 ===> 在输入关键字的时候,搜索引擎会罗列很多很多的网页出来,而用户基本习惯都是点前面的网页,不会去点后面的网页,所以如果网页在搜索引擎中的排名更加靠前,那么自然而然会带来更多的用户点击访问。
如何优化(了解):
1、花钱买关键字 见效快,花钱多
2、让页面更加规范,语义更加明确(在合适的地方使用合适的标签)
3、制作静态页面
4、发外链
标签属性
在使用标签的时候,一个独立的标签比较单一不能完成一些需求 这个时候就可以借助于标签的属性来完成
语法: <标签 属性名1=“属性值1” 属性名2=“属性值2”> 如:<hr color="red"/>
在这里我们只需要了解语法即可 后面还会学习不同的标签不同的属性
图片标签
<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />
图片属性
-
src="图片地址"
-
alt="图片的替换文本"
-
title="图片标题"
-
width="400" height="400"(样式属性后期可以通过css去完成)
路径(地址)
地址分类
绝对地址:从盘符或者http://出发去找目标文件的过程就是绝对路径
<img src="http://www.baidu.com/logo.png">
<img src="c:">
相对地址:从当前文件出发去找目标文件的过程就称之为相对路径
-
如果当前文件和目标文件在同一个文件夹的话,路径直接写目标文件的名称即可
-
如果当前文件和目标文件不在同一个文件夹,那么需要先找到目标文件对应的文件夹
上一级目录 ../
下一级目录 文件夹名/
链接标签
<a href="链接的地址" target="链接的打开方式" /> 只要被a标签包裹就可以跳转
跳转的分类
1. 站外跳转:http://www.baidu.com
2. 站内跳转:写本地文件路径
3. 锚点跳转(页面内部跳转):
在需要跳转的标签上添加 id="自定义id名" 如:<p id="myid"></p>
让a标签的href属性等于之前自己自定义的id名 如:<a href="#自定义的id名字" />
target的取值
-
_self 默认值 覆盖当前页面打开
-
_blank 新窗口打开
列表
列表的分类
-
无序列表
<ul>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ul>
特点:列表之间没有顺序 在实际工作中用的较多
-
有序列表
<ol>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ol>
特点:列表之间有顺序 在实际工作中用的较少
-
自定义列表
<dl>
<dt>列表标题</dt>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
</dl>
特点:可以针对一个列表标题充分解释 特定情况下使用
列表的注意
1. <ul></ul>或者<ol></ol>中只能嵌套<li></li>,直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. <dl></dl>中只能嵌套<dt></dt>和<dd></dd>,直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。
4. <dd></dd>之间相当于一个容器,可以容纳所有元素。<dt></dt>一样
注释标签
浏览器不解析的标签 作用是用来提示开发人员或者便于开发人员理解和阅读sublime快捷生成注释的方式 选中需要注释的文本 ctrl+/
<!-- 注释文本 -->
创建表格
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
-
表格至少有三个基本的标签构成 table 代表一个表格 tr代表行 td代表单元格
-
tr必须嵌套在table标签中,td必须嵌套在tr或者th中
-
有几个单元格就代表有几列
表格属性
width 表格的宽度 (了解)
height 表格的高度 (了解)
border 表格的边框 (了解)
align 表格的对齐方式 (了解)
cellspacing 单元格与单元格的间距
cellpadding 单元格与单元格内容的间距
表格的表头标签
在合适的位置将td替换成th即可 th标签相对td来说更有语义性 并且会将内部的文字加粗且居中
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
表格的结构
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>小强</td>
<td>18</td>
<td>女</td>
</tr>
</tbody>
表格的结构不是一定需要的,但是添加上表格的结构会使表格的语义更明确
合并单元格
跨行合并 rowspan 将rowspan写在上面的单元格上
跨列合并 colspan 将colspan写在左边的单元格上
需要合并几个,这个值就是几,一旦合并,多余的单元格需要删掉多余的单元格
表单
作用:收集用户信息发送给后台三大组成部分:
-
表单域 (将内部包含的表单信息都收集起来发送给后台)
-
提示文本(提示用户当前表单的输入内容)
-
表单 (真正用来收集用户信息)
表单的分类
<input type="">
type的取值:
text 单行文本输入框
password 密码框
radio 单选框(在多个里面选择一个) 单选框要生效必须具备name属性 并且同一种类型的单选框的name取值必须一样
checkbox 复选框(在多个里面选择某几个)
button 普通按钮
file 用户上传控件
submit 提交按钮
其他表单的补充
textarea 多行文本输入框
select 下拉菜单
表单补充
radio和checkbox 默认选中项 checked
select框的默认选中项 selected
label标签的使用
表单域
<form action=""></form>
action 提交的后台地址
method 提交的方法
H5新增的标签及其表单属性
H5新增的标签
header,nav,section,footer,aside,article
这些新增的标签不会带来任何视觉效果的改变,它的作用仅是增加了语义性
header 表示header里面包裹的东西是网站的头部区域
nav 表示nav里面包裹的东西是网站的导航
section 表示里面包裹的东西是网页的某一个模块
footet 表示footer标签里面包裹的东西是网页的页脚
aside 表示aside标签里面包裹的东西是网页的侧边栏
article 表示article标签里面包裹的东西是网页的文章页
详细请查阅文档
H5新增的表单新属性
-
placeholder 占位文本
-
autofocus 自动获取焦点
-
autocomplete 自动补全
-
required 自动验证表单
H5新增的表单
<input type="range"> 滑块
<input type="date"> 日期控件
<input type="number"> 唤醒数字键盘
详细的请查阅文档
多媒体标签
视频
网页中插入视频有两种方法
-
没有兼容性的 将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可
-
优点:没有兼容性
-
缺点:有广告植入
-
-
使用H5新增的video方法
<video src="视频路径">
</video>
-
优点:没有广告
-
缺点:有兼容性,一般运用在手机端
video标签的常用属性
-
autoplay 自动播放
-
controls 播放控件
-
loop 循环播放
-
video的格式支持ogg,MP4,webm 不同的浏览器支持的格式不一样,所以出现了一种兼容写法:前提是准备三种格式的视频文件
<video autoplay>
<source src="视频1.ogg">
<source src="视频1.mp4">
<source src="视频1.webm">
<a href="#">你的浏览器不支持video,点击升级吧</a>
</video>
浏览器会从上到下依次去读,在这个过程中,只要读到自己识别的视频文件就直接播放这个视频文件,并且不会再往后继续读取实测:目前的主流浏览器对Mp4的支持都比较好!!
音频
音频的使用和视频的使用基本一致
<audio>
<source src="音频1.ogg">
<source src="音频1.mp3">
<source src="音频1.wav">
<a href="#">你的浏览器不支持audio,点击升级吧</a>
</audio>
audio标签的常用属性1.autoplay 自动播放2.controls 播放控件3.loop 循环播放
知识补充
字符集的设置
字符集的核心点就是如果设置了以什么字符集进行读取,那么在保存的时候也需要设置成对应的字符集
utf-8 收录了全世界所有国家的语言文字gbk 收录的是汉字
utf-8 > gbk 所以查询来说的话gbk的查询和存储都小于utf-8但是现在国际主流都是utf-8