前言
公司想让用uni-app做混合开发
然后，uni-app需要VUE
VUE需要先学习HTML、CSS、JavaScript
趁此机会，学习下前端知识，扩展下知识面
一个完整的网页一般由3部分组成：
- HTML：网页的内容结构
- CSS：网页的视觉体验
- JavaScript：网页的交互处理
HTML文件
HTML文件的扩展名是.htm或.html
HTML被称为：超文本标记语言
HTML是由标记(标签、tag)组成
标记里面的东西称为内容
标记+内容被称为元素
元素的书写格式：
-
标签对：
<元素名>具体内容</元素名> -
单标签：
meta、img、br、input没有包含具体内容，书写格式是单标签
<元素名> -
标签名不区分大小写，例如：
<div><Div><DIv><DIV>都是一样的
建议：全小写 -
元素可以嵌套元素
HTML提供了大量元素，每一个元素都有特定的用途
元素的属性
每一个元素都可以拥有自己的属性，属性可以增强元素的功能
书写形式：<起始标签 属性名="属性值">
多个属性之间，属性顺序没要求
属性值可以使用双引号、单引号，也可以省略引号。建议使用双引号
属性与属性之间，至少有一个空格
常用标签
< !DOCTYPE html>、 < html>、< head>、 < body>
-
< !DOCTYPE html>：文档声明，告诉浏览器，这是一个HTML，浏览器就用HTML标准去解析识别HTML文档
-
html元素是HTML文档的根元素，一个文档中只能有一个，其他元素都是它的后代元素
-
head元素
head元素里面的内容是一些”元数据“（元数据：描述数据的数据）
一般用于描述网页的各种信息，比如：字符编码、网页标题、网页图标等
head的子元素可以有：
title元素：网页的标题
meta元素：用于设置网页的字符编码，一般使用UTF-8 -
body元素
body元素里面的内容是：网页的具体内容和结构
h、p、strong元素
- h(head)：表示网页的标题，h1~h6一共6个等级
h元素有助于网址排名 - p元素(paragraph)：表示文章中的一个段落
文字操作
-
strong：强调、加黑
-
em：斜线
-
del：
删除 -
ins：下划线
-
div和span：两者都没有语义，它们就是一个盒子，用来装内容的
div：独占一整行，在其后面写的，也要换行到下一行（大盒子）
span：可以一行放多个span（小盒子） -
pre：如果想完全保留HTML代码中的空格、换行，可以使用pre元素
-
字符实体：有些字符是特定的，不能显示出来，比如< div>，可以使用字符实体转化下，从而让其显示< ;div> ;(<div>)
-
code：用于表示代码
-
br：单标签，表示强制换行
<br/> -
img：图片标签
<img src="url"/>
src是source的缩写
<img src="3.1@2x.png" alt="图片不显示的时候才显示" title="鼠标放在图片上显示" width="100" height="100" border="设置边框的宽度"/>
- ./代表当前文件夹，如果啥都不写，默认就是./
- …/代表上一级文件夹
超链接标签
- a元素：定义超链接，用于打开新的URL
<a href="https://www.baidu.com">百度</a>
href:hypertext reference(超文本 引用)
target：觉得新链接在当前界面(_self)打开，还是新的界面(_blank)打开
a标签除了跳转到外部练级、内部链接、下载等外，还可以做为锚点链接：
- 锚点链接：跳转到网页的具体位置
<a href="#first" target="_self">第一章</a>
<h2 id="first">第一章</h2>
#后面不写东西，代表跳转到顶部
也可以跨网页跳转到页面的对应锚点，只需要在url后面拼接上锚点即可：xxx#first
- 图片链接：使用a标签包含Img标签即可
<a href="https://www.baidu.com">
<img src="3.1@2x.png" />
</a>
-
iframe元素：在一个HTML文档中嵌入其他HTML文档
可以给iframe起个name，然后打开对应的url（taget=name） -
base元素：可以在base里面写一些基础功能
<base target="_blank" />
特殊字符
空格：
小于号<：<（less than）
大于号>：>（greater than）
表格标签
- table是表格，有属性：border、位置(left、right、center)、cellpadding字体与边框的左间距、cellspacing单元格之间的间距
- tr是行
- td是单元格
- th是头，一般用在表头，与td不一样的地方是，th会加粗并居中
- 也可以在table里面，加上
<thead>(表示头)和<tbody>(表示内容)
<table align="center" border="1" cellpadding="20" cellspacing="0">
<tr> <th>姓名</th> <th>性别</th> <th>手机号</th></tr>
<tr> <td>3</td> <td>4</td> <td>13001280000</td></tr>
<tr> <td>5</td> <td>6</td> <td>4</td></tr>
</table>
效果：
合并单元格
- rowspan=“合并单元格的个数”：跨行合并
- colspan=“合并单元格的个数”：跨列合并
列表标签
无序列表、有序列表、自定义列表
无序列表：
<ul><!-- unorder list-->
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
有序列表：<ol>order list
自定义列表：
<dl><!--definition lists-->
<dt>关注我们</dt><!--definition term-->
<dd>新浪微博</dd><!--definition description-->
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
表单标签
一个完整的表单一般包括：表单域、表单控件（表单元素） 和 提示信息
表单域<form>：
包含表单元素的区域，<form>会把它范围内的表单元信息提交给服务器
表单控件（元素）
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
- input，里面可以有属性type，不同的type对应不同的输入类型
练习
<form action="url地址" method="get" name="表单名字">
<p>各种表单元素控件</p>
<!-- name value一般是给后台用 maxlength可以限制字数 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/> <br/>
密码：<input type="password" name="pwd" value="请输入密码"/> <br/>
手机号：<input type="tel" name="tel" value="请输入手机号"/> <br/>
<!-- cheked 可以默认选中 radio是单选，单选类型需要name一样-->
<!-- label标签，可以点击文案的是，就选中按钮。需要将label的for和input的id关联起来即可 -->
性别：<label for="nan">男</label><input type="radio" name="sex" checked="checked" value="nan"/> <label for="nv">女</label><input type="radio" name="sex" value="nv"/> <br/>
爱好：吃饭<input type="checkbox" name="hobby" checked="checked"/> 睡觉<input type="checkbox" name="hobby"/> 打豆豆<input type="checkbox" name="hobby" /> <br />
上传头像：<input type="file" /> <br />
<input type="button" value="获取验证码"/> <br />
提交：<input type="submit" value="注册"/> <br /><br /><br />
<input type="reset" value="重新设置"/>
</form>
<label>标签是标注标签，用于绑定一个表单元素，当点击<label>标签内部的文本时，浏览器会自动将焦点（光标）转到对应的表单元素上，用来增加用户体验
- select下拉选择标签
<select>
<!-- selected默认选中 -->
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
- textarea文本域标签
<textarea cols="50" rows="5">
请输入您的宝贵建议
</textarea>
小练习：
<h4>青春不常在，抓紧谈恋爱</h4><br/>
<table width="500">
<tr>
<td>性别</td>
<td>
<input type="radio" checked="checked" name="sex" value="nan"/><label for="nan"><img src="3.1@2x.png" width="20"> 男 </label>
<input type="radio" name="sex" value="nv"/><label for="nv"><img src="3.1@2x.png" width="20"> 女 </label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option >--请选择年--</option>
<option value ="1990">1990</option>
<option value ="1991">1991</option>
<option value ="1992">1992</option>
</select>
<select>
<option>--请选择月--</option>
<option value="1月">1月</option>
<option value="2月">2月</option>
<option value="3月">3月</option>
</select>
<select>
<option>--请选择日--</option>
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" />
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" checked="checked" name="marray" value="weihun"/><label for="weihun">未婚 </label>
<input type="radio" name="marray" value="yihun"/><label for="yihun">已婚 </label>
<input type="radio" name="marray" value="lihun"/><label for="lihun">离婚 </label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园" />
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="hobby" />妩媚的
<input type="checkbox" name="hobby" />可爱的
<input type="checkbox" name="hobby" />小鲜肉
<input type="checkbox" name="hobby" />老腊肉
<input type="checkbox" name="hobby" />都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册" /><br/>
<input type="checkbox" name="agree" checked="checked"/>我同意注册条款和会员加入标准 <br/>
<a href="新闻.html" target="_blank">我是会员，立即登录</a>
<h2>我承诺</h2>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
