学习——html基础

2023-12-19 21:23:46

什么是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>

文本排版的常用标签

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

html中注释

特殊符号

空格： 
> 大于符号：>
< 小于符号：<
" 双引号："
? 版权符号：©

图像标签

<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是一个容器，常用与页面的布局

标签的分类

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

无序列表

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

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

ul里设置type属性定义标签

disc: 实心圆点
circle: 空心的圆圈
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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！