web学习---HTML学习---笔记

前言

公司想让用uni-app做混合开发
然后，uni-app需要VUE
VUE需要先学习HTML、CSS、JavaScript
趁此机会，学习下前端知识，扩展下知识面

---

一个完整的网页一般由3部分组成：

• HTML：网页的内容结构
• CSS：网页的视觉体验
• JavaScript：网页的交互处理

HTML文件

HTML文件的扩展名是.htm或.html
HTML被称为：超文本标记语言
HTML是由标记(标签、tag)组成
标记里面的东西称为内容
标记+内容被称为元素
元素的书写格式：

• 标签对：
  <元素名>具体内容

• 单标签：
  meta、img、br、input没有包含具体内容，书写格式是单标签
  <元素名>

• 标签名不区分大小写，例如：
  

  都是一样的
  建议：全小写

• 元素可以嵌套元素

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> ;(

  )

• code：用于表示代码

• br：单标签，表示强制换行


• img：图片标签
  src是source的缩写

<img src="[email protected]" alt="图片不显示的时候才显示" title="鼠标放在图片上显示" width="100" height="100" border="设置边框的宽度"/>

• ./代表当前文件夹，如果啥都不写，默认就是./
• …/代表上一级文件夹

超链接标签

• a元素：定义超链接，用于打开新的URL百度
  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="[email protected]" />
</a>

• iframe元素：在一个HTML文档中嵌入其他HTML文档
  可以给iframe起个name，然后打开对应的url（taget=name）

• base元素：可以在base里面写一些基础功能

特殊字符

空格： 
小于号<：<（less than）
大于号>：>（greater than）

---

表格标签

• table是表格，有属性：border、位置(left、right、center)、cellpadding字体与边框的左间距、cellspacing单元格之间的间距
• tr是行
• td是单元格
• th是头，一般用在表头，与td不一样的地方是，th会加粗并居中
• 也可以在table里面，加上(表示头)和(表示内容)

<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>
	<li>无序列表1li>
	<li>无序列表2li>
	<li>无序列表3li>
ul>

有序列表：

order list
自定义列表：

		<dl>
			<dt>关注我们dt>
			<dd>新浪微博dd>
			<dd>官方微信dd>
			<dd>联系我们dd>
		dl>

表单标签

一个完整的表单一般包括：表单域、表单控件（表单元素） 和 提示信息



表单域：

包含表单元素的区域，会把它范围内的表单元信息提交给服务器

表单控件（元素）

1. input输入表单元素
2. select下拉表单元素
3. textarea文本域元素
• input，里面可以有属性type，不同的type对应不同的输入类型
  



<form action="url地址" method="get" name="表单名字">
	<p>各种表单元素控件p>
	
	用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/> <br/>
	密码：<input type="password" name="pwd" value="请输入密码"/> <br/>
	手机号：<input type="tel" name="tel" value="请输入手机号"/> <br/>
	
	
	性别：<label for="nan">男label><input type="radio" name="sex" checked="checked" id="nan"/> <label for="nv">女label><input type="radio" name="sex" id="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>



标签是标注标签，用于绑定一个表单元素，当点击标签内部的文本时，浏览器会自动将焦点（光标）转到对应的表单元素上，用来增加用户体验

• select下拉选择标签

<select>
	
	<option selected="selected">选项1option>
	<option>选项2option>
	<option>选项3option>
	<option>选项4option>
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" id="nan"/><label for="nan"><img src="[email protected]" width="20"> 男 label>     
			<input type="radio" name="sex" id="nv"/><label for="nv"><img src="[email protected]" width="20"> 女 label>
		td>  
	tr>
	<tr>
		<td>生日td> 
		<td> 
			<select>
				<option >--请选择年--option>
				<option value ="1990">1990option>
				<option value ="1991">1991option>
				<option value ="1992">1992option>
			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">1option>
				<option value ="2">2option>
				<option value ="3">3option>
			select>
		td>  
	tr>
	<tr>
		<td>所在地区td> 
		<td> 
			<input type="text" value="北京思密达" />
		td>  
	tr>
	<tr>
		<td>婚姻状况td> 
		<td> 
			<input type="radio" checked="checked" name="marray" id="weihun"/><label for="weihun">未婚 label> 
			<input type="radio" name="marray" id="yihun"/><label for="yihun">已婚 label> 
			<input type="radio" name="marray" id="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>