一.html结构
<html>
<head>
head内的标签标用户是看不到的,是给浏览器看的,主要定义一些配置
放置head内常用的标签
</head>
<body>
body内写什么浏览器就渲染什么,用户就能看到什么
放置body内常用的标签
</body>
<html>
二.标签的分类
分类a:
1 双标签 例如<a>xxx</a>
2 单标签 例如<img/>
分类b:
1 块标签:独占一行 例如 h1-h6,p,div
* 块标签可以修改长宽
* 块级标签内部可以嵌套任意的块标签和行内标签
* 特例 p 标签只能嵌套行内标签,不能嵌套块标签
2 行内标签:自身的文本多大就占多大 例如 span,img,a
* 行业不能嵌套块标签
三.head内常用标签
1 title:网页标题
<titile>网页标题</title>
2 stytle:内部用来书写css代码的
<stytle>
<h1>{
color:greenyellow
}
</stytle>
3 script:内部用来书写js代码的,还可以引入写好的js代码
<script src="引入的js代码">
alert(123)
</script>
4 link:引入外部css文件
<link rel='stylesheet' href='外部的css文件'>
5 make:定义网页原信息
a:keywords:网页推荐 通过搜有content后面的关键字 就可能搜索到这个网页
<meta name="keywords" content='wfw,wfw01,wfw001'>
b:description 添加描述信息
<meta name="description" content='对xxxx网站的详细说明'>
四. body内常用标签:标签内可以直接添加文字
1 <h1>xxx</h1> 标题,后面的数字表示几级标题
2 <b>xx</b> 加粗
3 <s>xx</s> 删除线
4 <u>xx</u> 下划线
5 <i>xx</i> 斜体
6 <p>xx</p> 段落 一个p一段
7 <br> 换行
8 <hr> 水平分割线
五. 特殊符号
1 空格
2 > 大于号
3 < 小于号
4 & &符号
5 ¥ ¥符号
6 © 圆圈c
7 ® 圆圈r
六. 常用标签:在页面布局最常使用的标签
1 div 可以把它看成一块区域,主要作用是提前布局,先用div划分好区域,之后往里面填写内容
2 span 普通文本先用span占位,之后给它加样式
3 img 图片标签,常用属性有以下几个
<img src="" alt="" title="" width="" height="" >
alt="图片加载不出来时的描述信息"
src="图片路径,可以是网上的也可以是本地的"
title='鼠标悬浮图片上展示的信息'
height='调整图片高度'
width='调整图片宽度'
*如果修改类2个参数且没有考虑等比例问题,那么会失真
4 a:连接标签,常用属性
<a href="" target= >点击这里的文字跳转到连接</a>
href="":"点击就会跳转到的url网址
target=_blank:点击网址打开一个新的页面打开
target默认是_self:点击在当前页面跳转
a标签的锚点功能:通过id设置id值,其他a标签配置跳转到id值,如下例子:
<a href="",id="d1">顶部</a>
<a href="">中间</a>
<a href="#d1">底部</a>
七. 标签必备的2个属性---->重点
1 id值:不能重复,一个标签只能有一个
2 class值:类似与继承
八. 列表标签
<ul type="circle">xxx</ul>:无序列表,
<ol> <li>1</li> </ol>:有序列表 自动标记编号
<dl>xxx</dl>:标题列表,了解即可
九. 表格标签:只要是展示数据一般都需要展示表格
例如展示数据
wfw 123 read
tack 445 write
jack 888 play
<table>
<thead>
<tr> 一个tr表示一行
<th>username</th> 字段名,加粗 td 不加粗
</tr>
</thead> 放置表头 字段信息
<tbody>
<tr> 一个tr表示一行数据
<td>xxxx</td> 字段值,不加粗
td内用到的参数:colspan="2":水平方向占几行
rowspan="2":垂直方向占几行
</tr>
</tbody> 放置表单 数据信息
</table>
总结:以上是原生的表格标签,掌握结构即可,后面使用框架封装好的
十. form表单标签:获取前端用户传入的数据,包含上传的 选择的 写入的等等,这一块非常重要
0.form表单结构
<form action="">
<p>
<lable for="d2">password:<input type="password"></lable>
</p>
</form>
form标签内的数据都会被form标签提交到后端
1.action="":控制数据提交的后端路径,有3中方式
a.什么都不写:默认向当前页面所在的url提交数据
b.写全路径:例如 http://www.xxx.com 向指定的路径提交
c.写路径后缀:例如 action="/index/" 自动识别书当前服务端的ip和端口,之后自动拼接
2.input标签的使用
第1种方式:lable包住input 关联input的id
<lable for="d1">
username:<input type="text" id="d1"> #input是输入框 前面可以指定输入框的名字
</lable>
第2种方式:lable直接关联input的id
<lable for="d2"></lable>
password:<input type="text">
3.input标签内的属性:type
type属性包含以下:
输入框
type=text:普通文本展示
type=password:密文展示
选择框:
type=date:表示日期
type="radio":单选框
type="checkbox":多选框
按钮:以下按钮需要给input指定value值,说明按钮的用途,例如<input="submit" valeu="提交">
type=submit:触发提交的动作
type=button:普通按钮,可以自定义各种功能
type=reset:用来重置内容
type=file:上传图片按钮
补充知识:
a.能够触发form表单提交数据的标签有哪些?<input="submit" valeu="注册">
b.<button>点击<button> 也可以触发
c.<type="radio" name="male" checked="checked">男:单选框 checked="checked" 代表默认选中
总结:name就类似与字典的key,用户的数据类似与字典的value
4.seletc标签的使用,表示下拉框,标签属性option的用法
<select name="" id="">
<option value="" selected="selected">北京</option>
</select>
multiple:多选
selected:默认单选
5.textarea标签的使用,大段文本框
<textarea name="" id="" cols="30" rows="10"></textarea>
十一. form表单最重要属性
1.method="post" 指定请求类型
2.enctype="multipart/form-data" 可以支持提交文件数据,默认只能够提交普通数据
3.选择标签内需要指定value的值