前端实习准备 — HTML大总结

43 阅读1分钟
基础结构
<!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>

标签(分类、属性)
  1. 文本相关
<h1></h1>~<h6></h6>
<span></span>
<br/>
<strong></strong>
<em></em>

  1. 链接与自媒体
<a href ="" target ="" rel=""></a>
<img src=""  alt=""/>
<video src="" controls添加控制面板autoplay="" loop="ture为结束后自动返回视频开始地方播放"></video>
<audio src="" controls=""></audio>
<iframe src=""></iframe> // 嵌入另一个HTML页面
  1. 列表
// 有序
<ul>
    <li></li>
</ul>
// 无序
<ol>
    <li></li>
</ol>

<dl>
    <dt> // 标题
       <dl> </dl>
    </dt>
</dl>
  1. 表格
<table>
    <thead>
        <th><td></td></th>
    </thead>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td></td></tr>
    </tfoot>
</table>

属性:border cellpadding  cellspacing
  1. 表单
<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
  1. 语义化元素
<header></header>
<footer></footer>
<main></main> // 主内容区域
<article></article> // 独立内容快
<section></section> // 文档章节
<aside></aside> // 侧边栏
<nav></nav> // 导航栏
<figgure> // 图文组合
  <figcaption></figcaption> // 图片说明
</figgure>
  1. Web组件
<template></template> // 页面加载时不会被渲染(DOM中不可见),存储在内存中,供脚本动态操作和插入到文档中
<slot></slot> //占位符,允许开发者自定义内容
  1. 属性
1. 通用属性
id 唯一标识符
class 类名
style 内联样式
title 鼠标移入提示信息
data-xxx 自定义数据属性

2. 布局交互
hidden 隐藏元素
tabindex 控制元素焦点顺序
contenteditable 元素是否可编辑

3. 全局事件属性
onclick
onmouseover
onchange