web前端开发 html学习笔记

web前端开发

1.HTML

1. 超链接 < a >

<a href=""></a>
//超链接表现 当你把鼠标移动到链接上箭头会变成小手

2.常用文本标签

	<em>小白龙</em>
	<i>小白龙</i>           斜体字
	<b>小白龙</b>           加粗
	<strong>小白龙</strong> 加粗
	<span>小白龙</span>
	<del>小白龙</del>       删除线

3. 列表标签

3.1 有序列表

<ol type="A">
		<li>有序标签 </li>
		<li>china</li>
			<ol TYPE="I">
				<li>杭州</li>
				<li>浙江</li>
				<li>汉中</li>
			</ol>
		<li >japan</li>
			<ol TYPE="I">
			  <li>北海道</li>
			  <li>东京</li>
			  <li>大阪</li>
		  </ol>
		<li>Korea</li>
			<ol TYPE="I">
				<li>首尔</li>
				<li>釜山</li>
			</ol>

type 中可以改变有序列表中当中的序号 如 a A 1

3.2无序列表

具有导航效果

	<ul type="disc">  //实心圆点
	<li>chinese</li>
	<li>apple</li>
	<li>ok</li>
	</ul>
	<ul type="circle"> // 空心圆点
		<li>chinese</li>
		<li>apple</li>
		<li>ok</li>
	</ul>
	<ul type="square"> //实心方块
		<li>chinese</li>
		<li>apple</li>
		<li>ok</li>
	</ul>
	<ul type="none">  //无标签
		<li>chinese</li>
		<li>apple</li>
		<li>ok</li>
	</ul>

//ui>li*3 快捷键

4.表格

table>tr*4>td{文本}*3	
属性：border 设置表格的边框
  	 width  设置表格的宽度
	 height	设置表格的高度
tr/行  td/列
<table border="1px" width="400" height="400">
	<tr>
		<td>8.16</td>
		<td>8.16</td>
		<td>8.16</td>
	</tr>
	<tr>
		<td>8.16</td>
		<td>8.16</td>
		<td>8.16</td>
	</tr>
	<tr>
		<td>8.16</td>
		<td>8.16</td>
		<td>8.16</td>
	</tr>
	<tr>
		<td>8.16</td>
		<td>8.16</td>
		<td>8.16</td>
	</tr>
</table>

4.1合并单元格

水平合并：colspan 保留左边，删除右边
垂直合并：rowspan 保留上边，删除下边
<table border="1px" width="400px" height="400">
	<tr >
		<td colspan="2" rowspan="2">文本框</td>
		<td>文本框</td>
	</tr>
	<tr>
		<td>文本框</td>
	</tr>
	<tr>
		<td rowspan="3">文本框</td>
		<td>文本框</td>
		<td>文本框</td>
	</tr>
	<tr>
		<td>文本框</td>
		<td>文本框</td>
	</tr>
	<tr>
		<td>文本框</td>
		<td>文本框</td>
	</tr>
</table>

5.Form表单

<form action="" method="get|gost" name="">
<span
action  服务器地址
name	表单名称
method
method中的Get和post的区别
1.数据提交方式，get把提交的数据可以在放服务器其中看到，post看不到
2.get一般用于少量数据提交，post用于提交大量数据1

5.1表单元素

完整的表单包含三个基本组成部分：表单标签，表单域，表单按钮

<form action="">
	<input type="text">
	<input type="submit">
</form>

5.1.1 type-text

文本框  <input type="text" name="name" placeholder="输入你的用户名">

5.1.2 text-password

密码框：<input type="password" placeholder="请输入你的密码">

5.1.3 text-subit

提交按钮/上传服务器<input type="submit" value="submit">

5.1.4 text-radio

单选按钮  <input type="radio" name="gender" checked>nan
		<input type="radio" name="gender">nv

5.1.5 text-checkbox

多选：<input type="checkbox" name="region">chenggu
	 <input type="checkbox" name="region">xian
	 <input type="checkbox" name="region" >hanzhong

5.1.6 text-file

选择文件上传：<input type="file">

5.1.7 lable与checked和radio的共同使用

label与单选，多选的巧妙应用
 <label for="region"><input type="checkbox"  id="region">chenggu</label>
<label for="region2"><input type="checkbox"  id="region2">xian</label>
<label for="region3"><input type="checkbox"id="region3">hanzhong</label>
<label ><input type="radio"  name="gender">nan</label>
<label><input type="radio"  name="gender" >	nv</label>

5.1.8 textarea 文本域

表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
<textarea name="" id="" cols="30" rows="10">china</textarea>

5.1.9 data 日期选择

日期时间类似插件，可供用户手动选择日期，以减少手动输入造成的错误日期！

<input type="date">

5.1.10 邮箱

用于接收邮箱输入，输入完毕浏览器会校验输入是否合法。

<input type="email" name="email"/>

5.1.11 下拉表单

<form action=""  name="">
	<select name="IDType">
		<option value="0" selected="selected">中国居民身份证</option>
		<option value="1">港澳居民来往内地通行证</option>
		<option value="2">台湾居民来往内地通行证</option>
		<option value="3">护照</option>
	</select>
	<select name="age">
		<option value="0">18</option>
		<option value="1">19</option>
		<option value="2">20</option>
	</select>
</form>

6.块级元素和行内元素

6.1常见的块级元素

div,form,h1~h6,hr,p,table,ul等

6.2 常见的行内元素

a,b,em,span,strong i 等

6.3 行内块级元素（特点：不换行，能识别宽高）

button img input等

7.html5新增标签

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 (w3c) 完成标准制定
在HTML5 出现之前，我们一般采用 DIV+CSs 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

h5新标签
<header></header>头部
<nav></nav>导航
<artive></artive> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<aside></aside>侧边栏
<footer></footer>脚部
<article></article>代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

h5新标签
<header></header>头部
<nav></nav>导航
<artive></artive> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<aside></aside>侧边栏
<footer></footer>脚部
<article></article>代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等