HTML
1.1 前端工程师
1.2 认识B/S架构
B/S架构的系统有什么优点和缺点?
优点:升级方便,只升级服务器端代码即可。维护成本低
缺点:速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统,因为企业内部
办公需要的一些系统不需要炫酷,不需要特别好的用户体验,
只要能做数据的增删改查即可。并且企业内部更注重维护的成本
1.3 认识C/S架构
优点:速度快,体验好,界面炫酷。(娱乐型的系统
多数是c/s架构的)
缺点:升级麻烦,维护成本较高。
1.4 浏览器内核
浏览器 | 内核 | 备注 |
---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
firefox | Gecko | 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。 |
chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
Opera | blink | 现在跟随chrome用blink内核。 |
1.5 Web 标准构成
构成:主要包括结构(Structure)、表现(Presentation)和行
为(Behavior)三个方面。
标准 | 说明 |
---|
结构 | 结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS |
行为 | 行为是指网页模型的定义及交互的编写,咱们主要学的是 Javascript |
1.6 HTML 初识
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
是
用来描述网页的一种语言。
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
所谓超文本,有2层含义:
1. 因为它可以加入图片、声音、动画、多媒体等内
2. 容(超越文本限制 )
3. 不仅如此,它还可以从一个文件跳转到另一个文件,与世界
4. 各地主机的文件连接(超级链接文本 )。
1.7 HTML的细节
<!DOCTYPE html>
声明位于文档中的最前面的位置,处于 标签之前。此标签
可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
<html lang="en"> 指定html 语言种类
最常见的2个:
1. en定义语言为英语
2.zh-CN定义语言为中文
<meta charset="UTF-8" />
这句话是让 html 文件是以 UTF-8 编码保存的, 浏览器根
据编码去解码对应的html内容。
1.8 排版标签总结
1.9 文本格式化标签
2.1 标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
2.2 图像标签img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4> 正常的图片: </h4>
<img src="timg.gif" />
<h4> 带有alt 替换文本:(图片不能正常显示,就显示文字) </h4>
<img src="timg1.gif" alt="胡歌咋吹笛子" />
<h4> 带有title 提示文本:(鼠标放到图片上,显示的文字) </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" />
<h4> 修改图片大小 宽度 width 高度 height </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" width="600" />
<h4> 带有边框的图片 </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" width="600" border="10" />
</body>
</html>
2.3 链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>外部链接:</h4>
<a href="http://www.baidu.com" target="_blank"> 百度一哈 </a>
<a href="http://www.sohu.com"> 搜狐 </a>
<h4>内部链接:</h4>
<a href="demo.html">胡哥哥 </a>
<h4>空链接:</h4>
<a href="#"> 霍建华 </a>
<h4> 图像链接:</h4>
<a href="http://www.baidu.com" target="_blank"> <img src="timg.jpg" /> </a>
</body>
</html>
2.4 注释标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注释标签</title>
</head>
<body>
<h1>刘德华专访</h1>
</body>
</html>
2.5 路径
相对路径,是从代码所在的这个文件出发, 去寻找我
们的目标文件的
绝对路径以Web站点根目录为参考基础的目录路径。之所以
称为绝对,意指当所有网页引用同一个文件时,所使用的路径
都是一样的。
“D:\web\img\logo.gif”,或完整的网络地址,
例如“http://www.itcast.cn/images/logo.gif”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="C:\Users\itcast\Desktop\前端基础HTML第一天\案例\timg.gif" />
<img src="http://www.itcast.cn/2018czgw/images/logo.png" />
</body>
</html>
2.6 锚点定位
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a> 创建链接文本(被点击的)
<a href="#two">
2.7 base 标签
<base target="_blank" />
1. base 可以设置整体链接的打开状态
2. base 写到 <head> </head> 之间
3. 把所有的连接 都默认添加 target="_blank"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.163.com">网易</a>
</body>
</html>
2.8 预格式化文本pre标签
所谓的预格式化文本就是 ,按照我们预先写好的文字格式
来显示页面, 保留空格和换行等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
班级歌
清蒸班主任,
油炸小助教。
爆火炒导师,
班长要红烧。
</pre>
</body>
</html>
2.9 特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
楚乔是 燕洵 的 <br />
<p> 表示一个段落 < > 更多 >>
</body>
</html>
2.10 表格 table
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
2.10.1 表格属性
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td>52</td>
</tr>
<tr>
<td>张学友</td>
<td>男</td>
<td>58</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>刘晓庆</td>
<td>女</td>
<td>63</td>
</tr>
</table>
2.10.2 表头单元格标签th
th 也是一个单元格 只不过和普通的 td单元格不一样,它会
让自己里面的文字居中且加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>张三丰</td>
<td>99</td>
<td>女</td>
</tr>
<tr>
<td>张三疯子</td>
<td>199</td>
<td>未知</td>
</tr>
</table>
</body>
</html>
2.10.3 表格标题caption
<table>
<caption>我是表格标题</caption>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<caption>个人信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>张三丰</td>
<td>99</td>
<td>女</td>
</tr>
<tr>
<td>张三疯子</td>
<td>199</td>
<td>未知</td>
</tr>
</table>
</body>
</html>
2.10.4 合并单元格
合并单元格2种方式
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
合并的顺序我们按照 先上 后下 先左 后右 的顺序
合并单元格三步曲
1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 : <td colspan="3"> </td>
3. 删除多余的单元格 单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 个人简历 </caption>
<tr>
<td>刘德华</td>
<td>男</td>
<td>18</td>
<td rowspan="2">照片</td>
</tr>
<tr>
<td>身高 180</td>
<td>汉族</td>
<td>已婚</td>
</tr>
<tr>
<td>个人作品</td>
<td colspan="3">个人作品</td>
</tr>
<tr>
<td>个人简历</td>
<td colspan="3">个人简历</td>
</tr>
</table>
</body>
</html>
2.10.5 总结表格
2.10.6 表格划分结构
1. <thead></thead>:用于定义表格的头部。用来放标题之类
2. 的东西。<thead> 内部必须拥有 <tr> 标签!
3. <tbody></tbody>:用于定义表格的主体。放数据本体 。
4. <tfoot></tfoot>放表格的脚注之类。
5. 以上标签都是放到table标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>刘若英</td>
<td>女</td>
<td>35</td>
</tr>
<tr>
<td>刘晓庆</td>
<td>女</td>
<td>65</td>
</tr>
<tr>
<td>刘三姐</td>
<td>女</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>信息地址</td>
<td colspan="2"> 北京市金燕龙校区举办演唱会</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.1 无序列表 ul
无序列表的各个列表项之间没有顺序级别之分,是并列的。
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中
输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
3.2 有序列表 ol
有序列表即为有排列顺序的列表,其各个列表项按照一定的
顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
3.3 自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列
表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>1. 无序列表</h2>
您喜欢的水果有哪些?
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>大白菜</li>
</ul>
<h2>2. 有序列表 </h2>
奥运金牌榜
<ol>
<li>中国</li>
<li>英国</li>
<li>俄罗斯</li>
<li>美国</li>
</ol>
<h2>3. 自定义列表 </h2>
地区:
<dl>
<dt>北京</dt>
<dd>昌平区</dd>
<dd>海淀区</dd>
<dd>大兴区</dd>
<dd>东城区</dd>
<dt>山东</dt>
<dd>威海</dd>
<dd>潍坊</dd>
<dd>济南</dd>
<dd>青岛</dd>
</dl>
</body>
</html>
3.4 表单标签
在HTML中,一个完整的表单通常由表单控件(也称为表单
元素)、提示信息和表单域3个部分构成。
表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输
入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示
用户进行填写和操作。
表单域:
他相当于一个容器,用来容纳所有的表单控件和提示信息,可
以通过他定义处理表单数据所用程序的url地址,以及数据提交到
服务器的方法。如果不定义表单域,表单中的数据就无法传送
到后台服务器。
3.4.1 input 控件
1. type 属性
这个属性通过改变值,可以决定了你属于那种input表单。
比如 type = 'text' 就表示 文本框 可以做 用户名, 昵称等。
比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
2. value属性值
value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。
3. name属性
name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。
radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
4.checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用户名: <input type="text" value="请输入用户名" name="username" /> <br />
昵称: <input type="text" value="请输入昵称" name="nicheng" /> <br />
密码: <input type="password" name="pwd" /> <br />
性别:
男 <input type="radio" name="sex" />
女 <input type="radio" name="sex" checked="checked" />
未知 <input type="radio" name="sex" /> <br />
爱好:
睡觉 <input type="checkbox" name="hobby" checked="checked" />
爬山 <input type="checkbox" name="hobby" />
篮球 <input type="checkbox" name="hobby" />
足球 <input type="checkbox" name="hobby" /> <br />
<input type="button" value="获取短信验证码" />
<input type="submit" value="提交所填" />
<input type="reset" value="重置所填" />
<input type="image" src="images/btn.png" /> <br />
上传头像:
<input type="file" />
</body>
</html>
3.4.2 input 属性小结
3.4.3 label标签
用于绑定一个表单元素, 当点击label标签的时候, 被绑定
的表单元素就会获得输入焦点。
第一种用法就是用label直接包括input表单。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>第一种用法,label直接包含 表单</h4>
<label> 用户名: <input type="text" /> </label>
<h4>第二种方法,通过for 和 id 来控制 </h4>
<label for="nc"> 昵称: </label> <input type="text" id="nc" />
</body>
</html>
3.4.4 textarea控件(文本域)
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用户留言: <textarea></textarea>
</body>
</html>
3.4.5 文本框和文本域区别
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|
input type=“text” | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
3.4.6 select下拉列表
1. select 中至少包含一对 option
2. 在option 中定义selected =" selected "时,当前项即
为默认选中项。
3. 但是我们实际开发会用的比较少
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
籍贯:
<select>
<option>--请选择省份--</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>上海</option>
<option>山东</option>
</select>
<select>
<option>--请选择城市--</option>
<option>海淀区</option>
<option>昌平区</option>
<option>通州区</option>
<option>雄安区</option>
</select>
</body>
</html>
3.4.7 form表单域
属性 | 属性值 | 作用 |
---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="post" name="user">
用户名: <input type="text" name="username" /> <br />
密码: <input type="password" name="pwd" /><br />
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
3.4.8 属性规范
元素属性值使用双引号语法
元素属性值可以写上的都写上,不要省略
3.4.9 综合案例注册页面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘-你在我也在</title>
</head>
<body>
<table width="600" align="center">
<caption> <h4> 青春不常在,抓紧谈恋爱 </h4></caption>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男
<input type="radio" name="sex" /><img src="images/women.jpg" /> 女
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" />
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked"/> 未婚
<input type="radio" name="marry" /> 已婚
<input type="radio" name="marry" /> 离婚
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<tr>
<td>月薪</td>
<td>
<input type="text" value="10000-20000">
</td>
</tr>
<tr>
<td>手机号码</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>昵称</td>
<td>
<input type="text" >
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love" /> 妩媚的
<input type="checkbox" name="love" /> 可爱的
<input type="checkbox" name="love" /> 小鲜肉
<input type="checkbox" name="love" /> 老腊肉
<input type="checkbox" name="love" /> 都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea> 自我介绍 </textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<tr>
<td></td>
<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
想要获取该该课程markdown笔记(脑图+笔记)。可以扫描以下
微信公众号二维码。或者搜索微信公众号-Java大世界。回复
html即可获取笔记获取方式。