首页 > 其他分享 >html(超详细知识点)

html(超详细知识点)

时间:2024-08-19 17:23:46浏览次数:14  
标签:知识点 网页 标签 单元格 标题 html 内容 详细 属性

‌HTML是超文本标记语言(HyperText Markup Language)的缩写,是一种用于创建网页的标准标记语言。而CSS则是对网页进行下一步的美化,两者相辅相成,才能创建一个完美的网页。

对于有一定编程基础的人来说,这门语言相对简单,但是其中知识点繁多,有人望而却步;有人学过也已经忘得差不多了。希望接下来的系列文章能够帮助你更好了解HTML和CSS或者巩固已学知识

目录

1.标签语法 

2.结构骨架——!+enter自动生成

3.关系

4.注释

5.标题

6.段落标签

7.文本格式化

8.图像

 9.路径——起->终路线(相对/绝对)

10.超链接

11.音频

12.视频

13.列表

14.表格

15.合并单元格

16.表单

17.下拉菜单

18.文本域——形成文本框

19.label(包裹内容,该内容也可以被选择)

20.按钮

拓展

此篇文章到此结束,大家自己也试着找个网页练练手吧!代码无情,人间有情,欢迎大家点赞评论加收藏。内容如有问题还请大家在评论区指点一二。


1.标签语法 

HTML通过各种标签标记语言,实现不同功能。

(1)双标签:开头结尾成对出现,且后者比前面多加“/”,<开始标签>内容<结束标签>。eg:

<strong>加粗</strong>

ps:对文字内容施行标签所代表的功能

(2)单标签:只有开头无结尾。eg:

<br>换行
<hr>水平线
2.结构骨架——!+enter自动生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<html>整个网页</html>
<head>头(存给浏览器)</head>
<title>标题</title>
<body>主体</body>
3.关系
  • 父子关系(非对齐):Tab——空格。eg:上图中head和title的关系
  • 兄弟关系(对齐):Shift Tab——取消空格。eg:上图中head和body的关系
4.注释
<!-- 注释内容 -->

快捷键:Ctrl+/——删除/添加

5.标题
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
6.段落标签
<p>段落</p>
7.文本格式化
strong加粗b
em倾斜i
ins下划线u
del删除线s

8.图像
<img src="图片的URTL" alt="替换文本(图片无法显示则显示文字)" title="提示文本(鼠标悬停时显文字)">

 属性值:height/weight:图片大小

 9.路径——起->终路线(相对/绝对)

(1)相对

  • /:表示某个文件夹内
  • ./:表示当前文件夹内
  • ../:表示上一个文件夹内

(2)绝对

  • 自己电脑:上述方法复制地址
  • 别人:复制图片地址
10.超链接
    <a href="链接地址"></a>
    <a href="#" target="_blank">文字内容</a>
    <!-- #:空链接target="_blank":自动生成新建页 -->
11.音频
<audio src="音频的UTRL"></audio>
属性值效果
controls显示面板
loop循环
autoplay自动

12.视频
<video src="视频的URTL"></video>
属性值效果
controls显示面板
loop循环
muted静音
autoplay(muted前提下)自动

13.列表
  • 无序(文章当前部分即为无序效果)
        <ul>
            <li>···</li>
            <li>···</li>
        </ul>
  • 有序
<ol>
    <li><a href="#">kbkj</a></li>
    <li><a href="#">xnx</a></li>
</ol>
  • 定义
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>
14.表格
<table border="1">
    <!-- border="1"是框的边距,可以去掉 -->
    <tr>
        <th>表头</th>
        
    </tr>
    <!-- 第一行 -->
    <tr>
        <td>张三</td>
    </tr>
    <!-- 第二行 -->
    <tr>
        ...
    </tr>
    <!-- 第三行 -->
</table>

优化方法

  • thead:头

  • tbody:内容

  • tfoot:尾
15.合并单元格
属性效果
rowspan垂直合并
colspan水平合并

ps:以上均为<td>标签的属性,如下例子:

<table border="1">
  <tr>
    <td colspan="2" rowspan="2">合并的单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <!-- 这里的单元格因为上面的rowspan和colspan被合并,所以不会显示 -->
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>
16.表单

(1)input标签

<input type="属性值">
属性值效果
text文本
passward密码
radio单选
checkbox多选
file文件上传

(2)占位文本——提示

<input type="属性值" placeholder="提示">

(3)单选框:radio

name:分组(同组只选一个)

ps:默认选一个时,在此选择中属性加checked,多选同理

(4)file中文件多选

<input type="file" multiple>
17.下拉菜单
        <select>
            <option>内容</option>
            <option>内容</option>
            <option selected>内容</option>
        </select>
        <!--selected:默认选中  -->

场景:注册界面选取自己所在城市

18.文本域——形成文本框
<textarea>···</textarea>
19.label(包裹内容,该内容也可以被选择)
<label><input type="radio" name="gender">男</label>

属性值和input相同

20.按钮
<button type="属性值">文字内容</button>
20属性值效果
submit提交
reset重置
button普通按钮

拓展

div:换一行

<div>...</div>

span:不换行,空一格

<span>...</span>

空格:&nbsp

<:&lt

>:&gt

此篇文章到此结束,大家自己也试着找个网页练练手吧!代码无情,人间有情,欢迎大家点赞评论加收藏。内容如有问题还请大家在评论区指点一二。

标签:知识点,网页,标签,单元格,标题,html,内容,详细,属性
From: https://blog.csdn.net/2401_86644481/article/details/141037264

相关文章

  • 小白学习c++P7【1003】对齐输出(c++)详细讲解
     EXTRA##网站......
  • 小白学习c++P8【1004】字符三角形(c++)详细讲解
    目录EXTRA##PT1-知识点引入......
  • 王苏安说钢材@309s不锈钢无缝管的工艺流程详细介绍
    309S不锈钢无缝管的工艺流程一共分为五步,分别是①切割、②弯曲、③成型、④焊接、⑤表面处理  ①切割:309s不锈钢无缝管的切割方法有剪切、火焰切割、机械切割、等离子切割等,其中薄型材料可以用剪切或切割机进行,厚型材料可以用火焰切割和等离子切割。  ②弯曲:冷弯能够让3......
  • html JS 语音识别
    1、语音识别的过程语音识别涉及三个过程:首先,需要设备的麦克风接收这段语音;其次,语音识别服务器会根据一系列语法(基本上,语法是你希望在具体的应用中能够识别出来的词汇)来检查这段语音;最后,当一个单词或者短语被成功识别后,结果会以文本字符串的形式返回(结果可以有多个),以及更多......
  • Linux 安装Mysql详细教程
    前言本文主要介绍在Linux环境下安装MySQL的过程。1:下载MySQL5.7的rpm安装包选择合适的版本,这里我们使用的是MySQL5.7.20;下载完成后发送到自己的CentOS7服务器里,这里可以通过Xftp上传MySQLhttps://www.mysql.com/1.在根目录下创建一个mysqlpackage目录mkdirmysqlpa......
  • 【数据结构】详细介绍栈和队列,解析栈和队列每一处细节
    目录一.栈1. 栈的概念2. 栈的实现2.1栈的结构2.2初始化栈2.3入栈2.4出栈2.5获取栈顶元素2.6获取栈中有效个数2.7判断栈是否为空2.8销毁栈 二.队列1.队列的概念2.队列的实现 2.1队列的结构2.2队列初始化 2.3销毁队列 2.4入队列(队尾) ......
  • HTML
    titlepublish01-HTML标签:图片标签trueimg标签介绍<imgsrc="图片的URL"/>能插入的图片类型能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等。不能往网页中插入的图片格式是:psd、ai等。img标签的src属性这里涉及到图片的一个属性:src属性:指图片的路径......
  • HTML5服装电商网上商城模板源码
    文章目录1.设计来源1.1主界面1.2购物车界面1.3电子产品界面1.4商品详情界面1.5联系我们界面1.6各种标签演示界面2.效果和源码2.1动态效果2.2源代码源码下载万套模板,程序开发,在线开发,在线沟通         【博主推荐】:前些天发现了一个巨牛的人工智能......
  • 经典记忆卡片游戏html代码
    记忆卡片游戏是一款简单而富有挑战性的经典游戏,旨在锻炼玩家的记忆力和观察力。游戏通常由一组图案相同的卡片组成,玩家需要通过翻转卡片找到匹配的对。每当找到一对匹配的卡片时,玩家将获得一定的分数或奖励,游戏结束时,分数最高者获胜。无论是与朋友竞技,还是单独训练,这款游戏都适合......
  • HTML5+CSS3学习笔记补充——移动端网页+Bootstrap框架
    移动端网页和Bootstrap框架1.视口:用来约束HTML尺寸<!--视口标签是HTML骨架默认生成的设置网页宽度与逻辑分辨率(即设备)宽度一致--><metaname="viewport"content="width=device-width,initial-scale=1.0">2.二倍图:防止设计稿图片在高分辨率屏幕下模糊失真3.......