网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等…
常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。
平时称为五大浏览器。
浏览器内核(渲染引擎): 负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
为什么需要 Web 标准
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:
1. 让 Web 的发展前景更广阔。
2. 内容能被更广泛的设备访问。
3. 更容易被搜寻引擎搜索。
4. 降低网站流量费用。
5. 使网站更易于维护。
6. 提高页面浏览速度。
Web 标准的构成
主要包括结构(Structure) 、表现(Presentation)和行为(Behavior)三个方面。
简单理解: 结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中
2. <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
3. <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
4. <meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析.
<p> 我是一个段落标签 </p> 段落和段落之间保有空隙
<br /> 换行标签 是个单标签,没有缝隙
<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
<div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子
<span> 标签用来布局,一行上可以多个 <span>。小盒子
<img src="图像URL" />
 ; 空格
$lt; <
$gt; >
2.链接分类:
1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
4.9 超链接标签 (重点)
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> 第2集 </a>
找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id="two">第2集介绍</h3>
<form> 会把它范围内的表单元素信息提交给服务器. 表单域是一个包含表单元素的区域。
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别:
男 <input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女" checked="checked">
人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好:
吃饭 <input type="checkbox" name="hobby" value="吃饭">
睡觉 <input type="checkbox" name="hobby">
打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
<label> 标签为 input 元素定义标注(标签)。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者
选择对应的表单元素上,用来增加用户体验.
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心: <label> 标签的 for 属性应当与相关元素的 id 属性相同
<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
select下拉菜单 selected="selected"默认选中
<form>
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>