html基础
html结构
<!DOCTYPE html>
声明为 HTML5 文档
<html></html>
HTML 页面的根元素
<head></head>
浏览器解析的内容
属性 | 描述 |
---|---|
<meta> |
数据 |
<title></title> |
文档的标题 |
<style></style> |
设置CSS样式 |
<link> |
外链式连接两个文档 |
<script></script> |
JS脚本 |
<body></body>
显示页面主体内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen"></style>
<script src="" type="text/javascript"></script>
</head>
<body>
<h1>标题</h1>
<hr>
<p>段落</p>
</body>
</html>
标签类型
块元素block
也叫行元素,布局中常用的标签有,<div>
、<p>
、<h1>...<h6>
、<ol>
、<ul>
、<dl>
、<table>
、<form>
、<li>
、<hr>
等都是块元素。
特点 :
- 盒子占据一行,即时设置了宽度
- 支持全部的样式
- 如果,没有设置宽度,默认的宽度为100%
display:block;可以将元素转换块级元素。
内联元素inline
也可以称为行内元素,布局中常用的标签有,<a>
、<span>
、<br>
、<i>
、<em>
、<strong>
、<label>
等
特点:
- 盒子并在一行,宽高由内容决定
- 支持部分样式(不支持宽高,margin上下不支持)
- 代码换行,盒子会产生间距
- 子元素是内联元素,父元素可以用
text-align
设置水平对齐,line-height
属性垂直对齐
display:inline;可以将块状元素转换为内联元素
内联块元素inline-block
也叫行内块元素,布局中常用的标签有,<input>
、<img>
等
特点: 不独占一行,支持全部样式
display:inline-block;float:left / right;position:absolute/fixed;可以将元素设置为内联块级元素。
超链接a标签
去掉a标签下划线
a {
text-decoration: none;
}
target属性
_blank
表示在新标签页中打开目标网页
_self
表示在当前标签页中打开目标网页
href属性
绝对URL - 指向另一个站点(比如 href="http://www.baidu.com"
)
相对URL - 指当前站点中确切的路径(href="a.html"
)
锚URL - 指向页面中的锚(href="#top"
)
添加锚点
1、通过id定位,格式为:# + id
<a href="#a0">定位</a>
</div>
<p>练习1</p>
<p>练习2</p>
<p>练习3</p>
<p>练习4</p>
<p id="a0">练习5</p>
<p>练习6</p>
2、给a标签添加name属性
<a href="#a01"></a>
</div>
<p>练习1</p>
<p>练习2</p>
<p>练习3</p>
<p>练习4</p>
<a name="a01"></a>
<p>练习5</p>
让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数,表示一个死链接。
<a href="javascript:void(0)" onclick="window.open('https://www.baidu.com/')">跳转百度</a>
href="javascript:function();
<a href="javascript:alert('haha')">百度</a>
常用标签
<img>
标签
src属性:图片链接到对应地址
alt属性:用于加载图片未显示
用法: 通过在 <a>
标签中嵌套 <img>
标签,给图像添加到另一个文档的链接。
<img src="./timg.jpg" title="这是熊猫图片" alt="熊猫图片" width="200px">
<p>
标签
<p> 标签定义段落。</p>
注意:p标签虽然是块标签 但是不可以嵌套别的块标签 (如嵌套p标签,div标签等)。
<div>、<span>
标签
<span>
标签 内联元素,表示一行中的一小段内容,没有具体的语义。
单标签<br>
、<hr>
标签 | 描述 |
---|---|
<br/> |
换行 |
<hr> |
水平线 |
含语义的标签
标签 | 描述 |
---|---|
<em> |
行内元素,语气强调 |
<strong> |
行内元素,语气强调 |
<i> |
行内元素,斜体 |
<b> |
行内元素,加粗 |
<u> |
行内元素,下划线 |
<s> |
行内元素,删除 |
特殊字符
内容 | 标识代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
列表标签
<ol>
有序列表
type属性:
1 数字列表,默认值
A 大写字母 a 小写字母
Ⅰ大写罗马 ⅰ小写罗马
start属性:start="3"
表示从第3个序号开始
<ol type="1" start="3">
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
<ul>
无序列表(常用)
<ul>
去点:
- 通过css样式
list-style: none;
- 通过type属性
type="none"
<ul type="none">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
type属性:
type | 样式 |
---|---|
disc | 实心圆点,默认值 |
circle | 空心圆圈 |
square | 实心方块 |
none | 无样式 |
注意:常用无序表签ul,有默认样式,li标签块级元素,独占一行。
定义列表
<dl>
标签表示列表的整体。
<dt>
标签定义术语的题目。
<dd>
标签是术语的解释。
<dl>
<dt>html</dt>
<dd>页面的结构</dd>
<dt>css</dt>
<dd>页面的样式</dd>
<dt>javascript</dt>
<dd>页面的动作</dd>
</dl>
table表格
table包含thead(包含tr、th)和tbody(包含tr、td)。
table常用属性
属性 | 描述 |
---|---|
width | 宽度 |
height | 高度 |
border | 设置边框显示 |
cellpadding | 设置表格内容距离边框距离 |
cellspacing | 设置表格和表格之间的间距 |
单元格合并
colspan 设置水平方向一个单元格占据的高度
rowspan 设置垂直方向一个单元格占据的高度
单元格内容对齐方式:
align 水平 center right left
valign 垂直 top bottom
<!--表格标签,table声明一个表格,th表头,tr行,td列-->
<table border="1px">
<caption>table title</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>职务</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>学生</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>设计</td>
</tr>
</tbody>
</table>
form表单
<form>
标签
属性 | 描述 |
---|---|
action | 规定向何处提交表单的地址(URL) |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET) |
name | 规定识别表单的名称 |
target | 规定 action 属性中地址的目标(默认:_self) |
enctype | 规定被提交数据的编码(有上传文件则必须使用为"multipart/form-data"文件转码) |
<input>
标签type
type属性值 | 状态 | 实例 |
---|---|---|
text | 输入文本 | <input type=text" /> |
password | 密码输入框 | <input type="password" /> |
checkbox | 复选框 | <input type="checkbox" name="dx[]" value="1"> |
radio | 单选框 | <input type="radio" name="sex" value="1" /> |
submit | 提交按钮 | <input type="submit" value="提交" /> |
reset | 重置按钮 | <input type="reset" value="重置" /> |
button | 普通按钮 | <input type="button" value="普通按钮" /> |
file | 文本选择框 | <input type="file" /> |
hidden | 隐藏输入框 | <input type="hidden" /> |
date | 日期输入框 | <input type="date" /> |
<input>
标签其他属性
属性 | 描述 |
---|---|
name | 表单提交时的“键”,不同于id属性 |
value | 表单提交时对应项的值 |
checked | radio和checkbox默认被选中的项 |
placeholder | 用于在text或password输入时的提示 |
readonly | 禁用属性,不可编辑(text和password设置只读) |
disabled | 禁用属性,不可编辑(input通用)disabled="disabled" |
<select>
标签
属性 | 描述 |
---|---|
multiple | 布尔属性,设置后为多选,否则默认单选 |
disabled | 禁用属性 |
name | 表单提交时的“键”,不同于id属性 |
value | 定义提交时的选项值 |
selected | 默认选项 |
textarea多行文本
属性:rows:行数 cols:列数
<textarea name="text" value="" placeholder="个人说明"></textarea>
label 标签
标记input的元素,<label>
标签的 for 属性值应当与相关元素的 id 属性值相同
<label for="username">用户名</label>
<input id="username" type="text" name="user" />
form表单案例
<form action="login.do?act=login" method="post" enctype="multipart/form-data">
<label for="user">用户名</label>
<input type="text" id="user" name="username" value="" placeholder="请输入用户名">
<br>
<label for="pwd">密码 </label>
<input type="password" id="pwd" name="userpass" value="" placeholder="请输入密码">
<br>
<label for="man">男</label>
<input type="radio" id="man" name="sex" value="0">
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" value="1">
<br>
<p style="font-size:15px;color: darkkhaki" >最近出差的城市有:</p>
<ul type="none">
<li><input type="checkbox" name="dx[]" value="0">天津</li>
<li><input type="checkbox" name="dx[]" value="1">重庆</li>
<li><input type="checkbox" name="dx[]" value="2">昆明</li>
<li><input type="checkbox" name="dx[]" value="3">以上都没有</li>
</ul>
<p style="font-size:15px;color: #778fbd" >你的学历:</p>
<select name="xl">
<option value="0">初中</option>
<option value="1">高中</option>
<option value="2">大学</option>
<option value="3">其他</option>
</select>
<br>
<label for="file">上传文件:</label>
<input type="file" id="file" name="file">
<br>
<textarea name="text" value="" cols="40" rows="20" placeholder="个人说明"></textarea><br>
<input type="submit" name="submit" value="确定" >
<input type="reset">
</form>