html基本标签
HTML
HTML基本标签 Hyper Text Markup Language超文本标签语言
标签
根标签
<html></html> <!--是根标签,所有的标签都放在根标签里面,一个网页只有一个根标签-->
头部标签
<head></head> <!--头部标签-->
头部里的三大标签
<title></title> <!--设置网页的标题-->
<link rel="icon" type="image/icon" href="upload.png"/> <!--设置网页的标题图标-->
<meta charset="UTF-8">设置字符编码:
Body里面的标签主要分为两类:块级(换行显示)和行级
一.块级元素
标题标签(默认是百分百,可以设置宽高)
<h1></h1>……<h6></h6>
滚动标签 //非常不推荐使用
<marquee direction=""></marquee>
水平线
<hr/> 默认是空心的
size线的尺寸
width线的长度
color设置线条的颜色
noshade="noshade" 设置水平线实心 布尔类型的属性可以只写属
段落
<p></p>  在段落里面加空格
引用标签
<blockquote></blockquote> cite引用网址
预格式
<pre> </pre> 会保留原来的样式
列表
<ol></ol>有序列表
<ul></ul>无序列表
<li></li>有几个选项写几个li
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>描述标签,只能有一个dt,可以有多个dd
div
<div></div>用来定义一个板块
Table表格(熟练掌握)
<table border="1" width="350" height="200"align="cener">
<tr>
<th>表头自动加粗且居中</th>
</tr>
<tr>
<td> </td>td里面可以加宽度和高度
</tr>
</table>
1.调整表格自身的水平位置
如果align放在tr或者td,改变的是tr(td)里文本的对齐方式
valign= top bottom 垂直方向调整
2.表格的每一行(tr)内部的(td)的个数一样
3.tr中不能有宽度属性因为默认的和表格一般打,可以设置高度
4.优先级:标示范围小的则优先级越高
5.bgcolor:
背景色可以加在table,td,tr中
6.优先级:标示范围小的则优先级越高
7.bordercolor 边框颜色
8.cellspacing="" 单元格与单元格之间的距离
cellpadding="" 单元格的内边距,与内部文本的距离
9.***跨行跨列
colspan跨列
rowspan 跨行
form 表单 : 所有的表单元素只能放在form里面才能提交
<form action=""></form>
action制定了当前表单要提交的目的地(将要把填写的内容发给谁)
method 提交表单所需要的方法( get post)
***账号:<input type="text" placeholder="请输入账号" />
***密码:<input type="password" placeholder="请输入密码" />
disable禁用输入框 布尔类型的属性,可以只写属性名
maxlenght 限制输入文本的长度
checked 默认选取的
(1)单选按钮
<input type="radio" name="sex" id="w"/><label for="w">女</label>
用name可以将单选按钮划分小组这样能控制只选取一个
label将字与选项连接起来
(2) 多选按钮
<input type="checkbox" name="hobby" value="书"id="s"/><label for="s">书
</label> label将字与选项连接起来
(3) 其他按钮
<input type="reset"/> 表单重置
<input type="file"/> 文件上传
<input type="submit"/> 提交按钮
<buttom></buttom> 普通按钮 默认是提交
两种下拉选择
第一种
<select name="" id=""> 下拉选择
<option value="">--请选择--</option>
<optgroup lable=""></optgroup> 用来划分下拉选择的小组 lable
取名
<option value="" selected></option> //selected默认 布尔类型
</select>
第二种 也叫智能下拉选择
<input type="text"list="mylist"/>
<datalist id="mylist">
<option value="" label=""></option>
<option value=""></option>
</datalist> 可以检索关键字,无法默认某一属性,但是添加了label属性,可以用作标签
其他
功能 | 方法 |
---|---|
邮件: | <input type="email"/> |
网址: | <input type="url"/><br/> |
日期: | <input type="date"/><br/> |
时间: | <input type="time"/><br/> |
月份: | <input type="month"/><br/> |
星期: | <input type="week"/><br/> |
数字: | <input type="number" value="0" max="10" min="0"/><br/> |
范围: | <input type="range" min="0" max="10" value="1"/><br/> |
颜色: | <input type="color"/><br/> |
二.行级元素 (无法设置宽度和高度大小由它的内容决定)
span
<span style="color: red;font-size: 25px">span常用来改变一段字的属性
图片 既是行级也是块级
<img src="" alt="" />
改变图片大小只需要给宽度就好,图片会等比例缩放,不要给高度,否则图
片会变形,alt当图片裂的时候显示
强调em表现为斜体,和i一么一样但是这两有本质的区别,em表示强调,i表
示倾斜
强调strong表现为加粗跟b一模一样,但是有本质区别
强制换行
</br>
引号标签
<q></q>这是一个引号标签
缩小标签
small 缩小 套多个small
a超链接
不同页面的跳转
<a href=""></a>
target="_blank"开启一个新的tab页面,如果不写是tab页的替换
相同页面的跳转
<a name="p1"><img src="01.jpg" alt="" width="400px"/></a><br/>先给本页
面所需的跳转点设置一个矛点
<a href="#p1">第一张</a>
本页面的跳转需要加一个#用来标记
属性
1.display:inline-block 将行级变为块级
2.float浮动
注释
<!---->