【html】基础知识

最新推荐文章于 2024-07-12 20:49:16 发布

为毛哩

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量566

点赞数 18

分类专栏： Web 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_40584890/article/details/139654001

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html

标准文档结构

<!-- 文档类型，放在顶行写，告诉浏览器该文档遵循 html5 的规范 -->
<!DOCTYPE html> 
<!-- lang 代表 html 的语言 zh-CN 代表中文简体-->
<html lang="zh-CN">
  <head>
    <!-- 文档编码，utf-8 代表编码格式 -->
    <meta charset="UTF-8" />
    <!-- 文档的标题，浏览器的窗口会显示该标题 -->
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

常见的编码格式有：
- ASCII：只包含大小写英文和特殊字符
- ISO-8859-1：在 ASCII 的基础上增加了希腊文等欧洲国家的字符
- GB2312：中国常见的 2000 多个汉字
- GBK：支持了生僻字+繁体，大概有 6w 字，算是比较全的中文包
- UTF-8：万国码，支持全球所有的语言+符号

排版标签

标签名	标签含义	单/双标签
h1 ~ h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局	双

h1只能写一个，h2 ~ h6可以写多个

常用文本标签

标签名	标签含义	单/双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的通用容器	双

块级元素和行内元素

块级元素

独占一行。可以嵌套行内元素和块级元素（几乎什么都能嵌套，但是部分场景不行，比如 h1 ~ h6 不能嵌套自己）

行内元素

不独占一行，类似手拉手效果，在同一行排布。只能嵌套行内元素

特殊规则

h1 ~ h6 不能互相嵌套
p 标签里面不能写h1 ~ h6 、p、div 等块级标签

超链接

<a href="" target=""></a>

href：要跳转的具体位置
target：跳转时如何打开页面，_blank表示新窗口，_self表示当前窗口

:::tip

a 标签虽然是行内元素，但a标签可以包裹除自身外的任何元素
a 标签之间的多个空格、回车，都会被浏览器解析成一个空格
:::

跳转页面

<!-- 跳转其他网页 -->
<a href="https://www.baidu.com">百度</a>

<!-- 跳转本地网页 -->
<a href="./other.html">同项目的其他页面</a>

跳转文件

<!-- 浏览器可以直接打开的文件，支持图片、照片、动图、视频、文本等 -->
<a href="./自拍.jpg">看照片</a>

<!-- 浏览器不可以直接打开的文件，则会提示下载 -->
<a href="./学习资料.zip">内部资源</a>

<!-- 浏览器可以打开，但要强制触发下载  download后面的值可以重命名下载文件的名字 -->
<a href="./学习.mp4" download>下载学习视频</a>
<a href="./学习.mp4" download="内部资料">下载内部资料</a>

唤起指定应用

<a href="tel:10086">拨打电话</a>
<a href="mailto:1234567890@qq.com">发送邮件</a>
<a href="sms:10086">发送短信</a>

锚点

给 a 标签增加 name 属性，可以当做锚点，目前不推荐这种写法，用 a 标签自身当锚点会再页面上渲染一个宽度为 0，高度为 20 的空元素，导致跳转到指定位置时会有偏差，更推荐用 id 属性当锚点

不推荐的写法

<a href="#atm">跳转到奥特曼</a>

<a name="atm"></a>
<p>我是奥特曼</p>

<a name="monster"></a>
<p>我是怪兽</p>

推荐的写法

<!-- 跳转本页锚点 -->
<a href="#atm">跳转到奥特曼</a>
<!-- 跳转到其他页面锚点 -->
<a href="./other.html#atm">跳转到other页面的奥特曼</a>

<p id="atm">我是奥特曼</p>
<p id="monster">我是怪兽</p>

<a href="#">回到顶部</a>
<a href="">刷新本页面</a>
<!-- 执行一段js，如果不知道执行什么，可以直接写javascript:; -->
<a href="javascript:alert(1);">点我显示弹窗</a>

name和id都是区分大小写的，且id最好不要数字开头

列表

ol（Ordered List 有序列表）

li（List Item 列表项）

<h2>把大象关进冰箱的顺序</h2>
<ol>
  <li>打开冰箱</li>
  <li>放大象</li>
  <li>关闭冰箱</li>
</ol>

li标签最好写在ul或者ol中，不要单独使用

ul（Unordered List 无序列表）

<h2>省份</h2>
<ul>
  <li>海南省</li>
  <li>山东省</li>
  <li>
    <span>河南省</span>
    <ul>
      <li>郑州市</li>
      <li>开封市</li>
    </ul>
  </li>
</ul>

dl（Definition List 自定义列表）

dt（Definition Title 定义标题）
dd（Definition Description 定义描述）

<h2>食堂菜单</h2>
<dl>
  <dt>周一</dt>
  <dd>炒拉条</dd>
  <dd>盒饭</dd>

  <dt>周二</dt>
  <dd>卤面</dd>

  <dt>周三</dt>
  <dd>烩面</dd>
</dl>

表格

基本结构

table 表格
caption 表格标题
thead 表格头部
- tr 表格行
- th 单元格（tabel head）
tbody 表格主体
- tr
- td 单元格（table data）
tfoot 表格脚注
- tr
- td

<table>
  <!-- 标题 -->
  <caption>学生信息</caption>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <!-- 表体 -->
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>男</td>
      <td>20</td>
    </tr>
  </tbody>
  <!-- 脚注 -->
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>合计：2人</td>
    </tr>
  </tfoot>

常用属性

table

border 边框宽度
width 宽度
height 高度（至少）
cellspacing 单元格间距

thead

height 表头高度
align 水平对齐方式；left、center、right
valign 垂直对齐方式；top、middle、bottom

tbody

height 表体高度（如果高度设置完后整体表格高度不够原来在 table 设置的高度，会自动拉伸）
align 水平对齐方式；left、center、right
valign 垂直对齐方式；top、middle、bottom

height 行高
align 水平对齐方式；left、center、right
valign 垂直对齐方式；top、middle、bottom

height 表头单元格高度
width 表头单元格宽度
align 水平对齐方式；left、center、right
valign 垂直对齐方式；top、middle、bottom

height 表头单元格高度
width 表头单元格宽度
align 水平对齐方式；left、center、right
valign 垂直对齐方式；top、middle、bottom
rowspan 单元格跨行个数
colspan 单元格跨列个数

常用标签

br

<br>换行符，单标签

hr

<hr>水平分割线，单标签

pre

<pre></pre>预格式化文本，按原文显示，一般用于在页面中嵌入大段代码，双标签

表单

基本结构

<form action="http://www.jd.com/search" method="post" target="_blank">
  <input type="text" name="keyword" value="手机">
  <button>搜索</button>
</form>

actioin: 表单提交地址，必填
method: 表单提交方式，选填，默认为get
target: 表单提交目标，选填，默认为_self当前页面，可以设置为_blank新窗口

文本框与密码框

<!-- 文本框 -->
<input type="text" name="useranme" value="张三">
<!-- 密码框 -->
<input type="password" name="password" maxlength="6">

单选框与复选框

<!-- 单选框 -->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="eat" checked>吃饭
<input type="checkbox" name="hobby" value="sleep" checked>睡觉
<input type="checkbox" name="hobby" value="bite">打豆豆

隐藏域

<input type="hidden" name="id" value="123456">

提交与重置

提交

<!-- 第一种写法 type也可以省略不写，不写默认为submit -->
<button type="submit">确认</button>
<!-- 第二种写法 value也可以不写，不写默认为提交文案 -->
<input type="submit" value="确认">

重置

<!-- 第一种写法 -->
<button type="reset">重置</button>
<!-- 第二种写法 value也可以不写，不写默认为重置文案 -->
<input type="reset" value="点我重置">

普通按钮

<!-- 第一种写法 -->
<button type="button">普通按钮</button>
<!-- 第二种写法 -->
<input type="button" value="普通按钮">

文本域和下拉框

文本域

<textarea name="content" cols="30" rows="10"></textarea>

下拉框

<select name="city">
  <option value="京">北京</option>
  <option value="沪" selected>上海</option>
  <option value="粤">广州</option>
</select>

禁用表单控件

<input type="text" name="username" disabled>

input、textarea、button、select、option都可以设置disabled属性

label标签

可以让用户点击 label 文案时，让控件自动获取交点

  <!-- 第一种写法：利用 for 和 id 进行绑定 -->
  <label for="yonghuming">用户名：</label>
  <input id="yonghuming" type="text" name="username">

  <input type="radio" name="sex" value="male" id="man">
  <label for="man">男</label>


  <!-- 第二种写法 把label包裹在input上-->
  <label>
    用户名：
    <input type="text" name="username">
  </label>

  <label>
    <input type="radio" name="sex" value="male">男
  </label>

fieldset 与 legend

fieldset可以为表单控件分组，legend标签是分组的标题

<fieldset>
  <legend>主要信息</legend>
  <label>
    用户名：
    <input type="text" name="username">
  </label>
  <label>
    密码：
    <input type="password" name="pwd">
  </label>
</fieldset>

框架标签

<!-- 嵌入普通网页 -->
<iframe src="http://www.toutiao.com" width="500" height="300" frameborder="0"></iframe>

<!-- 嵌入一个广告页 -->
<iframe src="http://xxxxx" width="500" height="300" frameborder="0"></iframe>

<!-- 嵌入其他内容 -->
<iframe src="./resource/如何一夜暴富.pdf" width="500" height="300" frameborder="0"></iframe>

<!-- 与超链接的 target 属性配合使用 -->
<a href="http://www.baidu.com" target="container">打开百度</a>
<!-- 与表单的 target 属性配合使用 -->
<form action="http://so.toutiao.com/search" target="container">
  <input type="text" name="keyword">
  <button type="submit">搜索</button>
</form>

<iframe name="container" width="500" height="300" frameborder="0"></iframe>

字符实体

$nbsp; 空格
$lt; <
$gt; >
$amp; &
$quot; "
$apos; ’
$yen; ¥
$copy; ©
$times; ×
$divide; ÷

参考链接

全局属性

属性名	含义	注意
id	给标签指定唯一标识，不能重复	不能在`<head>`、`<html>`、`<meta>`、`<title>`、`<script>`、`<style>`中使用
class	给标签指定类名	-
style	给标签指定样式	-
dir	内容方向，值：`ltr`、`rtl`、`auto`	-
title	给标签指定标题	-
lang	给标签指定语言	-

meta元信息

<!-- 配置字符编码 -->
<meta charset="UTF-8">
<!-- 针对IE浏览器的一个兼容性设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 配置网页自动刷新 打开网页 3 秒后跳转到百度，如果不输入 url 则代表原地刷新-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!-- 针对移动端的配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 配置网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
<!-- 配置网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">
<!-- 针对搜索引擎爬虫配置 -->
<meta name="robots" content="此处可选值见下方表格">

为毛哩

关注

18
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
【html】基础知识

dt（Definition Title 定义标题）dd（Definition Description 定义描述）< h2 > 食堂菜单 </ h2 > < dl > < dt > 周一 </ dt > < dd > 炒拉条 </ dd > < dd > 盒饭 </ dd > < dt > 周二 </ dt > < dd > 卤面 </ dd > < dt > 周三 </ dt > < dd > 烩面 </ dd > </ dl ></
复制链接

扫一扫