目录
Web前端知识点
- html:网页里存在的东西，比如图片、超链接、文字
- css：美化页面
- JavaScript：前端编程
- JQuery：轻量级的JavaScript框架
- Vue：前后端分离
HTML
超文本标记语言
超文本：文本、超链接、表格、音乐、视频、图片等
标签的语法
标签的语法
<html> 标签内容 <\html>
<br />自闭和语言(单标签)
标签的嵌套：<html><body> 内容 <\body><\html>
标签属性<html 属性名='属性值'><\html>
标签不区分大小写，文件后缀名是.html 或者 .htm，html不需要编译，可以直接在浏览器上运行。
html标签
主体框架
<!-- DOCTYPE:文档类型 -->
<!DOCTYPE html>
<!-- 根标签：最外面的标签html,只能有一个 -->
<html>
<!-- 头信息：文件描述，标题...版本、字符集，文件(css/js)的引用 -->
<head>
<!-- 元数据,内容不会显示在网页上 -->
<meta charset="utf-8">
<!-- 标题 -->
<title></title>
</head>
<body>
<!-- 网页的正文 -->
在这里写的东西都会写到网页上，保存后就能实时查看，不需要编译，html遇到错误也不会停止运行，会跳过错误继续加载别的标签
</body>
</html>常用标签
一部分标签已经在html5当中过时，可以用css和javascrip完成。
标题标签
标题标签独占一行，支持1~6级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>段落标签
段落标签会在结束后自动换行两次，以此区别出其他段落
<p>
<!-- 下面这个东西是用来自动生成随便长度的字符串，在Lorem后写个数字再按Tab可以再生成对应数字个单词 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus molestias eos soluta optio corrupti necessitatibus nisi expedita, omnis repellendus porro rerum debitis ad perspiciatis. Atque quasi numquam distinctio fugit tenetur!
</p>字体倾斜、加粗、下划线
<i>字体倾斜 </i>
<b>加粗 </b>
<u>下划线 </u>
<i><b><u>倾斜加粗又下划线 </u></b></i>强调内容
强调的内容会比i标签更倾斜一些
<em>被强调的内容</em>
<strong>加粗的强调内容</strong>预设标签
预设标签里的内容是怎么样的那显示出来的就会是怎么样，包括换行、缩进
<pre>
第一行
第二行
第三行
</pre>字体标签
已过时，用来设置颜色大小，color属性可以是red/green/blue等单词，也可以是十六进制数(#ffffff 白色)，还可以用rgb表示
font color="red" size = 1>红色</font> <!-- 所有属性值可以加双引号也可以不加 -->
<font color=#00ff00 size = 2>绿色</font> <!-- size范围1~7 -->
<font color='rgb(0,0,225)' size = 3>蓝色</font><!-- rgb好像不支持蓝色的显示 -->分割线
noshade:规定 hr 元素的颜色呈现为纯色
<hr size="1">
<hr size="100">
<hr size="100" noshade="noshade">
<hr size="100" noshade><!-- 属性名和属性一样的时候,可以省略属性值 -->实体字符
如果在html中想表示<p>这样和标签重复的情况，需要用实体字符来代替，具体参照API
<p> 段落
<p>段落
<br>图片标签
src：图片路径，只能使用工程下的资源，即用相对路径填写，用绝对路径只能在自己的电脑上运行
width/height：设置宽/高，当只设置一个属性时会等比例缩放
title：鼠标放在图片上会显示title内容
alt：当图片加载不出来时显示的内容，用来标识和区别
<img src="..\img\image.jpg"><!-- src属性必须填,只能使用工程下的资源(相对路径) -->
<img src="..\img\image.jpg" width="100"><!-- 设置大小 -->
<img src="..\img\image.jpg" width="100" height="200"><!-- 如果只设置一个,就等比例缩放 -->
<img src="..\img\image.jpg" width="100" title="鼠标放在图片上就会有标题">
<img src="..\img\image.jpg" width="100" alt="图片加载不出来的时候显示的内容">视频标签
autoplay：自动播放
controls：加控制器(进度条、暂停、音量)
loop：循环播放
width/height：宽/高设置，和图片标签同理
<video src="..\img\video.mp4" height="400" controls loop>
<!-- 这里可以选择备选资源列表,要用这些的话要把video里的src去掉 -->
<source src="../img/不存在的资源1.mp4">
<source src="../img/不存在的资源2.mp4">
<source src="../img/不存在的资源3.mp4">
<source src="../img/video.mp4">
</video>可以嵌入网上的视频，效果仅同于开一个小窗播放，在网上视频下面点分享可以获得链接或者直接获得代码
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t0043c0o3gh" allowFullScreen="true" ></iframe>音频标签
属性都同理视频标签
<audio src="..\img\audio.mp3" controls autoplay loop></audio>超链接标签
herf：跳转的网页
target：_blank打开新的页面跳转，_self刷新当前页面跳转
<a href="demo01.html">链接到自己工程里的.html</a>
<a href="https://www.baidu.com/" target="_blank">链接到百度</a><!-- 一定要加协议()http等 -->
<a href="#">回到顶部</a>锚点跳转(跳转到本网页指定位置)
<a name="随便取一个锚点名">锚点跳转的地方</a>
<a href="#随便取一个锚点名">通过锚点跳转到指定锚点</a><!-- 超链接跳转到固定的锚点(第39行),href里用#+锚点名来标记,如果有多个同名锚点,跳转到最上面的 -->列表标签
有序列表：ol
无序列表：ul
子列表(列表中的一项)：li
type：列表序号的风格，可以选择阿拉伯数字类型，也可以选择罗马数字等类型
start：开始的序号
<ol type="I" start="2">
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<ul type='square'>
<li>肥牛</li>
<li>黄喉</li>
<li>撒尿牛丸</li>
</ul>表格标签
<table>：表格声明
- border：边框宽度
- cellspacing：单元格之间的空隙
- cellpadding:单元格内容和边框的边距
- bgcolor:背景色
- aligh:表格对齐方式(表格再在网页中的位置)
<caption>：表格的标题
<tr> 表格中的一行
- aling：表格内容的对齐方式(内容在表格中的位置)
<td>：一个单元格的内容
- aling：这个单元格内内容在该单元格中的位置
- rowspan:放在td里使用,向下合并单元格
- colspan:放在td使用,向右合并单元格
<table border="1" cellspacing=0 width=500 cellpadding=10 bgcolor=#FFA073 align="center">
<caption>表格的标题</caption>
<tr align="center">
<td align="left">序号</td> <td >姓名</td> <td >年龄</td>
</tr>
<tr >
<td rowspan="2">1</td> <td colspan="2">张三</td>
</tr>
<tr>
<td>李四</td> <td>20</td>
</tr>
</table>table的三部分(只是一个标记,是一个规范)
<table>
<caption></caption>表的标题
<thead></thead> 表的第一行(会被加粗)
<tbody></tbody> 表主体(可以有多个)
<tfoot></tfoot> 表尾
</table>窗口化设计
将页面分割成几个窗口，可以在不同的小窗口里放不同的网页
noresize：窗口固定(不能调整大小)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>窗口化设计</title>
</head>
<!-- 窗口化设计不需要有标签 -->
<frameset rows='30%,*' noresize>
<frame src=demo01.html>
<frameset cols = '50%,*' >
<frame src=demo02.html name = '配合target,在超链接点击后会在这个框里跳出来'>
<frame src=test.html >
</frameset>
</frameset>
</html>
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
