基础结构
<!DOCTYPE html>
<html lang = "en">
<head>
<title>网页标题</title>
<meta charset="UTF-8">
<base href="" targe= "_blank / _self"/>
<link href="style.css" ref="stylesheet"/>
<meta/>
<style></style>
<stcript></stcript>
</head>
<body>
</body>
</html>
标签(分类、属性)
- 文本相关
<h1></h1>~<h6></h6>
<span></span>
<br/>
<strong></strong>
<em></em>
- 链接与自媒体
<a href ="" target ="" rel=""></a>
<img src="" alt=""/>
<video src="" controls(添加控制面板) autoplay="" loop="ture为结束后自动返回视频开始地方播放"></video>
<audio src="" controls=""></audio>
<iframe src=""></iframe> // 嵌入另一个HTML页面
- 列表
// 有序
<ul>
<li></li>
</ul>
// 无序
<ol>
<li></li>
</ol>
<dl>
<dt> // 标题
<dl> </dl>
</dt>
</dl>
- 表格
<table>
<thead>
<th><td></td></th>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
属性:border cellpadding cellspacing
- 表单
<form action = "提交地址" method= "提交方式">
<input type = "text,password,email,number,checkbox,radio,file" name ="" id="" placeholder="输入提示"/>
<lable for="id">文本指示</lable> // 点击lable会将焦点聚集到输入框
<button></button>
<textarea></textarea>
<select>
<option></option>
</select>
</form>
input
属性:type name(字段名) value(默认值和用户输入值) placeholder(提示文本) required(必填项,没有值) readonly(只读,没有值) disable(禁止交互) maxlength(最大输入字段) pattern(指定正则表达式) min max(用于数字和日期) id
type: text password radio(单选,多个input相同name) checkbox(复选) submit reset file number date time email url search
- 语义化元素
<header></header>
<footer></footer>
<main></main> // 主内容区域
<article></article> // 独立内容快
<section></section> // 文档章节
<aside></aside> // 侧边栏
<nav></nav> // 导航栏
<figgure> // 图文组合
<figcaption></figcaption> // 图片说明
</figgure>
- Web组件
<template></template> // 页面加载时不会被渲染(DOM中不可见),存储在内存中,供脚本动态操作和插入到文档中
<slot></slot> //占位符,允许开发者自定义内容
- 属性
1. 通用属性
id 唯一标识符
class 类名
style 内联样式
title 鼠标移入提示信息
data-xxx 自定义数据属性
2. 布局交互
hidden 隐藏元素
tabindex 控制元素焦点顺序
contenteditable 元素是否可编辑
3. 全局事件属性
onclick
onmouseover
onchange