HTML

最新推荐文章于 2021-08-09 22:26:02 发布
最新推荐文章于 2021-08-09 22:26:02 发布
阅读量141 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duanduan339/article/details/96437545
版权

HTML

一、HTML简介

  1. 什么是HTML

HTML：HyperText Markup Language，超文本标记语言。

  1. HTML的作用

用来编写网页的

  1. HTML的语法

    page title

    Hello, world!!!

  • HTML文件后缀名是：.html 或者 .htm
  • HTML由一堆标签组成：
    • 标签：<关键字></关键字>
    • 标签可以嵌套
    • html是根标签
  • 开始标签上可以增加属性
  • HTML不区分大小写
  • HTML不需要编译，可以使用浏览器直接打开
  1. 使用idea开发网页

二、HTML标签

  1. 文字排版

1.1 标题标签: h1~h6

  • 特点：

    • 文字加粗

    • 内置字号：h1最大，h6最小

    • 独占一行

      世界

      世界

1.2 横线标签：hr（重点）

  • 自闭合标签
  • 常用属性有：

    • color：横线的颜色

    • size：横线的粗细

    • width：横线的长短

    • align：横线的水平位置。left/center/right

1.3 段落标签：p

  • 特点：
    • 段落之间有空白 的间隔
    • 一个段落一个p标签，多个段落多个p标签

1.4 换行标签：br（重点）

  • 自闭合标签
  • 特点：
    • 换行后，行之间没有空白间隔

1.5 文字标签：font

  • 常用属性：
    • color：文字的颜色
    • size：文字的大小，最小1，最大7，默认3
    • face：文字的字体

1.6 粗体字标签：b

1.7 斜体字标签：i

  1. 图片显示

2.1 图片标签：img（重点）

  • 常用属性：
    • src：图片的路径。必须有
    • width：图片显示的宽度。
    • height：图片显示的高度
    • title：鼠标悬浮提示
    • alt：图片加载不出来时，给的文字提示信息
  • 注意：

    • 图片只有width或者只有height时，会等比例缩放显示；如果有width和height都有，图片可能会变形

      这是个沙滩美女
  1. 清单和超链接

3.1 清单标签

3.1.1 无序清单：ul + li

  • ul：清单本身，必须要配合子标签li使用
    • type属性：每个清单项前边的符号类型。常用值有：
      • disc：小圆点，默认值
      • circle：小圆圈
      • square：小方块
  • li：清单项。一个清单项，就要有一个li标签

3.1.2 有序清单：ol + li

  • ol：清单本身，必须要配合子标签li使用
    • type属性：每个清单项前边的序号类型
      • A/a：大小字母/小字字母的序号
      • I/i： 大写罗马数字/小写罗马数字 的序号
      • 1： 数字序号
  • li：清单项。一个清单项，就要有一个li标签

3.2 超链接标签：a （重点）

  • 常用属性：
    • href：跳转到哪
    • target：在哪显示新页面
      • _self：在当前窗口显示
      • _blank：在新窗口显示
  1. 表格

4.1 表格的标签（重点）

  • table标签：表格本身
    • border：边框线。1：有边框；0：没有边框
    • width：表格的宽度
    • bgcolor：表格的背景颜色
    • cellspacing：表格里单元格之间的间隔
    • align：表格整体的水平位置
  • tr标签：行标签（table的子标签）
    • align：行里内容的水平位置
  • td标签：单元格标签（tr的子标签）
    • align：单元格里内容的水平位置
  • th标签：表头单元格标签。用法和td完全一样，仅仅是自带样式：加粗并居中
  • caption：标题标签（table的子标签）。通常是在第1个tr之前

4.2 合并单元格

  1. 确定是跨行还是跨列

    • 跨行用 rowspan
    • 跨列用 colspan

  2. 确定属性加在哪个单元格上

    • 加在要合并的单元格，第1个单元格上

  3. 确定属性值是几：

    • 要合并几个单元格，值就是几

  4. 删除被合并掉的单元格

  5. 其它标签

5.1 文档声明

<!DOCTYPE html>

注意：文档声明要写在HTML的最前边

5.2 head标签

5.3 HTML的实体字符

三、其它

  1. 颜色的写法
  • 颜色的名称：red, blue, green, yellow
  • 十六进制的色码：# 后边跟6位十六进制数字，比如：#ffffff
    • 6位数字完全相同，可以简写成3位：#666666，简写成：#666
  1. 尺寸的写法
  • 固定像素：500px
  • 百分比写法：50%
    • 注意：是占父窗口的百分比
  1. 路径的写法
  • 相对路径：
    • …/开头的，表示从上级目录里找
    • ./开头的，表示从当前目录里找。./可以省略不写
  • 绝对路径：
DuanD多吃点
关注
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML自闭合(self-closing)标签
热门推荐
云淡风轻
03-07 2万+
<meta>标签:设置页面元信息的 <base>:设置网页所有链接的相对目录(如根目录)的 <br>:换行 <hr>:水平线 <img>:图像 <input>:表单元素 <col>:在表格table中定义一个或多个列的属性 <frame>:定义框架的一个窗口（已遗弃） <link>:定义文档与外部资源的关系的链接 <area>: 标签定义图像映射内部的区域（图像映射指的是带有可点击
自闭合标签
atu1111的博客
08-09 2966
自闭合标签 1. 一般标签   由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。 <p>“绿叶，给你初恋般的感觉。”</p> 2. 自闭合标签   由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。   在HTML中，常见的自闭合标签如下表所示 项目 Value <meta /> 定义网页的信息（供搜索引擎查看） <link /&
4.8 自闭合标签
mmsx2017的博客
03-08 1996
一、什么叫自闭合标签？ &nbsp;&nbsp;（1）一般标签由于有开始符号和结束符号，可以在标签内部插入其他标签或文字； &nbsp;&nbsp;（2）自闭合标签由于没有结束符号，没办法在内部插入其他标签或文字，只能定义自身的一些属性。 二、常见的自闭合标签 1、&lt; meta/&gt; 定义页面的说明信息，供搜索引擎查看。 2、&lt; link/&gt; 用于连接外部的CS...
html5入门(j简单了解html)
weixin_34216107的博客
03-19 91
前言：作为一个程序小白，刚刚接触编程没多久，正在努力学习中， 我也会把自己的学习经历和一些学到的知识分享给大家供大家交流 希望大家共同进步~ 正文 <!--文档类型声明：告诉浏览器当前页面使用的语法标准,方便浏览器按照声明的标准去渲染你的页面--> <!DOCTYPE html> <!--html文档的开始--> <html lang=...
php 闭合标记,什么叫自闭合标签？自闭标签有什么用
weixin_39901332的博客
04-15 648
什么叫自闭合标签？自闭标签有什么用？相信很多刚刚入门的html还不知道自闭合标签？下面 第一PHP社区 为您总结一下自闭标签。一：什么叫自闭合标签所谓闭合标签就是指标签有开始，和结束，目前在html当中，都是成对出现的，很多都是由开始和结束标签，但是也有一些是没有结束标签的，但是有些同学担心，标签没有闭合标签，会不会影响使用，其实有些标签是自闭和标签，例如，和就是自闭和标签，即使没有结束标签也是不...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
最新发布
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
HTML作业-仿网易云音乐项目
04-29
HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。在这个“HTML作业-仿网易云音乐项目”中，我们可以深入探讨HTML在构建交互式音乐应用中的运用。 首先，HTML是网页的基础，用于定义页面...
html网页做的动态爱心（超好看）
11-07
用html+css+JavaScript网页做的动态爱心，浪漫十足
html前端--外卖点餐模板
11-26
HTML前端技术在现代网页开发中占据着核心地位，尤其在构建外卖点餐模板时，它提供了丰富的功能和灵活的设计选项，让用户体验更加便捷和直观。本项目“html前端--外卖点餐模板”就是一个实例，展示了如何利用HTML来...
学生个人简介html网页
11-17
在IT领域，HTML（HyperText Markup Language）是用于创建网页的标准标记语言，是网页开发的基础。这个"学生个人简介html网页"项目是一个非常适合初学者学习的实例，它可以帮助理解HTML和CSS的基本概念以及如何结合...
html5自闭合标签有哪些,自闭合标签与伪元素
weixin_39958112的博客
06-21 883
自闭合标签由包围，不包含任何元素内容。在XHTML标准中，自闭合标签还需要在结尾的标记处加上/表示结束，这模仿了XML中的自闭合标签，后来到HTML5标准里舍弃了这一没有意义的规定。在HTML5中，不同类型的标签自闭合会有不同的解析方式：规范中被设计成空标签的标签，如input，img等，会被解析成自闭合的标签，用这类标签时，即使用一个结束标签来形成闭合标签，后面的结束标签也会被忽略掉，例如，到浏...
HTML5自闭合（self-closing）标签汇总、以及末尾的斜杠问题的官方说明
时间飞逝的博客
06-20 9730
HTML5规范声明： 在HTML5的规范中，自闭合标签不需要加斜杠，但是兼容加斜杠的写法； XHTML严格要求自闭合标签中必须加斜杠； 自闭标签及其官方说明： <br> 插入一个简单的换行符，标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。 <hr> 创建一条水平线，在HTML中，<hr> 没有结束标...
网页设计期末大作业+html+css
05-25
适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品...
HTML播放海康视频的RTSP视频流
07-04
HTML播放海康视频的RTSP视频流是一种在网页上实现监控视频实时播放的技术。RTSP（Real Time Streaming Protocol）是一种应用层协议，用于控制多媒体数据的传输，常用于IP摄像机、视频服务器等设备的视频流媒体服务。...
HTML圣诞树代码分享
"圣诞节快乐的圣诞树.txt" 是一个HTML文件，内容是一个简单的圣诞树页面。这个页面在圣诞节时可以用来展示和分享，通过更改文件扩展名为.html即可在浏览器中打开。 该HTML代码中，主要包含以下几个关键知识点： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值