HTML简单入门
— Java攻城狮学习路线 —
基本结构
标准文档:www.w3.org
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html document</title>
</head>
<body>
Hello imooc!
</body>
</html>
- 属性:
- 通用属性:
- 特有属性:colspan,type,value...
- 标签:
- html标题、段落、连接、图像、列表、div
- section、article、footer、header
重点元素
HTML标题Heading Contend
共6级
<h1>标题内容</h1>
<h2>标题内容</h2>
...
<h6>标题内容</h6>
<hr><!-- 水平线 -->
HTML段落paragraph
划分段落,段落之间换行
<p>段落内容</p>
<br><!-- 换行 -->
在head中利用style标签定义段落样式
<head>
...
<style>
p{
margin:0;
padding:0;
}
</style>
...
</head>
HTML字体font
格式化文本
<!-- size -->
<font size="3">文字内容</font>
<!-- face -->
<font face="Helvetica">文字内容</font>
<!-- color -->
<font color="red">文字内容</font>
<font color="#d8d8d8">文字内容</font>
<font color="rgb(168,178,188)">文字内容</font>
- 只能控制字体集、大小和颜色
- 别用!用CSS中的font属性更好
HTML链接
文档内部锚点、跳转到外部文档、下载资源
<!-- href=地址or="#..."跳转到id为...的地方-->
<!-- target="_blank"新窗口打开or="_self"本窗口打开-->
<a></a>
- 禁止跳转
- 去掉下划线
<head>
...
<style>
a{
<!-- 去掉下划线 -->
text-decoration: none;
<!-- 设置颜色 -->
color:#333333;
<!-- 光标属性 -->
cursor:none;
}
a:visited{
color:#333333;
}
</style>
...
</head>
HTML图像
插入图像
<!-- src = "图片地址"-->
<!-- alt = "用户提示"-->
<img />
- 支持格式:PNG/JPEG/GIF/PDF
- 非标签方式:background
<head>
<style>
.class-logo{
background: url("....");
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<p class="class-logo"></p>
</body>
HTML列表
插入列表
<!-- 无序标签 -->
<ul>
<li></li>
<li></li>
</ul>
<!-- 有序标签 -->
<ol>
<li></li>
<li></li>
</ol>
<!-- 定义列表 -->
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
- 去除点;type属性管理符号样式(disc,circle,square)不建议使用
- 只用无序标签
HTML div
布局
<div></div>
<div></div>
非常常用且重要,现代布局都靠它
HTML块级元素与行内元素
- 块级元素:上下邻接,换行
- 行内元素:在一行邻接
HTML注释
1.行注释
<!-- 注释 -->
2.段落注释
<!-- 解释内容start -->
...
<!-- end -->
3.条件注释(只在IE10以下浏览器生效),兼容性检查
<!-- [if IE 8]>
<div>是ie8</div>
<![endif]-->
HTML常用带格式作用的标签
1.文本格式化(一般不使用)
<!-- 加粗字体 -->
<b></b>
<!-- 另一种粗体 -->
<strong></strong>
<!-- 强调字体 -->
<em></em>
<!-- 斜体 -->
<i></i>
<!-- 大号字体 -->
<big></big>
<!-- 小号字体 -->
<small></small>
<!-- 下标 -->
<sub></sub>
<!-- 上标 -->
<sup></sup>
2.预格式文本
<!-- 适合代码书写 -->
<pre></pre>
3.引用(不常用)
<!-- 文字引用 -->
<blockquote></blockquote>
4.删除线(兼容性不好)
<del></del>
HTML表格
布局,呈现需要表格布局内容
<!-- 表格头[可选] -->
<!-- 表格体[可选] -->
<!-- 表格行[必须] -->
<!-- 单元格[必须] -->
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- 完整体 -->
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<th></th>
<th></th>
</tr>
</tbody>
</table>
- 表格标签是块级元素
- 全局布局的作用退出舞台
- 专注于自己专注的布局领域
- 表格样式
<!-- 边框 -->
<table border="1">
</table>
<!-- 单元格间距 -->
<table cellspacing="0">
</table>
<!-- 内边距 -->
<table cellpadding="0">
</table>
<!-- 单元格跨列 -->
<table>
<tr>
<td colspan="2"></td>
</tr>
</table>
<!-- 单元格跨行 -->
<table>
<tr>
<td rowspan="2"></td>
</tr>
</table>
<!-- 内容对齐 -->
<table>
<tr align="center">
<td></td>
</tr>
</table>
HTML表单
收集用户输入的内容(文本、文件)
<form></form>
- 表单元素
1.input
<form action="">
<!-- 文本 -->
<input type="text" maxlength="10" value="文本" />
<!-- 密码 -->
<input type="password" maxlength="10" value="密码">
<!-- 单选 -->
<input type="radio" name="radioname" value="0">
<input type="radio" name="radioname" value="1">
<!-- 多选 -->
<input type="checkbox" value="0" checked>
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<!-- 按钮 -->
<input type="button" value="按钮">
<!-- 数字 -->
<input type="number">
<!-- 日期 -->
<input type="date">
<!-- 颜色 -->
<input type="color">
<!-- 范围 -->
<input type="range" min="10" max="50">
<!-- 邮件 -->
<input type="email">
<input type="submit">
<!-- URL -->
<input type="url">
<!-- 文件 -->
<input type="file" multiple="multiple">
</form>
2,select
<select name="" id="">
<option value="">1</option>
<option value="" selected>2</option>
<option value="">3</option>
</select>
3.textarea
<style>
textarea{
<!-- 取消可拓展能力 -->
resize:none;
}
</style>
<textarea rows="" cols="">一段文本</textarea>
4.button(type可设置为button,submit,reset)
<button type="" form=""></button>
- 属性
<!-- action:提交到的服务器地址 -->
<!-- method:指定提交时用那种Http方法:POST/GET -->
<!-- name:标识 -->
<!-- autocomplete:浏览器是否可以自动填充 -->
<!-- enctype:指定表单内容编码 -->
<form name="test" enctype="UTF-8" action="http://baidu.com" method="GET">
</form>
By Apollospotato
转载请注明