html基础语法 看这一篇就够了！

news2024/11/13 9:41:08

在这里插入图片描述

HTML

一 概念

html:html 文件根标签
head:编写页面相关的属性
title:页面标题
body:页面内容展示信息

二 DOM 树：

所有的标签都是 html 的子标签
head 和 body 是兄弟标签，同一级别
head 和 title 为父子标签

1.第一个程序

<html>
  <head>
    <title>标题</title>
  </head>

  <body>
    hello world
  </body>
</html>

三 快速生成代码框架

！+ 回车

快速生成的模板：

<!DOCTYPE html>
<!-- 指定当前html版本为5 -->
<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 的标签

1.注释标签

ctrl+/ 一行变为注释


2.标题标签 h1-h6

数字越大，则字体越小

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

3.段落标签

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>

4.换行标签

默认换行标签换行之后间隙比段落标签间隙要小

<br />规范 <br />不规范

5.格式化标签

(1)加粗标签

<strong>加粗</strong>
<b>加粗</b>

(2)倾斜标签

<em>倾斜</em>
<i>倾斜</i>

(3)删除线标签

<del>倾斜</del>
<s>倾斜</s>

(4)下划线标签

<ins>倾斜</ins>
<u>倾斜</u>

6.图像标签

1.img 标签

src 属性
img 标签必须搭配 src 来使用，src 是用来指定照片路径

(1)相对路径

./xxx.png 当前路径的 xxx 照片
./img/xx.png 当前路径的 img 文件夹下 xxx 照片
…/xx.png 上一个路径的 xxx 照片

<img src="照片路径" />
(2)绝对路径

图片路径

<img src="照片路径" />

网络上的图片资源

<img src="照片路径" />

2.src 属性

(1)alt 属性
<img src="照片路径" alt="此照片加载失败" />
(2)title 属性
<img src="照片路径" title="这是图片的标题" />
(3)width/heigh 控制宽度高度

高度和宽度一般改一个就行，另外一个会等比缩放，否则就会造成图片失衡。

<img src="照片路径" height="100px" />
(4)border 属性 边框
<img src="照片路径" border="10px" />

7.a 标签

  • href：必须具备，表示点击后会跳转到那个页面
  • target：打开方式，默认是_self，，如果是_blank 则用新标签页打开

1. href

<a href="网址">文字内容</a>

<a href="#">不做任何跳转，只在当前页面</a>

<a href="http://www.baidu.com">
  <!--通过图片的超链接-->
  <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="" />
</a>

2. target

是否打开新页面
默认就是在当前页面打开新页面

<a href="www.baid.com" target="_blank"></a>

<a href="www.baid.com" target="_self"></a>

8.表格标签

  • table：表示整个表格
  • tr：表示表格的一行
  • td：表示一个单元格
  • th：表示表头的单元格。会居中加粗
  • thead：表格的头部区域(与 th 区分，范围比 th 大)
  • tbody：表格的内容区域

table 包含 tr；tr 包含 td 或者 th

shift+alt+向下 直接将选中的内容向下复制

  • 边框：
<table border="10px"></table>
  • 大小：
<table width="500" height="300"></table>
  • 单元格之间的间距：
<table cellspacing="0"></table>
  • 内容距离边框的距离：
<table cellpadding></table>
  • 控制表格整体位置：
<table align="center"></table>
<!--left center right-->
  • 表头区域 thead
    thead 中的内容是居中+加粗表示
<thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
</thead>
  • 表格内容区域 tbody
<tbody>
  <tr>
    <td>张三</td>
    <td>男性</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女性</td>
    <td>4</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>女性</td>
    <td>56</td>
  </tr>
</tbody>
  • 单元格合并

行合并：

<tbody>
  <tr>
    <td>张三</td>
    <td rowspan="2">男性</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <!-- <td>男性</td> -->
    <td>4</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>女性</td>
    <td>56</td>
  </tr>
</tbody>

列合并:

<tbody>
  <tr>
    <td>张三</td>
    <td>男性</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>男性</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="2">王五</td>
    <td>女性</td>
    <td>56</td>
  </tr>
</tbody>

9.列表标签

  • 无序列表: ul li
  • 有序列表：ol li
  • 自定义列表：dl(总标签) dt(小标题) dd(围绕标题来说明)

1.无序列表

ul li

  • 快捷键：ul>li*4
<body>
  <h1>这是无序列表</h1>

  <ul>
    <li>这是内容1</li>
    <li>这是内容2</li>
    <li>这是内容3</li>
    <li>这是内容4</li>
  </ul>
</body>
(1).属性
type
  • disc 无序列表默认的实心圆点
  • square 实心黑方块
  • circle 空心圆圈
<body>
  <h1>这是无序列表</h1>

  <ul type="circle">
    <li>这是内容1</li>
    <li>这是内容2</li>
    <li>这是内容3</li>
    <li>这是内容4</li>
  </ul>
</body>

2.有序列表

ol li

<h1>这是有序列表</h1>
<ol>
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>
(1).属性
type
  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马字母编号
  • I 表示大写罗马字母编号
  • 1 表示数字编号(默认)
<h1>这是有序列表</h1>
<ol type="I">
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>
start
  • 决定从那个数字开始计数
<h1>这是有序列表</h1>
<ol type="I" start="2">
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>

3.自定义列表

dl dt dd

<h1>自定义列表</h1>
<h1>自定义列表</h1>
<dl>
    <dt>我的朋友们
        <dd>老三</dd>
        <dd>王五</dd>
        <dd>mike</dd>
    </dt>
</dl>

10.表单标签

form
用表单标签来完成服务器的一次交互

分为两个部分

  • 表单域：包含表单元素的区域重点是 form 标签。
  • 表单控件：输入框，提交按钮等，重点是 input 标签。

1.属性

(1)action
<form action="服务器地址"></form>
(2)input
文本框
<input type="text" />

  • 单行输入

    <form action="">姓名<input type="text" /></form>
密码框
<form action="">密码<input type="password" /></form>
单选框

  • 单选

    此时还不是单选框，男女都可以选

    <form action="">性别<input type="radio" />男 <input type="radio" />女</form>

    name="gender"相等的只能选其中的一个

    <form action="">
  性别<input type="radio" name="gender" />男
  <input type="radio" name="gender" />女
</form>

    默认开始选择,checked="checked"所在的地方就是默认值

    <form action="">
  性别<input type="radio" name="gender" checked="checked" />男
  <input type="radio" name="gender" />女
</form>
复选框

  • 多选

    <form action="">
  爱好<input type="checkbox" />吃饭 <input type="checkbox" />睡觉
  <input type="checkbox" />玩游戏
</form>
普通按钮
<form action="">
  <input type="button" value="这是一个普通按钮" />
</form>

  • 应用
    点击后弹出 hello

    <input type="button" value="这是一个普通按钮" onclick="alert('hello')" />
提交按钮

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送

<form action="">
  <input type="submit" />
</form>

  • 目标网址为百度一下

    <form action="http://www.baidu.com">
  用户名<input type="text" name="user" />
  <br />
  密码<input type="password" />
  <br />
  <input type="submit" />
</form>

  • 重置按钮 reset

    <form action="http://www.baidu.com">
  用户名<input type="text" name="user" />
  <br />
  <input type="submit" />
  <input type="reset" /><!--重置按钮-->
</form>
选择文件(提交文件)
<form action="http://www.baidu.com">
  <input type="file" />
</form>
(3)label

通常与 input 搭配使用

<label for="存放关联的id">文本</label>

例如:

<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
(4)select

通常搭配 option 使用

  • option 标签
    属性:
    selected 表示默认选择那个选项
<select name="" id="">
  <option valut="">--请选择年份--=</option>
  <option valut="" selected>--1990--=</option>
  <!--selected表示默认选择哪一个-->
  <option valut="">--1991--=</option>
  <option valut="">--1992--=</option>
  <option valut="">--1993--=</option>
  <option valut="">--1994--=</option>
</select>
(5)textarea

  • 属性
    rows:长
    cols:高

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

11.无语义标签 div&span

  • div 标签，divsion 的缩写，含义是 分割

  • span 标签 含义是 跨度

  • div 是独占一行，是一个大盒子

  • span 是不独占一行，是一个小盒子

无语义标签无固定用途
拿着这个标签啥都可以干


12.HTML 特殊字符

空格： &nbsp;

小于号：&lt;

大于号：&gt;

按位与：&amp;

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2116055.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

音视频入门基础：WAV专题（9）——FFmpeg源码中计算WAV音频文件每个packet的duration和duration_time的实现

音视频入门基础：WAV专题（9）——FFmpeg源码中计算WAV音频文件每个packet的duration和duration_time的实现

一、引言 从文章《音视频入门基础&#xff1a;WAV专题&#xff08;6&#xff09;——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道&#xff0c;通过FFprobe命令可以显示WAV音频文件每个packet&#xff08;也称为数据包或多媒体包&#xff09;的信息&#xff0…
阅读更多...
苹果电脑可以玩《原神》吗？原神可以在Mac上玩吗？苹果电脑玩原神怎么样

苹果电脑可以玩《原神》吗？原神可以在Mac上玩吗？苹果电脑玩原神怎么样

《原神》是一款由米哈游开发的开放世界冒险游戏&#xff0c;自从2020年正式上线以来&#xff0c;就受到了全球玩家的热烈欢迎。《原神》的画面精美&#xff0c;音乐动听&#xff0c;剧情丰富&#xff0c;角色多样&#xff0c;玩法多变&#xff0c;让人沉浸在一个充满奇幻和魅力…
阅读更多...
【Python 学习】Pandas基础与应用（1）

【Python 学习】Pandas基础与应用（1）

题目 1 Pandas 简介1.1 主要特征1.2 Pandas 安装 2 Pandas中的数据结构2.1 Series 数据结构和操作2.1.1 Series的数据结构2.1.2 Seres的操作 2.2 DataFrame 数据结构和操作2.2.1 DataFrame 数据结构2.2.2 Dataframe 操作2.2.3 DateFrame 的特殊操作 2.3 Series 和 DataFrame 的…
阅读更多...
LRU go cache的实现

LRU go cache的实现

目录 LRU算法LRU原理LRU实现Redis LRU算法实现1. 内存淘汰策略2. LRU算法的实现3. LRU vs LFURedis中的LRU使用场景 基于LRU的缓存库go-cache安装使用代码解析 hashicorp/golang-lru安装使用代码解析 groupcache安装使用代码解析缓存淘汰算法并发缓存组一致性哈希防止缓存击穿—…
阅读更多...
从电商行业的变化引出未来技术趋势

从电商行业的变化引出未来技术趋势

时间&#xff1a;2024年09月08日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频地址&#xff1a;喜马拉雅 希望大家帮个忙&#xff01;如果大家有工作机会&#xff0c;希望帮小蒋推荐一下&#xff0c;小蒋希望遇到一个认真…
阅读更多...
无人机人工增雨技术详解

无人机人工增雨技术详解

无人机&#xff0c;全称为无人驾驶飞行器&#xff08;Unmanned Aerial Vehicle, UAV&#xff09;&#xff0c;是一种不需要人员直接操控&#xff0c;而是利用先进的遥控技术、自主飞行控制系统和传感器技术来实现空中飞行和完成特定任务的飞行器。 一、技术原理 无人机人工增雨…
阅读更多...
轻NAS系统CasaOS设备安装Memos笔记结合内网穿透公网访问与同步教程

轻NAS系统CasaOS设备安装Memos笔记结合内网穿透公网访问与同步教程

文章目录 前言1. 使用Docker部署memos2. 注册账号与简单操作演示3. 安装cpolar内网穿透4. 创建公网地址5. 创建固定公网地址 前言 本文主要介绍如何在安装了轻NAS系统CasaOS设备中使用Docker本地部署开源云笔记服务memos&#xff0c;并结合cpolar内网穿透工具配置公网地址&…
阅读更多...
C/C++两点坐标求距离以及C++保留两位小数输出，秒了

C/C++两点坐标求距离以及C++保留两位小数输出，秒了

目录 1. 前言 2. 正文 2.1 问题 2.2 解决办法 2.2.1 思路 2.2.2 代码实现 3. 备注 1. 前言 依旧是带来一个练手的题目&#xff0c;目的就一个&#xff0c;方法千千万&#xff0c;通向终点的方式有很多种&#xff0c;没有谁与谁&#xff0c;我们都是为了成为更好的自己。…
阅读更多...
VMware Fusion 虚拟机Mac版 安装CentOS系统教程

VMware Fusion 虚拟机Mac版 安装CentOS系统教程

Mac分享吧 文章目录 CentOS安装完成&#xff0c;软件打开效果一、Mac中使用虚拟机安装CentOS系统1️⃣&#xff1a;下载镜像2️⃣&#xff1a;创建虚拟机3️⃣&#xff1a;设置虚拟机4️⃣&#xff1a;安装虚拟机5️⃣&#xff1a;设置成从磁盘启动 安装完成&#xff01;&…
阅读更多...
哈希表如何避免冲突

哈希表如何避免冲突

系列文章&#xff1a; 1. 先导片--Map&Set之二叉搜索树 2. Map&Set之相关概念 3. 哈希表如何避免冲突 目录 1.概念 2. 冲突-概念 3. 冲突-避免 3.1 冲突-避免-哈希函数设计 3.2 冲突-避免-负载因子调节 4. 冲突-解决 4.1 冲突-解决-闭散列 4.1.1 线性探…
阅读更多...
C++_15_类与对象

C++_15_类与对象

类与对象 什么是类&#xff1f; 描述有共同特征的事务的概念 作用&#xff1a;代码中 创建对象 什么是对象&#xff1f; 生活中&#xff1a; 就是指真实存在的事物。 代码中&#xff1a; 模拟真实的事物&#xff0c;使用类创建得到。 类与对象的关系 生活中&#xff1a; ​ 先…
阅读更多...
VMware vSphere5.0关闭虚拟机电源时，报错从ESXI主机接收到错误

VMware vSphere5.0关闭虚拟机电源时，报错从ESXI主机接收到错误

ESXI和VCENTER都是5.0版本的&#xff0c;有台虚拟机关机报错提示从ESXI主机接受到意外错误 具体报错信息如下&#xff1a; 从VCENTER平台对该虚拟机做任何操作都无法生效&#xff0c;后来查看了虚拟机的网络和端口&#xff0c;发现SSH能正常联通&#xff0c;进入虚拟机后使用命…
阅读更多...
【算法专场】模拟（下）

【算法专场】模拟（下）

目录 前言 38. 外观数列 算法分析 算法思路 算法代码 1419. 数青蛙 算法分析 算法思路 算法代码 2671. 频率跟踪器 算法分析 算法思路 算法代码 前言 在前面我们已经讲解了什么是模拟算法&#xff0c;这篇主要是讲解在leetcode上遇到的一些模拟题目~ 38. 外观数列…
阅读更多...
Pencils Protocol生态新进展，即将上线 Vault 产品

Pencils Protocol生态新进展，即将上线 Vault 产品

“极高的盈利预期、通证的持续回购与销毁&#xff0c;Vault产品的推出正在成为Pencils Protocol生态发展的重磅利好。” Pencils Protocol是目前Scroll生态TVL最高的DeFi平台 &#xff0c;即便是行情整体较为平淡&#xff0c;其仍旧能够保持在3亿美元左右的锁仓价值&#xff0c…
阅读更多...
史上最全的Linux常用命令汇总（超全面！超详细！）收藏这一篇就够了！

史上最全的Linux常用命令汇总（超全面！超详细！）收藏这一篇就够了！

command &#xff1a;命令名&#xff0c;相应功能的英文单词或单词的缩写[-options] &#xff1a;选项&#xff0c;可用来对命令进行控制&#xff0c;也可以省略parameter &#xff1a;传给命令的参数&#xff0c;可以是 零个、一个 或者 多个 查阅命令帮助信息 -help 说明&…
阅读更多...
LC1860C 后来怎么样了

LC1860C 后来怎么样了

这块芯片前身是大唐旗下联芯的LC1860C&#xff1b;这块传奇芯片在4G时代大放异彩&#xff0c;但是某些原因之后&#xff0c;技术打包转让给三家&#xff0c;分别是&#xff1a;小米&#xff0c;大疆&#xff0c;哲酷&#xff08;VIVO&#xff09;&#xff1b; 1、哲酷 哲酷目…
阅读更多...
Infiniband网络架构的技术与性能分析

Infiniband网络架构的技术与性能分析

Infiniband格局寡头&#xff0c;性能占优 这篇文章探讨了网络交换机的性能优势&#xff0c;以及如何通过扩大模型参数量来提高语言模型的生成和预测能力。然而&#xff0c;计算约束对这种正向关系产生了重要影响&#xff0c;导致在相同的计算约束下&#xff0c;总存在最佳的模型…
阅读更多...
【软考】希尔排序算法分析

【软考】希尔排序算法分析

目录 1. c代码2. 运行截图3. 运行解析 1. c代码 #include <stdio.h> #include <stdlib.h> void shellSort(int data[], int n){// 划分的数组&#xff0c;例如8个数则为[4, 2, 1]int *delta;int k;// i控制delta的轮次int i;// 临时变量&#xff0c;换值int temp;…
阅读更多...
基于java网页的纸业管理系统设计与实现

基于java网页的纸业管理系统设计与实现

博主介绍&#xff1a;专注于Java .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的可以…
阅读更多...
【iOS】MVC设计模式

【iOS】MVC设计模式

MVC 前言 如何设计一个程序的结构&#xff0c;这是一门专门的学问&#xff0c;叫做"架构模式"&#xff08;architectural pattern&#xff09;&#xff0c;属于编程的方法论。MVC 模式就是架构模式的一种。 它是Apple 官方推荐的 App 开发架构&#xff0c;也是一般…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023