相关概念
head
基本骨架
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
头部
描述属性,不展示给用户
<!--页面标题-->
<title>有且必须只有一个</title>
<!--定义元素-->
<meta charset="编码格式">
<meta http-equiv="指定兼容模式、字符集、refresh" content="浏览器、页面尺寸">
<meta name="" >
<!--外部关联-->
<link rel="stylesheet|icon|preload" href="">
1. 外部样式表
2. 页面图标
3. 预加载元素
<!--加载脚本-->
<script src="">内容</script>
<!--加载样式-->
<stlye src="">内容</stlye>
根元素
文本,样式,交互,展示给用户
<!--块元素-->
<div>
<span>
<!--内容-->
</span>
</div>
<!--加载脚本-->
<script src="">内容</script>
<!--加载样式-->
<stlye src="">内容</stlye>
body
标签可以内部嵌套
name="" 属性用于描述元素内容
src="" 资源路径
段落
<!--标题-->
<h1 align="left | center | right">标题位置</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落-->
<p>这是一个段落 </p>
<p>这是另一个段落</p>
<br>换行后的文本<br>
<p>这个是<br>不用写p<br>的新段落</p>
<!--水平线-->
<hr color="" width="" size="" align=""/>
1. color:设置水平线的颜色
2. width:设置水平线的宽度
3. size:设置水平线的高度
4. align:设置水平线的对齐方式(默认居中),可取值left|right
常用元素
<!--图片-->
<img src="" alt="" title="" width="" height="">
1. src:路径(图片地址与名字)
2. alt:规定图像的替代文本
3. width:规定图像的宽度
4. height:规定图像的高度
5. title:鼠标悬停在图片上给予提示
<!--超链接-->
<a href="url">链接文本</a>
href:链接地址
<!--列表-->
<ol type="1|A|a|i|I">
<li>有序</li>
<li>列表</li>
</ol>
<ul type="disc|circle|square|none>">
<li>无序</li>
<li>列表</li>
</ul>
1. disc 默认实心圆
2. circle 空心圆
3. square 小方块
4. none 不显示
5. i 小写罗马数字
6. I 大写罗马数字
<!--表格-->
<table border="" width="px" height="px">
<tr colspan="2" rowspan="2">
<tthread>
<td>表头格子1</td>
<td>表头格子2</td>
</tthread>
</tr>
<tr>
<tbody>
<td>第二行(主体)格1</td>
<td>第二行格2</td>
</tbody>
</tr>
<tr>
<tfoot>
<td>表尾格1</td>
<td>表尾格2</td>
</tfoot>
</tr>
</table>
1. border:设置表格的边框
2. width:设置表格的宽度
3. height:设置表格的高度
4. colspan:水平表格合并
5. rowspan:竖直表格合并
<!--导航、章节、侧边栏、页脚、帖子块-->
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
<article></article>
内联
<!--斜体-->
<em>强调</em>
<i>专有名词</i>
<!--粗体-->
<b>注意</b>
<strong>重要</strong>
<!--删除线-->
<del>删除</del>
<!--包裹元素-->
<span></span>
控件
<!--表单-->
<form action="url" method="get|post" name="formName">
<input type="text|password|checkbox|radio|submit|reset|button|file|date|range|email">
<input type="submit" value="定义默认值">
</form>
1. checkbox 复选框(多个选项中选择)
2. radio 单选按钮
3. file 上传文件
4. hidden 隐藏字段
5. date、time、month、week、datetime、datetime-local 用户输入、选择时间
6. range 滑动条
7. email 输入邮箱
<!--按钮-->
<botton type="" disabled name="" value="">按钮文本</botton>
<!--菜单-->
<ul>
<il href="#">选</il>
<il href="#">项</il>
</ul>
块级元素
<!--块级-->
<div>
h1~h6、hr、p、table、ul
<form>
</form>
</div>
<!--行内块-->
button、img、input