文章目录
学习前端的目的
- 对于我们的后端来说，这些标签都是一些字符串，但是这些字符串在经过我们浏览器的处理，就可以显示成我们平时看到的页面
前端开发最核心技术
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现（布局和显示效果）和行为(让前端带有逻辑，能动起来)。网页现在新的标准是W3C，目前模式是HTML、CSSJavaScript。
前端开发最核心的3个技术
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
所以对于我们后端开发人员，还是需要稍微了解一下前端的知识
HTML的基础标签
HTML的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
- 我们的HTML就是由一个个标签组成的
- 我们的HTML是一门解释语言，不是编译型的，而且我们的浏览器也是具有容错的
- 大部分标签都是成对出现的，
<body>是开始标签，</body>为结束标签- 也有单标签这种特殊的情况 比如
<br/>单标签：开始标签和结束标签是同一个，斜杠放在单词后面
- 也有单标签这种特殊的情况 比如
- 开始标签中可能会带有 " 属性 ". id 属性相当于给这个标签设置了一个唯一的标识符 ( 身份证号码 ).
- 等于号两边不要有空格
层次结构
-
html 标签是整个 html 文件的根标签(最顶层标签)
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签. head 是 title 的父标签.
- head 和 body 之间是兄弟关系.
-
head 标签中写页面的属性.
- title 标签中写的是页面的标题
- meta charet表示的是字符集
-
body 标签中写的是页面上显示的内容
注释标签
注释不会显示在界面上. 目的是提高代码的可读性.
<!-- 我是注释 -->
ctrl + / 快捷键可以快速进行注释/取消注释.
注释的原则
- 要和代码逻辑一致.
- 尽量使用中文.
- 不要传递负能量.
标题标签: h1-h6
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
- 数字越大，字体越小
- 假如我们写了
<h7><h7/>也不会报错，因为我们的HTML是解释型语言，只是没有标题的效果
img标签
- 在HTML中，图像标签为
<img/>。<img/>是一个自闭合标签。只需要掌握3个属性就可以了：src、alt、title。- src属性表示图片文件的路径
- width和height表示图片的大小
- alt表示图片的提示(当图片显示不出来的时候)
- title 鼠标移到图片的时候显示的文字
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"border="5px">
注意:
- 属性可以有多个, 不能写到标签之前
- 属性之间用空格分割, 可以是多个空格, 也可以是换行.
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示
谈到路径就牵扯到相对路径和绝对路径
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
- 下一级路径: image/1.jpg
- 上一级路径: …/image/1.jpg
绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
- 磁盘路径 D:\rose.jpg
- 网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
段落标签: p
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落
<p>这是一个段落</p>
不加段落标签的效果
加了段落标签
<p>
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中
的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在
为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设
备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等
于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公
司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大
小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道
理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八
门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
<p>
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
</p>
换行标签: br
br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/>是规范写法. 不建议写成 <br>
格式化标签
- 加粗: strong 标签 和 b 标签
- 倾斜: em 标签 和 i 标签
- 删除线: del 标签 和 s 标签
- 下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
超链接标签: a
- href: 必须具备, 表示点击后会跳转到哪个页面.
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
链接的几种形式
外部链接——用来跳转到其他网站
<a href="http://www.baidu.com">百度</a>
内部链接: 网站内部页面之间的链接. 写相对路径即可.
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>
下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.zip">下载文件</a>
锚点链接: 可以快速定位到页面中的某个位置
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>
无语义标签: div & span
HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等
列表标签
- 无序列表 ul li
- type disc(default) , circle , square
- 有序列表 ol li
- 属性：start 表示从*开始，type 显示的类型：A a I i 1(deafult)
- 自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
<h3>无序列表</h3>
<ul>
<li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>我的老婆们</dt>
<dd>咬人猫</dd>
<dd>兔总裁</dd>
<dd>阿叶君</dd>
</dl>
HTML中的特殊字符
实体：HTML中预留字符串必须被替换成字符实体。如:< > &
水分子的化学式： H<sub>2</sub>O <br/>
氧气的化学式： O<sup>2</sup><br/>
5<10
10>5
5≤10
10≥5
注册商标 ®
版权符号 ©
表示空格
- 我们需要用到的时候进行查询就行
表格标签
基本使用
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.
<table border="1" cellpadding="2" cellspacing="0" width="500" height="50" >
<tr align="center" >
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
<tr align="center">
<td>乔峰</td>
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center">
<td>虚竹</td>
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center">
<td>扫地僧</td>
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
表格标签有一些属性, 可以用于设置大小边框等. 但是这些已经被淘汰，一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
- align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
- border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
- cellpadding: 内容距离边框的距离, 默认 1 像素
- cellspacing: 单元格之间的距离. 默认为 2 像素
- width / height: 设置尺寸
合并单元格
- 跨行合并: rowspan=“n”
- 跨列合并: colspan=“n”
<hr/>
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td>删除</td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td>删除</td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td>删除</td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
表单标签
表单其本质就是一个容器，承载了我们客户端发送给服务器的信息
表单是让用户输入信息的重要途径
分成两个部分:
- 表单域: 包含表单元素的区域. 重点是 form 标签.
- 表单控件: 输入框, 提交按钮等. 重点是 input 标签.
<form action="demo04.html" method="post">
昵称：<input type="text" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
星座：<select name="star">
<option value="1">白羊座</option>
<option value="2" selected>金牛座</option>
<option value="3">双子座</option>
<option value="4">天蝎座</option>
<option value="5">天秤座</option>
</select><br/>
备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
<input type="submit" value=" 注 册 "/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按钮"/>
</form>
form标签
<form action="demo04.html" method="post">
... [form 的内容]
</form>
- form表单是要提交数据的，这个页面会提交到另一个资源上
- action=“提交资源的路径”，默认是当前资源，就是将资源提交到什么地方
- method=“本次提交，采用的是HTTP协议是什么方法”,默认是get 关于get和post的区别，我们在http请求中说明
input 标签
-
name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的，我们的服务器就是根据name属性来找对应的value属性，尤其是对于单选按钮, 具有相同的 name 才能多选一.
-
value属性 value一般就是用户填写的内容，value=“默认值”，将数据提交给服务器，如果没填写，就是写的默认的值
-
checked: 默认被选中. (用于单选按钮和多选按钮)
-
maxlength: 设定最大长度.
-
type=“类型”，表示这个input标签是什么类型的
-
text 表示单行文本框
-
password表示密码文本框
-
radio 表示单选本文框
- name属性值保持一致，这样才会有互斥的效果
-
checkbox 表示复选框
- name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
-
submit表示是提交按钮
-
reset表示是重置按钮
-
button表示是普通按钮
-
label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
- for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">
两种方式的效果一样
<label>
男
<input id="male" type="radio" name="sex">
</label>
select 标签
下拉菜单
- option 中定义 selected=“selected” 表示默认选中
星座：<select name="star">
<option value="1">白羊座</option>
<option value="2" selected>金牛座</option>
<option value="3">双子座</option>
<option value="4">天蝎座</option>
<option value="5">天秤座</option>
</select><br/>
textarea 标签
文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的
<textarea rows="3" cols="50"></textarea>
- 空格也会变成默认内容，所以用的时候最好不要有任何内容
1549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
