HTML 学习总结

news2024/11/19 19:41:59

超级详细的 HTML 学习笔记,一篇入门系列!!耐心读一遍 复习必备!!

目录

简要

认识标签

基本结构

常见标签

1. 注释 ---> ctrl + /

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

3. 段落标签 ---> p

4. 换行 ---> br

5. 格式化标签

加粗 ---> strong 和 b

倾斜 ---> em 和 i

删除线 ---> del 和 s

下划线 ---> ins 和 u

6. 图片标签 ---> img

7. 超链接 ---> a

href :可以填入不同的内容 详细看代码注释

targer:控制打开方式

8. 表格标签 ---> table

几个属性:

几种标签:

合并单元格:

9. 列表标签

10. 表单标签

11. 其他标签

① lable 标签:

② select 标签

③ textarea标签

④ 无语义标签:div & span

​编辑


 

 

简要

  • html --- 全程是“超文本标记语言”,学习这个语言,主要就是学习其中的标签。
  • 敲代码软件:vscode
  • 展示浏览器:Chrom

 

认识标签

  • 标签名放到 <> 中
  • 大部分标签成对出现 例如<body> </body>,分别是开始标签和结束标签
  • 少数的标签只有开始标签 如 <br>
  • 开始标签可能会有一些属性,例如 id 表示这个标签的标识符

 

基本结构

vscode中 快捷键 ! + enter 能自动生成主体框架

<!DOCTYPE html>
<!-- 表示当前文档是一个html5文件 -->

<html lang="en">
    <!-- lang属性表示当前页面是english语言,有些浏览器会根据这个进行翻译 -->

<head>
    <meta charset="UTF-8">
    <!-- 使用utf-8编码,没有这一行可能会导致乱码 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport 指的是 设备的屏幕上能用来显示我们网页的那一块区域 -->
    <!-- width=device-width,initial-scala=1.0  这里是设置可视区和设备的宽度等宽,并且设置初始缩放为不缩放 -->

    <title>Document</title>
    <!-- Document指的是网站名字 -->
</head>

<body id="ID">
    <!-- id是body的唯一属性,相当于身份标识,后面可以通过id链接跳转到这里 -->

</body>

</html>

常见标签

1. 注释 ---> ctrl + /

ctrl + /  可以快速进行注释,或者取消注释

<!-- 这就是注释 -->

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

标签分六级  h1  --  h6

    <h1>HTML</h1>
    <h2>简要</h2>
    <h2>认识标签</h2>
    内容: 标签是基本结构

 

3. 段落标签 ---> p

<p>内容: 标签是基本结构</p>
<p>难度: 很简单</p>

  1. 这个是根据浏览器进行排版的
  2. html 内容首尾处的换行 空格 均无效
  3. html 内容中间的多个空格 只相当于一个空格
  4. html 输入换行 不会真的换行 只是相当于一个空格

 

4. 换行 ---> br

    <br>内容: 标签是基本结构
    <br>难度: 很简单

 相比较于换行 br 两行的行间距小了很多

5. 格式化标签

  • 加粗 ---> strong 和 b

  • 倾斜 ---> em 和 i

  • 删除线 ---> del 和 s

  • 下划线 ---> ins 和 u

    <b>加粗</b>  <i>倾斜</i>  <s>删除线</s>  <u>下划线</u>

6. 图片标签 ---> img

  • src: 是这个图片的地址,可以是本地地址 可以是网络地址
  • alt : 是 替换本文,当图片不能被正常显示的时候,就会替换成这个文字  
  • title:提示文本,鼠标停留在图片上会有提示
  • width:控制高度  
  • height:控制宽度  
  • border:设置边框,通常使用css设定
    <img src="C:\Users\19396\Desktop\菜的安详.jpg" alt="本地图片:菜的安详" title="菜的安详">
    <img src="https://ru.w3docs.com/uploads/media/book_gallery/0001/02/849d4286475e04155fd5f21861f16f53db95ac72.png"
        alt="网络图片:html5" width="200px" height="100px">

 

7. 超链接 ---> a

href :可以填入不同的内容 详细看代码注释

    <br><!-- 外部链接:其他网站地址 -->
    <a href="https://www.baidu.com/">百度</a>

    <br><!-- 内部链接:网站内部页面之间的链接,写相对路径即可 -->
    <a href="demo1.html">demo1</a>

    <br><!-- 空链接:herf必须由内容,如果想让其为空,用 #  -->
    <a href="#">这是一个空链接</a>

    <br><!-- 下载链接:href对应的路径是一个文件(可以使用zip文件) -->
    <a href="C:\Users\19396\Desktop\杨和苏歌词简谱.zip">zip压缩包文件</a>

    <br><!-- 网页元素链接:把图片等元素放入a标签中,可以给其添加链接 -->
    <a href="https://www.baidu.com/">
        <img src="https://img.sj33.cn/uploads/202009/7-20092H12GA16.jpg" alt="百度图片链接" width="150" height="100">
    </a>

    <p></p><!-- 锚点链接:可以快速定位到页面的某一个位置 -->
    <a href="#one">第一季</a><!-- 点击这里的 第一季 就可跳转到id为two的段落-->
    <a href="#two">第二季</a><!-- 点击这里的 第二季 就可跳转到id为two的段落-->
    <p id="one">
        第1集剧情<br>
        第2集剧情<br>
    </p>
    <p id="two">
        第1集剧情<br>
        第2集剧情<br>
    </p>

 

targer:控制打开方式

打开方式 默认是_self   新标签页打开:_blank

    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <a href="demo1.html" target="_blank">demo1</a>

8. 表格标签 ---> table

几个属性:

  •         align :对齐方式,表格的对其,不是表格里内容
  •         border :边框,1表示有边框(数字越大,边框越粗) ;    " " 表示没边框
  •         cellpadding :内容距离边框的距离 默认为 1px
  •         cellspacing :单元格之间的距离    默认为2px
  •         width / height :设置尺寸
  • 注意这几个属性 vscode 都提示不出来,需要手敲

几种标签:

  •         tr 标签:表示表格的一行
  •         td 标签:表示一个单元格
  •         th 标签:表示表头单元格
  •         thead 标签:表示表格的头部区域(注意和 th 区分,范围比 th 大)
  •         tbody 标签:表格得到主体区域

合并单元格:

  •         跨行合并 :rowspan = "n" 
  •         跨列合并 :colspan = "n" 

<table align="center" border="1" cellpadding="1px" cellspacing="2px" width="200" height="100">
        <tr>
            <td colspan="3" align="center">信息统计</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>12</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>4</td>
            <td>女</td>
        </tr>
    </table>

 

 

9. 列表标签

  • 有序列表:   ul   li 
  • 无序列表:   ol   li 
  • 自定义列表 dl (小标签)   dt (小标题)   dd (围绕标题说明)上面有几个小标题,下面有几个围绕这个标题来展开的   
    <h4>无序列表</h4>
    <ul>
        <li>列表标签</li>
        <li>无序标签</li>
        <li>自定义标签</li>
    </ul>
    <h4>有序标签</h4>
    <ol>
        <li>列表标签</li>
        <li>无序标签</li>
        <li>自定义标签</li>
    </ol>
    <h4>自定义列表</h4>
    <dl>
        <dl>动物</dl>
        <dt>会飞的:</dt>
        <dd>老虎</dd>
        <dd>狮子</dd>
        <dt>四条腿</dt>
        <dd>狗</dd>
    </dl>

 

10. 表单标签

表单标签是让用户输入信息的重要途径

分成两个部分:

  • 表单域:包含表单元素的区域,重点是 form 标签
  •               form 标签:描述了要把数据按照什么方式,提交到哪个页面中。

  • 表单控件:输入框,提交按钮等,重点是 input 标签
  •               imput 标签:各种输入控件,比如 单行文本框、按钮、单选框、复选框

属性:

  • type :取值种类很多,button、checkbox、text、file、image、password、radio等
  • name :给 input 起个名字,尤其对于单选按钮,具有相同name的才能多选一
  • value :input 中的默认值
  • checked :默认被选,用于单选按钮和多选按钮
  • maxlength :设定最大长度
text---><input type="text"><br>
password---><input type="password"><br>
<input type="radio" name="sex" >男<br>
<input type="radio" name="sex" >女<br>
<input type="checkbox" checked="checked">吃饭<br>
<input type="checkbox" checked="checked">睡觉<br>
<input type="checkbox">打游戏<br>
<input type="button" value="按钮">

<!-- 提交按钮:提交按钮放到form标签内,点击后就会尝试给服务区发送 -->
<form action="demo7.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<!-- 清空按钮:点击清空可以清空text里的内容 -->
<form action="demo7.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" name="清空">
</form>
<!-- 可以选择文件 -->
<input type="file">

 

11. 其他标签

① lable 标签:

搭配 input 使用,可以选中相应的单选/复选框,提升用户体验

  •         for 属性:指定当前 lable 和哪个相同的 input 的标签对应(此时点击才有用)
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">

 

② select 标签

  •         option 属性:之间的文字就是选项
  •         selected="selected"  表示默认
    <select name="" id="">
        <option value="a" >北京</option>
        <option value="b" >上海</option>
        <option value="a" selected="select">郑州</option>
    </select>

 

 

③ textarea标签

<textarea name="" id="" cols="30" rows="10">本文内容</textarea>

④ 无语义标签:div & span

这俩就是两个盒子 用于网页布局

div 标签      divsion 的缩写,分割  ------  独占一行,是一个大盒子

span 标签   跨度  ------ 不占一行,是一个小盒子

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

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

相关文章

Git | 一文带你零基础快速上手Git

&#x1f451; 博主简介&#xff1a;    &#x1f947; Java领域新星创作者    &#x1f947; 阿里云开发者社区专家博主、星级博主、技术博主 &#x1f91d; 交流社区&#xff1a;BoBooY&#xff08;优质编程学习笔记社区&#xff09; 前言&#xff1a;本文适合零基础小白…

Docker

目录1、docker介绍1.1 docker是什么1.2 容器与虚拟机的比较2、docker安装2.1 docker 基本组成2.2 安装步骤2.3 阿里云镜像加速2.4 run干了什么3、docker常用命令3.1 帮助命令及启动命令3.2 镜像命令3.3 容器命令4、Docker镜像4.1 镜像是什么&#xff1f;4.2 分层镜像 UnionFS 联…

时间复杂度和空间复杂度

文章目录一、算法的复杂度二、时间复杂度1.时间复杂度概念2.大O的渐进表示法3.常见时间复杂度计算举例3.1 实例1 【 O(N)】3.2 实例2 【O(NM)】3.3 实例3 【O(1)】3.4 实例4 【O(N)】3.5 实例5 【O(N^2)】3.6 实例6 【O(logN)】3.7 实例7 【O(N)】3.8 实例8【O(2^N)】三、空间复…

新的3D地图制图技术改变了全球定位的游戏规则

有人说&#xff1a;一个人从1岁活到80岁很平凡&#xff0c;但如果从80岁倒着活&#xff0c;那么一半以上的人都可能不凡。 生活没有捷径&#xff0c;我们踩过的坑都成为了生活的经验&#xff0c;这些经验越早知道&#xff0c;你要走的弯路就会越少。 在人类技术发展的历史长河…

市场裁猿~ 行业内卷~ Android 开发突破重围?

往日光鲜亮丽的互联网企业在今年彻底进入了寒冬&#xff0c;往年的高不可攀&#xff0c;低成本运营&#xff0c;在今年都不再是护身符。更是有不少互联网大厂开启了裁员模式&#xff0c;其中就有百度、阿里巴巴、快手、汽车之家等知名企业。 从今年三月起直到现在互联网各厂裁员…

【微信小程序系列:二】小程序常用功能:文字可复制、跳转地图、扫一扫、拨打电话、调整屏幕亮度、监听截屏...

一.先言&#xff1a; (&#xff5e;&#xffe3;▽&#xffe3;)&#xff5e;&#xff0c;hello&#xff0c;微信小程序系列第二篇&#xff0c;介绍下小程序里的常用功能api&#xff0c;可以快速copy使用~ 二.文字可复制&#xff1a; 小程序页面里的文字默认是没有长按复制功…

自动泊车停车位检测算法

转自&#xff1a;https://zhuanlan.zhihu.com/p/522630354 图1&#xff1a;泊车示意图一、背景介绍 自动泊车大体可分为4个等级&#xff1a; 第1级&#xff0c;APA 自动泊车&#xff1a;驾驶员在车内&#xff0c;随时准备制动&#xff0c;分为雷达感知和雷达视觉感知两种方式。…

手机批发业务-商品备选区

样式 代码 <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"author" content"huyiwei"><meta name"generator" content"HBuilder X"><title>…

大数据项目之电商数仓、用户行为日志、服务器和JDK准备、模拟数据

文章目录3. 用户行为日志3.4 服务器和JDK准备3.4.1 服务器准备3.4.2 编写集群分发脚本xsync3.4.3 SSH无密登录配置3.4.4 JDK准备3.4.5 环境变量配置说明3.5 模拟数据3.5.1 使用说明3.5.1.1 将application.yml、gmall2020-mock-log-2021-10-10.jar、path.json、logback.xml上传到…

【C语言】经典编程题

文章目录1. Fibonacci数列 ⭐️2. 替换空格 &#x1f31f;3. 找单身狗 &#x1f4ab;4. 模拟实现 atoi ✨1. Fibonacci数列 ⭐️ 做题链接&#xff1a;Fibonacci数列 Fibonacci数列是这样定义的&#xff1a; F[0] 0 F[1] 1 for each i ≥ 2: F[i] F[i-1] F[i-2] 因此&…

[数据结构初阶]算法的时空复杂度

目录 算法效率 如何衡量一个算法的好坏 算法的复杂度 时间复杂度 时间复杂度的概念 大O的渐进表示法 常见时间复杂度计算举例 例一&#xff1a; 例二&#xff1a; 例三&#xff1a; 例四&#xff1a…

C规范编辑笔记(三)

继上篇我们的C规范编辑笔记(二)后&#xff0c;我们今天开始分享第三篇笔记&#xff0c;话不多说&#xff0c;我们开始~ 1、一个 tab 键盘等于四个空格键。我们在编程的时候最好使用空格键而不是使用 tab 键&#xff0c;当两个编译器的 tab 键设置的大小不一样的时候&#xff0…

无人机基础知识:多旋翼无人机自动控制原理与算法

无人机基础知识&#xff1a;多旋翼无人机自动控制原理与算法前言无人机自动控制器PID控制算法前言 无人机&#xff08;Unmanned Aerial Vehicle&#xff09;&#xff0c;指的是一种由动力驱动的、无线遥控或自主飞行、机上无人驾驶并可重复使用的飞行器&#xff0c;飞机通过机…

Linux:进程描述、进程创建(fork)、进程状态(僵尸进程、孤儿进程)

目录操作系统进程的基本概念进程创建&#xff08;fork)进程状态僵尸进程孤儿进程操作系统 操作系统是一个管理计算机软硬件资源的软件&#xff0c;它包括内核&#xff08;进程管理&#xff0c;内存管理&#xff0c;文件管理&#xff0c;驱动管理&#xff09;和其他程序&#x…

神经网络输出表达式,神经网络数据格式

1、BP神经网络输入输出格式问题 在你的代码基础上说了。 clc;clear; close all; pload(originaldata.txt);%你问题最后说的数据文件名跟这个不同。 p1p; t[1];% 这个输出&#xff08;Targets&#xff09;应该和输入数据对应&#xff0c;输入数据有10个&#xff0c;输出应该也是…

如何从0到1搭建一个个人网站

前言 如何从0到1搭建一个可以外网访问的项目&#xff1f; 我就用自己的服务器给大家举例&#xff0c;怎么从0到1搭建一个学生和新手可以用来面试的项目&#xff0c;老手也可以回忆一下自己逝去的青春。 服务器在激活的时候会让你选系统&#xff0c;这个时候敖丙我个人建议&a…

软考 | 计算机系统

CPU 计算机系统硬件组成 计算机系统是由软硬件共同组成&#xff0c;协同运行程序。计算机的基本硬件由 运算器、控制器、存储器、输入设备、输出设备 5 大部件组成。其中&#xff0c;运算器和控制器等部件集成到一起的部分称为中央处理器&#xff08;CPU&#xff09;。CPU 是…

离线数仓 (八) --------- 数仓分层

目录一、为什么要分层二、数据集市和数据仓库区别三、数仓命名规范1. 表命名2. 脚本命名3. 表字段类型一、为什么要分层 分层说明&#xff1a; ODS 层&#xff1a;原始数据层&#xff0c;存放原始数据&#xff0c;直接加载原始日志、数据&#xff0c;数据保持原貌不做处理。 …

【C++】命名空间输入输出缺省参数函数重载

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;什么是C&…

链路状态路由协议 OSPF (一)

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.OSPF的基本概念 1.什么是OSPF 2.OSPF路由协议概述 (1)内部…