html 基础知识
2019-03-12 本文已影响0人
顺其自然呗
最近要用vue.js 顺便回顾了一下上学那会学的html.
HTML基础
页面基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面名称</title>
</head>
<body>
<p>Body标签是页面的主体标签，所有的页面内容放到body标签里面。。。。。。。</p>
</body>
</html>
文本标签
html 元素必须以开设标签开始,以结束标签结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
标题标签
<h1>1级标题标签，最大的标签</h1>
<h2>2级标题标签</h2>
<h3>3级标题标签</h3>
<h4>4级标题标签</h4>
<h5>5级标题标签</h5>
<h6>最小的标题</h6>
段落标签
<p>段落</p>
文本标签
<span></span>
a 超文本引用(超链接标签)
<a href="" name='' title="" target="_blank">链接文字或图片</a>
- href为链接地址
- name页面锚命名（也可以用id来代替）
- target新打开位置
"_blank" 在新页面打开
"_self" 在当前页面(默认)
<a>超链接</a>
<a href="www.baidu.com"></a>
<a target="_blank"></a>
<a name="tips"></a> 命名锚链接
<a href="#tips"></a>指向锚链接
br 折行(换行)
<br />
hr 水平线 (一行横线,相当于分割线)
<hr />
列表结构
ul 无序列表，默认列表前面有小黑点标记
<ul>
<li></li>
</ul>
ol 有序列表
<ol>
<li></li>
</ol>
dl 自定义列表
ul和dl均为块级元素
无序列表和有序列表样式显示均可以通过设置list-style-type的值来更改显示。
none(无样式)
circle（圆圈）
disc(实心圆)
decimal(数字)
square(实心方块)
<dl>
<dt>
<dd></dd>
</dt>
</dl>
例1
<div class="unordered-list">
<ul>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
</ul>
</div>
<style>
.unordered-list {
padding:20px;
}
</style>
例2
<div class="ordered-list">
<ol>
<li>000</li>
<li>000</li>
<li>000</li>
</ol>
</div>
<style>
.ordered-list {
padding:20px;
}
</style>
例3
<div class="custom-list">
<dl>
<dt>dt一般是引导文字或者是标题</dt>
<dd>dd一般解释性文字....</dd>
</dl>
</div>
<style>
.custom-list {
padding:20px;
}
</style>
插入图像
img 标签
图片引用地址可以是相对地址也可以是绝对地址,alt属性一般为图片加载异常时的显示文字，title属性是鼠标移动上时的显示文字
<img src=”图片引用地址” width=’定义图片显示宽度’ height=’定义图片显示高度’ alt=’’ title=’’/>
文本格式化标签
<b>加粗</b>
<big>大号字</big>
<em>着重</em>
<i>斜体</i>
<small>小号字</small>
<strong>加重</strong>
<sub>下标</sub>
<sup>上标</sup>
<del>删除</del>
显示效果：
WechatIMG692.png
input 表单元素
<input type="">
type类型有：text常规文本, radio单选按钮,checkbox复选框，submit提交按钮，password密码,date日期选择器，month年月选择器，color颜色选择器，range滑动，email电子邮件,url包含url的输入字段，除text，radio，checkbox,submit外，其他需要在较新版本下才能兼容，一般在手机端页面兼容比较好，用户体验也会比较高。
select 下拉列表
<select name="" id="">
<option value="11">11</option>
<option value="22">22</option>
</select>
按钮
定义点击按钮
<button type=’button’>点击按钮</button>
html5 语义标签
在布局页面的时候，可根据页面整体布局直接使用语义标签进行相关布局
- header 页眉
- nav 导航菜单
- footer 页脚
- section 元素块,定义文档中的节
- aside 定义内容之外的内容，如:侧栏
- article 定义独立的自包含文章
- details 定义额外的细节
- summary 定义details元素的标题
可直接对语义标签进行css 样式定义，如：
<header>HEADER</header>
<style>
header {
width: 100%;
height: 200px;
background-color: red;
text-align: center;
font-size: 50px;
font-weight: 600;
line-height: 200px;
}
</style>
表格的使用
属性：
- border边框，
- cellpadding单元格间的距离，
- cellspacing单元格边框与边框之间的距离，最好不要通过属性来设置表格的显示样式
<table width='' border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
表格的样式定义可以通过属性，但最好通过css来定义，如：
<style>
table {
border-spacing:0;
border-collapse: collapse;
border:1;
border-color: red;
}
</style>
css在页面<head>标签中的被引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
css常用样式定义
- margin 外边距,
- padding 内边距,
- width 宽度,
- height 高度,
- border 边框,
- background 背景,
- font 字体,
- color 颜色,
- text-align 对齐方式,
- text-shadow 文本阴影，
- box-shadow 块阴影，
- float 浮动，
- position 定位
- 。。。。。
