基础概念
什么是网页
网页由文字、图片、音频、视频、超链接五部分组成,网页的背后的本质为前端程序员写的代码,代码是通过浏览器转换(解析和渲染)成用户看到的网页
有哪些常用浏览器和渲染引擎
常用的浏览器为:IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)
渲染引擎(浏览器内核):浏览器中专门对代码进行解析和渲染的部分,渲染引擎不同,导致解析相同代码时的 速度、性能、效果也不同的
浏览器 内核 备注 IE Trident IE、360极速浏览器、猎豹安全、百度浏览器 FireFoX Gecko 火狐浏览器内核 Safari Webkit 苹果浏览器内核 Chrome / Opera Blink Blink是Webkit的分支
web标准
Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一!
Web标准中分成三个构成:
构成 语言 说明 结构 HTML 页面元素和内容 表现 CSS 网页元素的外观和位置等页面样式(如颜色、大小) 行为 JavaScript 网页模型的定义与页面交互
HTML基本标签
HTML常用双标签
<head>表示头部标签
<meat>表示描述标签
<title>表示标题标签
<body>表示网页主体部分,一般为源代码
<p>段落标签
<h1>-<h6>标题标签,其中h1为最大,h6为最小
<a>超链接;href属性:链接地址,必填项,通常也可以填锚链接、邮箱等;target属性:定义打开链接为当前页面还是新建标签页打开,常用属性为_blank、_top;
锚链接:需要定义跳转的锚点,通常为id、name等,然后再需要定义的超链接,href值为#加id或name的值,实现跳转到锚点。
跳转到邮箱:在href值中添加mailto:加邮箱号
<strong>粗体字
<em>斜体字
<ins>下划线<del>删除线
<audio>音频,常用属性为autoplay(自动播放) coltorls(进度条)loop(自动播放)
<vudio>视频,常用属性为autoplay(自动播放) coltorls(进度条) loop(自动播放)
谷歌默认禁用自动播放,需要在谷歌中设置后生效
<ol><li>有序列表
<ul><li>无序列表
<dl><dt><dd>自定义列表:;其中<dl>为标签<dt>为列表名称<dd>为列表内容
<table><tr><td>表格:其中,<td>常用属性为占用多行/多列(excl里的合并单元格):clospan="4"/rowspan="4";文字居中设置:style="text-align:center;"
<select>下拉框
<option>下拉框里边的值 seletes:默认选项
<iframe>内联标签
给一个name属性值,和a标签联合使用(target=“name属性值”)可以实现点击a标签显示需要跳转的页面(a标签中href的链接)
<from>表单
常用属性为action:提交表单的位置,路径可以为网页、可以是一个处理请求;method:提交的请求为get、post方法,其中,get不安全,可以在网页上方链接看到账号密码,post相对安全,在网页上方链接看不到账号信息
HTML常用单标签
<br>强制换行
<hr>分隔符
<img>图片;src属性:图片地址;title:鼠标悬浮是出现的描述;alt:在图片路径错误时或图片损坏时显示的描述。width:定义图片的宽度;height:定义图片的高度
<input>输入框
input常用属性:
type:指定元素类型,常用属性为:text(文本)、password(密码)、checkbox(多选框)、radio(单选框)、submit(提交)、 reset(重置)、file(文件)、hidden(隐藏)、image(图片)、button(按钮),placeholder(输入框提示信息) required (非空判断) pattern (正则表达式) 默认为text
其他type不常用的元素:emali(邮箱,会判定是否加有@符号)、URL(验证是否为http://或https://开头)、number(数字,max最大可输入的数字 min最小可输入的数字 step 每次增加的次数)、range(音量划块 max最大值 min最小值 step每次增加的音量)、search(搜索框 跟text框相比,输入文本之后后面可以一键清除)flie(文件域)、textarea(文本域 cols行宽 rows列宽)
name:指定表单元素名字
value:指定元素的值,type为radio时必须指定一个值
size:元素初始宽度,当tpe为text或password时,表单大小以字符为大小,其他类型宽度均为像素为单位
maxlength:type为text或password时的最大长度
chencked:type为redio或chenkbox时,指定按钮是否被选定