HTML常用标签
<br/>
单标签,换行。
<hr/>
单标签,水平线。
<h1></h1>
双标签,用来设置标题的大小。从h1-h6越来越小。
<div></div>
双标签,盒子标签,默认独占一行。
<span></span>
双标签,块标签,长度是封装数据的长度。
<p></p>
双标签,段落标签,默认换行。
<font color="颜色" face="字体" size="大小"></font>
双标签,设置字体属性,其中size属性最大值为7,更大只显示为7。
<a href="超链接地址" target="跳转形式"></a>
双标签,里面一般放超链接,target属性可以设置_self
或_blank
,其中_self
代表在本页面跳转, _blank
代表重新打开一个页面。
<ul></ul>
双标签,无序列表。其中type
属性可以修改前面的符号。
<li></li>
双标签,列表项。
<ul type="none">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<ol></ol>
双标签,有序列表。 其中type
属性可以修改前面的符号。
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<img src="路径" width="长度" height="宽度" border="图片边框宽度" alt="图片找不到时显示的内容"/>
单表签 ,插入图片时使用。
绝对路径:
http://ip:port/工程名/资源路径
相对路径:
./表示当前路径
../表示返回到上一层目录
table表格
<table border="边框大小" width="表格宽" height="表格高" cellspacing="单元格间距"></table>
双标签,设置表格。
<tr></tr>
双标签,行标签。
<td></td>
双标签,单元格标签。
<th></th>
双标签,表头标签。
colspan
属性,合并列。放到td
中。
rowspan
属性,合并行。放到td
中。
<!--五行五列-->
<table border="1" cellspacing="0" width="300" height="400">
<tr>
<td colspan="2">1</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td rowspan="2">5</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
border
属性,设置边框宽度。
cellspacing
属性,设置单元格之间间距。
iframe
<iframe src="当前显示的页面路径" width="窗口宽度" height="窗口高度" ></iframe>
iframe
可以在页面上开辟一个小区域显示单独的页面。
iframe
和a
标签组合使用步骤:
1、在iframe
标签中使用name
属性定义一个名称。
2、在a
标签的target
属性上设置iframe
的name
的属性值。
测试iframe
<hr/>
<iframe src="Test.html" width="400" height="400" name="test" ></iframe>
<hr/>
<ul type="none">
<li ><a href="https://www.taobao.com/" target="test">测试1</a><li>
<li ><a href="https://www.bilibili.com/" target="test">测试2</a><li>
</ul>
form表单
<form action="提交到的服务器地址" method="提交方式"></form>
form
中存放用户需要提交的表单。
action
里面存放表单要提交到的服务器地址。
method
里面设置了表单的提交方式。如果不设置,默认值为get
。
使用get
提交方式不安全,提交后,在链接内可以看到表单内所有设 置了name
属性的属性内容,并且get
提交方式提交值的最大长度100字 符。post
提交表单的方式是安全的。不会 暴漏用户信息。
表单提交的时候,数据没有发送给服务器的三种情况:
1、表单项没有name
属性值。
2、单选、复选、下拉列表的option
标签,都需要加value
属性。
3、表单项不在form
标签中。
<input type="text" value="默认值"/>
文件输入框,value
设置默认显示内容。
<input type="password" value="默认值"/>
密码输入框,value
设置默认显示内容。
<input type="radio" name="按name进行分组" checked="checked"/>
单选框,name
表示分组属性,多个radio
则只可以选择一个,checked
表示该框默认被选中。
<input type="checkbox" checked="checked">
复选框,checked
表示该框默认被选中。
<select></select>
下拉框,和option
配合使用。
<option selected="selected"></option>
下拉框中的可选项,放在select
双标签中使用。selected
表示 默认选中该项。
<textaera rows="默认显示行数" cols="默认显示字符宽度">默认内容</textaera>
多行输入文本框,rows
默认显示行数,clos
默认显示字符宽 度。
<input type="reset" value="默认值"/>
重置按钮。重置为表单的默认值。
<input type="submit" value="默认值"/>
提交按钮。
<input type="button" value="默认值"/>
按钮。
<input file="" />
文件上传域。
<input type="hidden" name="" value="默认值"/>
隐藏域,当我们要发送某些信息,这些信息,不需要用户输入,就可以使用隐藏域。(提交的时候发送给服务器)
<form action="localhost.8080" method="get">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" value="张三" name="username"/></td>
</tr>
<tr>
<td> 密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>性别:</td>
<td> 男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex" /></td>
</tr>
<tr>
<td>爱好:</td>
<td>唱歌 <input type="checkbox" checked="checked"/>
跳舞 <input type="checkbox"/>
打篮球 <input type="checkbox"/></td>
</tr>
<tr>
<td>国籍:</td>
<td><select>
<option name="美国">美国</option>
<option name="中国" selected="selected">中国</option>
<option name="韩国">韩国</option>
<option name="加拿大">加拿大</option>
</select></td>
</tr>
<tr>
<td>用户留言:</td>
<td> <textarea rows="10" cols="20">请输入。。。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="reset" value="重置"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="按钮"/></td>
</tr>
<tr>
<td >上传文件</td>
<td><input type="file"></td>
</tr>
<tr>
<td><input type="hidden" name="隐藏域" value="默认值"/></td>
<td> </td>
</tr>
</table>
</form>
HTML引入CSS样式
使用css
文件形式分为三种:
嵌入式:
优先级最高,代码写在html
标签中。
内联式:
优先级次之,代码写在head
标签中。
外联式:
优先级最低,代码写在外部css
文件,在head
标签通过link
引用。
CSS选择器
css选择器共有三种:
标签选择器:
直接在head标签里设置标签css样式,css的样式名称就是标签名。html相应的标签直接自适应css样式。
----------------head标签中style标签下-----------------
div{
border:3px solid red;
color:red;
font-size:5px;
}
id选择器:
css
的样式名称是”#样式名称“。html
标签通过id="样式名称"
引用。
----------------head标签中style标签下-----------------
#id001{
border:3px solid red;
color:red;
font-size:5px;
}
----------------html标签中---------------------------
<div id="id001"></div>
class选择器:
css
的样式名称是”.样式名称“。html
标签通过class="样式名称"
引用。
----------------head标签中style标签下-----------------
.class001{
border:3px solid red;
color:red;
font-size:5px;
}
----------------html标签中---------------------------
<div class="class001"></div>
css样式中常用属性
clolor:red;
修改字体颜色。
width:100px;heigth:100px;
设置宽度和高度。
border:1px solid red;
设置边框宽度,边框样式,边框颜色。
background-color:red;
设置背景颜色。
font-size:10px;
设置字体大小。
margin-left:auto;margin-right:auto;
div
居中。
text-align:center;
文本居中。
text-decoration:none;
去除超链接下划线。
border-collapse:collapse;
将边框合并。视觉上更好。
list-style:none;
去除列表的列表头修饰。