html基础
来源：互联网 发布：蚁群算法的基本步骤 编辑：程序博客网 时间：2024/06/11 19:52
1. html基本结构
<html>/*标签*/
<head>/*头部*/
<title></title>
</head>
<body>/*主体*/
</body>
</html>
2.<p></p>段落文本
3.<h1></h1>标题一，一直可以写到<h6></h6>标题六
4.插入图片：<img src=”图片路径” alt=”图片描述” title=”图片注释”/>
5.超链接：<a href=”跳转目标地址”>名称</a>
6.<br>换行，此为单标签
7.分割线：<hr size=”值” color=”” width=””>
8.文本效果：
<b></b>/*粗体*/
<i></i>/*斜体字*/
<em></em>/*着重文字*/
<small></small>/*小号字*/
<strong></strong>/*加重语气*/
<sub></sub>/*下标字*/
<sup></sup>/*上标字*/
<ins></ins>/*插入字*/
<del></del>/*删除字*/
<pre></pre>/*预格式化，可保留空格、回车等*/
9.两种输入空格的方式：
（1）&nbps;表示一个半角空格；
（2）全角状态下的空格。
10.列表：
（1）无序列表：
<ul type=”图标样式”>/*type=”square（方块）/disc（圆点）/circle（空心圆）”*/
<li></li>
</ul>
（2）有序列表：
<ol type=”类型” start=”起始数字”>/*type=”a/A/i/I/1”*/
<li></li>
</ol>
（3）自定义列表：
<dl type=”图标样式”>
<dt></dt>/*标题*/
<dd></dd>/*描述*/
</dl>
11.表格
<table border=”边框值” width=”” cellpadding=”单元格填充值” cellspacing=”单元格间距值”>
<caption></caption>/*表头*/
<tr rowspan=”跨行合并值”></tr>/*标题单元格*/
<td colspan=”跨列合并值”></td>/*单元格*/
</table>
12.表单：
<formaction="提交目标地址">
<p>
<label for="username">用户名:</label>
<input type="text" id="username"/>/*单行文本框，for后面的内容需和id的内容一一对应*/
</p>
<p>
密码：<input type="password"/>
</p>
<p>
<input type="radio" name="sex"checked/>女<input type="radio" name="sex"/>男/*单选按钮组，name需相同；checked表示默认选中*/
</p>
<p>
爱好：<input type="checkbox" checked/>音乐<br>
<inputtype="checkbox"/>看书<br>
<inputtype="checkbox"/>游戏
</p>/*复选框*/
<p>地址：
<select>
<option value="陕西">陕西</option>
<option value="福建">福建</option>
<option value="山东">山东</option>
<option value="河南">河南</option>
</select>/*下拉菜单*/
</p>
<p>
<br><inputtype="submit"/>/*提交按钮*/
<inputtype="reset"/>/*重置按钮*/
<inputtype="button" value=”确定”/>/*普通按钮*/
<ahref="http://www.baidu.com">忘记密码</a>
</p>
</form>
13.行内样式调用：<anystyle=””></any>
14.text-indent:2em/*文本首行缩进*/
15.样式优先级：行内样式>页面内样式>链接样式
16.页面样式：
<head>
<style>
p{
color:orange;
background-color:pink;
}
</style>
</head>
17.类定义/*以点开始，后面以字母开头；可多次使用；调用：<any class =”name”></any>*/
<head>
<style>
.red{
color:red;
}
</style>
</head>
18.id定义/*以#开始，#name；调用：<anyid=”name”></any>*/
<head>
<style>
#ad{
color:red;
}
</style>
</head>
19.链接外部样式表：
<head>
<link rel=”stylesheet” href=”链接的外部css文件”>
</head>
20.导入式：
<head>
<style>
@import url(外部css文件);
</style>
</head>
21.背景定义:
.box{
background:blue url(图像地址) no-repeat right bottom; /*背景色 背景图像是否重复 水平位置 垂直位置；是否重复包括：no-repeat/repeat-x/repeat-y/repeat;水平位置：left/right/center/精确像素;垂直位置：top/bottom/center/精确像素*/
}
22.图片环绕定义：
p img{
float:left; /*左浮动*/
margin:10px; /*图片外边距为10px*/
}
23.外边距：
margin-top/bottom/left/right
margin:10px; /*四边边距都为10px*/
margin:10px 5px; /*上下边距为10px,左右边距为5px*/
margin:10px 5px 10px; /*上边距为10，左右边距为5px，下边距为10px*/
margin:10px 5px 10px 5px; /*上边距为10，右边距为5px，下边距为10px,左边距为5px*/
24.向内填充：padding，用法同margin
25.加粗：font-weight:bold;/*bold/bolder*/
26.倾斜：font-style:italic/*italic/oblique*/
27.倾斜字体变正常：i{font-style:normal}
28.超链接改变外观：
.baidu{
color:red;
text-decoration:none; /*去下划线;underline：加下划线；overline:上边线*/
}
29.超链接的四种状态（伪对象）
<head>
<style>
a:link{color:red}/*默认状态*/
a:hover{color:pink}/*鼠标悬停时的样式*/
a:active{color:blue}/*鼠标点击时的样式*/
a:visited{color:green}/*超链接访问后的样式*/
</style>
</head>
- HTML 基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- HTML 基本链接语法,布局,脚本
- 服务器数据库系列
- JVM 配置参数
- 关于<:if>没有<c:else>解决方案
- OC使用正则表达式判断域名
- html基础
- Android开发者选项——GPU呈现模式分析
- Golang：Cobra安装与使用
- ios动态添加标签。
- java设计模式总结五：创建者模式
- Linux中的定时和延时
- @responseBody @@RequestBody注解的使用
- python基本操作总结（二）
- SonarQube与Jenkins结合提高代码质量
