学习——html基础

发布时间：2023年12月19日

什么是HTML

Hyper Text Markup Language (超文本标记语言)

标记又俗称标签(tag)，一般格式：

如

<h1></h1>

标签里还可以有属性(Attribute)：

<tagName Atrribute = “value" /> 如

<meta charset="utf-8" />

还有一些特殊非成对出现标签：

<hr /> 
<br />

HTML是由浏览器解析执行

文档的基本结

<! DOCTYPE html>    ---引用的HTML5规范
<html>
  <head>       --头部：包含标签title、meta
     <meta charset=”utf-8” />
  <title></title>
</head>
	<body>     --- 主体
		--- 一般在这里写html标签
	</body>
</html>

meta

  1. 设置编码格式属性:charset

    <meta charset="utf-8"/>

    常用的编码格式有

    • gbk : 中文简体
    • gb2312: 中文简体
    • utf-8: 国际默认编码字符
    • ios-8859-1: 西欧编码
    • big5: 大五码，繁体中文。应用：台湾地区

  2. 其他meta属性

    • keywords : 关键词，一般用于标记网页的关键字,一般用于给搜索引擎检索

      <meta name="keywords" content="淘宝，网购"/>

    • description ：描述

文本排版的常用标签

  • h1~h6 : 标题标签
  • p: 段落标签
  • hr: 水平线
  • br: 换行
  • strong: 字体加粗标签
  • em: 斜体
  • span: 无任何特殊样式的标签
  • pre: 预留格式标签

html中注释

特殊符号

  1. 空格 ：&nbsp;
  2. > 大于符号：&gt;
  3. < 小于符号：&lt;
  4. " 双引号：&quot;
  5. ? 版权符号：&copy;

图像标签

<img 

 src=”图片地址”

 alt=”图片加载失败后的提示”

 title=”鼠标悬停至图片上的提示”

 width=”宽度”

 height=”高度”

/

加载图像地址的两种方式：

1、 相对路径：

2、 绝对路径：<img src=https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%E2%80%9Dhttps%3A%2F%2Fwww.baidu.com%2Fone.png%E2%80%9D&pos_id=img-36zHlzzR-1702984255803)>

超级链接

<a href="链接地址" target="目标窗口">img（图像标签）|text（文字）</a>

目标窗口：

_self: 当前窗口打开，默认

_blank: 新的窗口中打开

如果页面在使用frameset / frame / iframe的场景下才使用如下：

_parent: 在父级窗口中打开

_top: 在顶级窗口中打开

_自定义名称：在指定的特定窗口中打开

三种用法：

页面链接
<a href="example03.html">图片|文本</a>
锚链接：
<a href="#help"></a>

这里的help可以是锚标记的name也可以id

功能链接：

唤醒本地安装的某个外部程序

<a href="emailto:3424324@qq.com">图片|文本</a>

做练习：淘宝电场

div标签

div是一个容器，常用与页面的布局

标签的分类

  1. 块级元素/块级标签：
    • 如：div | p | hr | h1~h6
    • 特性：独占一行，宽度没有设置的情况下由父容器100%决定
  2. 行级元素/行级标签：
    • 如：span | strong | em |
    • 特性：多个行级元素可以同属一行，其宽度由内容决定，行级元素大部分设置宽高无效，除img。

无序列表

适用于呈现一些逻辑上有相关性的数据

<ul type="???">
	<li></li>
</ul>

ul里设置type属性定义标签

  1. disc: 实心圆点
  2. circle: 空心的圆圈
  3. square: 实心的正方形

有序列表

适用于呈现一些逻辑上有相关性且有顺序的数据

<ol>
	<li></li>
</ol>

设置type属性的类型

  • 1: 阿拉伯数字
  • a: 小写字母
  • A: 大写字母
  • i: 小写罗马数字
  • I: 大写的罗马数字

定义列表

适用于有主题描述的信息

<dl>
  <dt>主题</dt>
  <dd>描述</dd>
</dl>

注意：

有序列表与无序列表可以嵌套使用，ul的下级是li,li上级是ul。

表格标签–重点

<table>    
    <! --- 表头 --
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
      <! --- 主体 -->
    <tbody>
        <tr>
            <td></td>
        </tr>
    ………
    </tbody>
      <! --- 表脚 -->
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

  • table: 表格

  • thead: 表头

  • tbody: 主体

  • tfoot: 表脚

  • tr: 行

  • td: 单元格

  • th： 单元格（一般是用于表头信息，文本信息默认加粗居中）

表格属性：

  • width: 宽度

  • height: 高度

  • border: 边框

  • borderColor: 边框颜色

  • cellpadding: 表格填充（内）

  • cellspacing: 表格的间距（外）

  • align: 水平方向

单元格属性：

  • align: 水平方向 left center right

  • valign: 垂直方向 top middle bottom

  • 合并单元格（colspan: 跨列| rowspan: 跨行）

<td  colspan="number"></td>
<td  rowspan ="number"></td

注意：在合并后，相应单元格的行和列的数量要发生改变。

文章来源:https://blog.csdn.net/qq_64646478/article/details/135092109
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章