HTML+HTML5笔记

最新推荐文章于 2024-05-18 14:03:48 发布

এ᭄画画的北北

最新推荐文章于 2024-05-18 14:03:48 发布

阅读量88

点赞数

分类专栏：前端学习文章标签： html html5 前端

本文链接：https://blog.csdn.net/weixin_46878941/article/details/126451087

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、HTML概述

网页的基本组成：

网页是构成网站的基本元素，由图片、链接、文字、视频等元素组成的HTML文件

什么是HTML：

超文本标记语言，用来描述网页的一种语言（超文本：超越文本限制，超链接文本）

常用的浏览器及内核：

chorme–Blink内核
Safari–Webkit内核

Web标准的三大组成部分：

结构，表现，行为

二、HTML常用标签

HTML骨架标签

<html> <head> <title> <body>

标题、段落、换行标签

<h1> - <h6> <p> <br />

文本格式化标签

加粗<strong> <b>
倾斜<em> <i>
删除线<del> <s>
下划线<ins> <u>

`<div>`和`<span>`

<div>块级元素
<span>行内元素

图像标签和常用属性

<img src="图片路径"  alt="替换文本" title="提示文本" />

超链接标签和常用属性

<a href="跳转目标" target="_blank"> ... </a>
<!--target="_blank"：打开另一个窗口显示-->

锚点链接：<a href="#id">

注释标签

特殊字符

空格&nbsp
小于号&lt
大于号&gt

三、表格

表格相关标签

表格标签<table>
行标签<tr>
表头标签<th>加粗，居中
单元格标签<td>
表格标题<caption>
表格头部区域<thead>
表格主体区域<tbody>

表格标签结构

    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>

表格属性

对齐：align=left | center | right
边框：border=1 | ""
单元格和内容间距：cellpadding
单元格和单元格间距：cellspacing

合并单元格

跨行合并：rowspan="n"给需合并的最上单元格添加
跨列合并：colspan="n"给需合并的最左单元格添加

四、列表

无序列表

<ul> <li>

<ul>内只能放<li>，<li>内可以放任意标签

有序列表

<ol> <li>

自定义列表

<dl> <dt> <dd>

    <dl>
        <dt>1</dt>
        <dd>1.1</dd>
        <dd>1.2</dd>
    </dl>

五、表单

表单简介

用途：获取用户在页面输入信息
组成：表单域，表单控件，提示信息

`<form>`标签及常用属性

name属性，表单名称
action属性，提交地址
method属性，提交方式
- get方法，将表单数据信息作为url整体的一部分传递给服务器
- post方法，将表单信息作为信息体传输，更安全，可传输大量数据

表单控件

输入表单元素`<input type="表单种类"/>`

type属性，表单种类
- text：单行文本框
- password：密码框
- radio：单选框，相同name的多个radio中只能选中一个
- checkbox：复选框
- submit：提交按钮
- reset：重置按钮
- button：按钮
- file：文件域
name属性，设置文本框的名称
value属性，设置文本框的默认文本
size属性，设置文本框的长度
maxlength属性，设置文本框最多可以输入的字符数
checked属性：设置初始值checked="checked"为选中
标注标签
<label for="id">
- for属性：与对应input标签中的id相同

下拉列表元素`<select>`

<select>
    <option>...</option>
    <option>...</option>
</select>

多行文本框输入`<textarea>`

<textarea name="" rows="行数" cols="每行字数">...</textarea>

六、HTML5

语义化

增强代码可读性
有利于SEO优化和搜索引擎建立良好沟通
在丢失样式时能够让页面呈现出清晰的结构

新增语义化标签

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签

新增多媒体标签

<audio> 音频
<video> 视频

新增input类型

type="email"
type="url"
type="date"

新增表单属性

required 内容不能为空
placeholder 提示信息
autofocus 自动聚焦
autocomplete 显示之前键入的值
multiple 可多选文件提交

`<canvas>`与`<svg>`

Canvas 通过 JavaScript 来绘制 2D 图形，画的是位图
SVG 是一种使用 XML 描述 2D 图形的语言，画的是矢量图