HTML基础和VUE基础
文章目录
-
- 一、简介
- 二、基本使用
- VUE
一、简介
网页最主要由3部分组成：结构、表现和行为。目前模式是HTML、CSS和JavaScript。
HTML：Hyper Text Markup Language（超文本标记语言），简单来说，网页就是用HTML语言制作的。
CSS：全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
JavaScript：是一门脚本语言。
二、基本使用
1、div标签和span标签
● div是块级元素， 实际上就是一个区域， 主要用于容纳其他标签。 默认的display属性是block
● span是行内元素， 主要用于容纳文字。 默认的display属性是inline
<html>
<body>
test<span>紧跟前面的"test"显示</span><div>而这里会另起一行显示</div>
</body>
</html>
上述代码效果图：
test紧跟前面的"test"显示
而这里会另起一行显示
2、id属性和name属性
name是一个控件的名字，可以很多控件有同一个名字，那样在提交时会自动变成数组。假如你写了3个叫“text_t”的文本框，那么在用js脚本取值时就会收到一个叫text_t的字符串数组，里面有3个值。
id是唯一的，也就是说一个jsp页面不能重复，如果你写重复了，系统会取第一个控件，其他叫这个id的控件就无法被找到。如果在js脚本中想取得某个控件，一定要使用byId的方法。以上解释适用于所有控件，并不是只针对form。
3、form表单
<form id="addForm" method="post" enctype="multipart/form-data">
● id：用来标识表单，id是唯一的
● name：表单的名称
● method：规定用于发送form-data的HTTP方法
● enctype：规定在发送表单数据之前如何对其进行编码
○ enctype 属性可能的值：
■ application/x-www-form-urlencoded（默认值）
■ multipart/form-data（文本+文件：图片、MP3）
■ text/plain（邮件：纯文本）
其中①application/x-www-form-urlencoded是默认值，大家可能在AJAX里见过这个：xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form- urlencoded”); 这两个要做的是同一件事情，就是设置表单传输的编码。在AJAX里不写有可能会报错，但是在HTML的form表单里是可以不写 enctype="application/x-www-form-urlencoded"的，因为默认HTML表单就是这种传输编码类型。
而 ②multipart/form-data是用来指定传输数据的特殊类型的，主要就是我们上传的非文本的内容，比如图片或者mp3等等。
③text/plain是纯文本传输的意思，在发送邮件时要设置这种编码类型，否则会出现接收时编码混乱的问题，网络上经常拿text/plain和 text/html做比较，其实这两个很好区分，前者用来传输纯文本文件，后者则是传递html代码的编码类型，在发送头文件时才用得上。
①和③都不能用于上传文件，只有multipart/form-data才能完整的传递文件数据。
4、table标签和tr、td、th
快速记忆：
表格要用table，tr表示行，td表示单元格(列)，th表示单元格表头
<table>是<tr>的上层标签
<tr>必须在一个<table></table>里面,
它不能单独使用,相当于<table>的属性标签.
<table>标示一个表格,<tr>标示这个表格中间的一个行
<td>标示行中的一个列,需要嵌套在<tr></tr>中间
具体格式是:(两行两列)
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中
<table>...</table> 用于定义一个表格开始和结束
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内
<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内
5、input输入框
<input type="hidden" name="activityId" value="${task.activityId}">
<input type="hidden" name="activityStatus" value="${task.activityStatus eq null? 0:task.activityStatus}">
<input id="radio1" checked type="radio" style="display: inline" name="radioSelect" value="1"/>
// 日期表示：
<input size="16" type="text" name="beginTime" id="beginTime" value="{ task.beginTime}" type="date"/>"
autocomplete="off"
class="txt_ipt w110 Wdate" style="height: 33.3px;"
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:endTime.value})">
-
<input size="16" type="text" name="endTime" id="endTime" value="{ task.beginTime}" type="date"/>"
autocomplete="off"
style="height: 33.3px;" class="txt_ipt w110 mr10 Wdate"
onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd',minDate:beginTime.value })">
input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。
（1）type类型：
● text 一个单行文本框，默认属性值
○ list 指定为文本框提供建议值的 datalist 元素，其值为datalist元素的 id 值
○ maxlength 设置文本最大字符长度
○ pattern 用于输入验证的正则表达式
○ placeholder 输入提示的文本，当用户输入内容时会自动消失
○ readonly 文本框处于只读状态
○ disabled 文本框处于禁用状态
○ size 设置文本框宽度
○ value 设置文本框初始值，会显示在文本框中，显示时优先级比placeholder高，表单提交时优先提交用户输入的内容，如果用户没有输入则提交默认的值
○ required 表示用户必须输入一个值，否则无法通过输入验证
● password 隐藏字符的密码框
○ 和type=”text”时所拥的额外属性基本一致，少了一个list属性
● search 搜索框，在某些浏览器中输入内容会出现叉形标记
○ 和type=”text”所有用的额外属性值一致
● submit、reset、button 依次是：提交按钮、重置按钮、普通按钮
○ 如果是 submit 时，还提供了和元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate
● number、range 依次是：只能输入数值的框、只能输入在一个指定范围的数值框
○ type=”number” 只能输入数字的文本框
○ type=”range” 生成一个通过拖拽调节大小的调节器
○ 额外属性：
■ min 设置可接受的最小值
■ max 设定可接受的最大值
■ value 指定初始值
■ step 指定上下调节值的步长
■ required 表明用户必须输入一个值，否则无法通过输入验证
■ readonly 设置文本框内容只读
● checkbox、radio 依次是：复选框，一组复选框(name属性值相同)用户可以勾选多个、单选按钮，一组单选按钮(name属性值相同)用户只可以选中一个
○ 不管type等于checkbox还是radio，都必须有属性name和value
○ 他们还有可选属性checked、required
○ 复选框和单选按钮都是以一组一组的形式存在，name值相同的即为一组，一组复选框可以同时选中几个，而一组单选按钮同时只能选中一个
● image、color 依次是：图片按钮、颜色代码按钮
○ 当type=”image”时，功能上和type=”submit”一样，前者是用图片作为按钮，当然后者也可以达到同样的效果
○ 额外属性：
■ src 指定要显示图像的 URL
■ alt 提供图片的文字说明，当图片找不到时显示该文字
■ width 图像的长度，注意这是标签属性，而不是样式属性
■ height 图片的高度，注意事项如上
■ 提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate
● email、tel、url 依次是：检测电子邮件、号码、网址的文本框
○ email 为电子邮件格式
○ tel 为电话格式
○ url 为网址格式
○ 额外属性和 text一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到 http://就能通过。
● hidden 生成一个隐藏控件
○ 生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在
● file 生成一个上传控件
○ 生成一个文件上传控件，用于文件的上传。
○ 额外属性：
■ required 表明用户必须提供一个值，否则无法通过验证
■ accept 指定接收的MIME类型 例如：accept=”image/gif, image/jpeg, image/png”
■ 当需要上传文件时，form标签的enctype属性必须设置为multipart/form-data
● 获取各种日期、时间 data、month、time、week、datetime、datatime-local
○ 当type为data、month、time、week、datetime、datatime-local，因为各种原因还是用jquery等前端库写吧！！！
（2）autocomplete属性：规定输入字段是否应该启用自动完成功能。
（3）class属性：表示样式，还可以通过样式绑定其相关功能
<–下面这种写法就是通过class来绑定class=“.btn_update”，
可实现多个输入框同时实现同一个套代码流程–>
$(.btn_update)
（4）onfocus的作用是把输入焦点定位到那个控件上
（5）checked：checked 属性规定在页面加载时应该被预先选定的 input 元素。checked 属性 与 或 配合使用。checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
（6）name=“radioSelect” value=“1”，name表示这个控件的名字，表单提交的时候他的value值会赋给实体类同名的变量。
6、img标签
● img标签的作用：用来告诉浏览器我们需要显示一张图片
● 格式：
○ img标签中的src是英文source的缩写，src 是用来告诉img标签，需要显示的图片名称
○ 和H系列标签、P标签、Hr标签不一样，img标签不会独占一行
● 属性：
○ width：宽度
○ height：高度
■ img标签中的width和height 这两个属性的作用：是用来告诉标签将来需要显示的图片的宽和高
■ 如果 img 标签没有指定需要现实的图片宽高，那么系统会按照图片默认的宽高显示
■ 如果img 标签指定了宽高，那么系统会按照指定的宽高显示
■ 如果我们手动指定了img标签的宽高，有可能导致图片变形；如果想指定宽高的图片不变形，可以指定宽度或高度的其中一个值即可，只要指定其中一个值（高 / 宽 ），系统会自动根据该值计算出对应的宽 / 高，并且等比拉伸，不会变形
○ title：用来告诉浏览器，当鼠标悬停在图片时显示的内容
○ alt ：是英文alternate的缩写，用来告诉浏览器当需要显示的图片找不到时显示的内容，即提示。
● img标签路径问题：
○ 通过相对路径赋值：
■ 相对路径就是每次都是从.html文件所在文件夹开始查找
■ 同级：是图片存放的位置和.html文件存储在同一个文件夹中，
● 格式：src = “Figure_1.png”
● 含义：在.html文件所在的文件夹中查找名称叫做Figure_1.png的图片
■ 下级：是存储图片的文件夹和.html文件在同一个文件夹中
● 格式：src = “Images/Figure_1.png”
● 含义：在.html文件所在的文件夹中查找名称叫做Images的文件夹中找到名称叫做Figure_1.png的图片
■ 上级：存储图片的位置在存储.html的文件夹的上一级
● 格式：src = “…/Figure_1.png”
● 含义：在.html文件所在的文件夹中查找这个文件夹的上一级文件夹，然后再在这个上一级文件夹中找到名称叫做Figure_1.png的图片
○ 通过绝对路径赋值
■ 绝对路径就是每次都从指定的盘符开始查找
7、lable标签
● label标签介绍：
○ label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。
● 主要使用场景：
○ label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。
● label标签和特定表单元素关联方式：
○ 显示关联：
■ 显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。
■ 如爱好：
<input type='checkbox' name='basket' id='basketball'>
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>
<label for="football">足球</label>
● 隐式关联
○ 隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如下：
<label>点击我可以使文本框获得焦点
<input type='text' name='theinput' id='theinput'>
</label>
■ 点击文字便能是文本框获得焦点
● 显示关联和隐式关联的优缺点：
○ 显式关联优点：
■ 可以减少标签嵌套层数label标签和表单可以在不同的位置
○ 显示关联缺点：
■ 控件需要定义id属性label标签和表单控件不利于作为一个整体来控制
○ 隐式关联优点：
■ 控件无需定义id标签和控件方便作为一个整体控制
○ 隐式关联缺点：
■ 增加了标签嵌套层数不能将标签和关联控件放到不同的位置
○ 以上是个人对两种方式的看法，使用时可按需要选择显示或隐式。label标签的浏览器支持及可关联的表单元素
○ 所有主流浏览器都支持label标签。Safari 2 或更早的版本不支持label标签。
○ 能使用显示关联的表单元素有：
■ input type="text"文本框，点击标签时关联的文本框获得焦点。
■ input type="checkbox"复选框，点击标签时选中或取消选中复选框。
■ input type="radio"单选框，点击标签时选中单选框。
■ input type="file"文件上传，点击标签时打开文件选择对话框。
■ input type="password"密码框，点击标签时密码框获得焦点。
■ textarea文本域，点击标签时文本域获得焦点。
■ select下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。
8、textarea标签
● 标签定义及用法
○ 在html中，标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本。文本默认字体是等宽字体（Courier），可以通过css来改变。
○ 在实际应用中，一般会通过cols属性和rows属性来设置textarea控件的尺寸大小（使用 css的height和width属性来设置更佳）。
● 标签基本属性
○ autofocus：当页面加载时，文本区域自动获得焦点（值：autofocus）。
○ cols：文本区域内可见的列数（值：number）。
○ disabled：禁用文本区域（值：disabled）。
○ form：定义文本区域所属的一个或多个表单（值：form_id）。
○ maxlength：文本区域允许的最大字符数（值：number）。
○ name：文本区域的名称（值：text）。
○ placeholder：一个简短的提示，描述文本区域期望的输入值（值：text）。
○ readonly：文本区域为只读（值：readonly）。
○ required：文本区域是必需的/必填的（值：required）。
○ rows number：文本区域内可见的行数（值：number）。
○ wrap：当提交表单时，文本区域中的文本应该怎样换行（值：hard、soft）。
○ 标签支持html全局属性和html事件属性
9、a标签
● a标签的介绍：
○ <a>标签定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是 href 属性，它指示链接的目标。指向 w3school 的超链接：
○ <a href="http://www.w3school.com.cn">W3School</a>
● <a>标签的伪类样式
○ 一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括：
■ a 表示所有状态下的连接 如 a{color:red}
■ a:link： 未访问链接 ,如 a:link {color:blue}
■ a:visited： 已访问链接 ,如 a:visited{color:blue}
■ a:active： 激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue}
■ a:hover： 鼠标移到链接上时 ,如 a:hover {color:blue}
○ 注意：
■ 四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。
■ 另外，a:active不能设置有无下划线（总是有的）。
■ eg：
a {font-size:16px}
a:link {color: blue; text-decoration:none;} //未访问：蓝色、无下划线
a:active:{color: red; } //激活：红色
a:visited {color:purple;text-decoration:none;} //已访问：紫色、无下划线
a:hover {color: red; text-decoration:underline;} //鼠标移近：红色、下划线
● 设置<a>的样式：
○ 对超链接下划线设置 使用代码”text-decoration”
语法：
text-decoration : none || underline || blink || overline || line-through
■ text-decoration参数：
■ none : 无装饰
■ blink : 闪烁
■ underline : 下划线
■ line-through : 贯穿线
■ overline : 上划线
■ <a>标签的一些属性
● <a>标签是成对出现的,以<a>开始, <a>结束
○ 属性：
■ accesskey – 代表一个链接的快捷键访问方式
■ charset – 指定了链接到的页面所使用的编码方式,比如UTF-8
■ coords – 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
■ href – 代表一个链接源(就是链接到什么地方)
■ hreflang – 指出了链接到的页面所使用的语言编码
■ rel – 代表文档与链接到的内容(href所指的内容)的关系
■ rev – 代表文档与链接到的内容(href所指的内容)的关系
■ shape – 使用图像地图的时候可以使用shape指定链接区域
■ tabindex – 代表使用"tab"键,遍历链接的顺序
■ target – 用来指出哪个窗口或框架应该被此链接打开
■ title – 代表链接的附加提示信息
■ type – 代表链接的MIME类型
click与onclick
HTML中click()和onclick()的本质区别与案例和解释；分为四点；
第一点：英文翻译：
On的意思为 ：打开，接通，鼠标事件的触发条件；
表明onclick()代表的是一个事件；而在HTML中，click()为方法；
第二点：中文解释：
什么叫事件？什么叫方法？
事件：鼠标事件的触发条件，比如鼠标划出和划进、单击、双击等等
方法：是处理过程，即对一段自定义的代码封装和打包，方便再利用，避免重复性；
简单记为：事件：触发事件，方法：处理过程；
第三点：：click()和onclick()的关系
onclick()是绑定事件：作用执行函数代码；
click()本身是方法：作用是触发onclick()事件
代码示例：
<html>
<meta charset="utf-8" />
<head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#b2").click(function(){
$("#b1").click();
});});
function change(){
alert("调用了方法change");
}
</script>
<button id = "b1" onclick="change()">按钮1</button>
<button id = "b2">按钮2</button>
</body>
</html>
解释：onclick()是绑定事件，告诉浏览器在鼠标点击时候要做什么
click()本身是方法作用是:触发onclick()事件
代码本质：
只要执行了元素的click()方法，就会触发onclick()事件。
如上诉代码所示，当点击按钮2按钮时,会触发按钮1的click()方法，而click()方法会触发onclick()事件；
结论一：执行了元素的click()方法会触发调用click方法元素onclick事件
结果：
点击按钮1：弹出：调用了方法change
点击按钮2：弹出：调用了方法change
第四点：：click()的延伸
可以在cliick()方法中再添加函数进行追加事件的作用；
click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用。
<html>
<meta charset="utf-8" />
<head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
alert("调用了click()方法的追加事件");
});});
function change(){
alert("调用了方法change");
}
</script>
<button id = "b1" onclick="change()">按钮1</button>
</body>
</html>
解释：在执行click()方法后，执行标签内的change（）事件，然后再执行内部click()方法封装的内部函数alert()方法；
结果：先弹出调用了方法change，再弹出调用了click()方法的追加事件
VUE
获取路径：
// 根据路径判断评分框是否展示 checkScoreShow-控制展示
accordingRouteToShow () {
const routePath = this.$route.matched[1].path
if (routePath === '/example/detailPage') {
this.checkScoreShow = false
}
}
v-permission=“[‘clerk’]” 控制权限，表明clerk身份的人才能控制此按钮。
v-show 控制展示