前端基础HTML 笔记

最新推荐文章于 2025-09-07 21:17:08 发布

原创最新推荐文章于 2025-09-07 21:17:08 发布 · 271 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
作用：声明文档的解析类型(document.compatMode)

document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>

(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="content-Type" charset=UTF8">

基本标签：
<b> <strong>: 加粗标签
h1 ~ h6
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标和下角表.
<br>:换行.
<hr>:水平线
特殊字符：
< <
&gt； >
&quot； "
© ©
® ®
  空格

DIV SPAN标签:
<div></div>块级元素
<span> </span> 内联行(行内元素) 注意：设置的宽高无效果若需要加宽高可加属性 display：block

IMG标签:
<img src=" 图片路径 " alt=" 图片加载失败提示信息 " title=" 鼠标悬浮提示的信息 " >

A标签:
<a href=" 网页地址 " target=""></a>
属性: target : _blank --新窗口打开网页 _parent --当前窗口打开网页

UL OL标签:
ul : 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<ul>
<li></li>
</ul>

ol : 有序列表

TABLE标签:
<table>：表格
<thead>
<tr>
<th> 标题</th> ---（标题加粗显示）
</tr>
</thead>
<tbody> ---默认添加（可以不写）
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
<td rowspan="3">内容</td>-----单元格竖跨多少行
<td colspan="3">内容</td>------单元格横跨多少列

FORM表单:
<form method=“”></form> 表单
method： POST/GET 默认GET

INPUT标签:
<input type="" ></input> 输入框
type----text:文本框 password：密码框 radio : 单选框 checkbox : 多选框
submit : 提交按钮 button：按钮 file：提交文件

checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.

SELECT标签:
<select> 下拉选标签属性:selected--选中属性 value-提交的值
<option></option>
</select>

TEXTAREA标签:
<textarea cols=“宽度” rows=“高度” name=“名称”> ---多行文本框
</textarea>

LABEL标签:
<label for=“username”>用户名</label> for ---点击label内容，username获取焦点

FIELDSET标签:
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>