HTML简介

已于 2022-08-07 17:22:14 修改
阅读量75 收藏
点赞数
文章标签： html 前端
于 2022-08-07 17:22:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71677887/article/details/126214015
版权

附：xmind

web标准

是由w3c组织统一规定的标准，分为3个部分，结构structure、样式presentation、行为behavior,分别对应的是html、css和js.

标签分类

书写页面时，无非考虑的怎么实现文字、图片、视频、音频等的渲染问题，所以基本的标签就可以帮助实现页面的初步构建。先生成骨架标签、在主体内容中用排版、文本格式化、图片、音频视频等标签对相应内容处理排布即可。

骨架标签

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体内容
    </body>
</html>

排版标签

<h1>
    一级标题，标题标签；h1-h6；
    特点：h1-h6字体逐步减小，加粗
</h1>
​
​
<p>
    段落标签;上下有间距
</p>
​
<br> 换行标签
<hr> 水平线标签

文本格式化标签

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

  • 主要用第一组，第二组的b,i,u可以看做是word里的b,i,u

图片标签

<img src="图片地址" alt="替换文本" title="提示文本">

音频标签与视频标签

<audio src="音频地址" controls loop autoplay></audio>
<video src="视频地址" controls loop autoplay muted></video>
注：controls播放控件，loop循环播放，autoplay自动播放，视频标签中常搭配muted自动静音播放
谷歌浏览器中autoplay基于隐私性并不会实现自动播放

  • 事实上基本不用，因为做音频、视频软件的内容基本都有版权等的问题

超链接

<a href="跳转链接地址">绑定的内容，文字、图片等</a>
<a href="#"></a>  
#空链接，作用1 类似于占位符，不跳转；作用2跳转到页面顶部

路径

绝对路径(了解即可)

从盘符开始，或者从网页以http://开头

相对路径

上级路径：  ../
同级和下级路径：  ./

  • 路径的作用在于寻找相应的对应的文件

列表

  • 应用场景：按行展示关联性内容，如新闻列表、排行榜等。

无序列表ul

<ul>
    <li>特别注意：li标签内部可以放任何内容，包括文字、图片、链接、标签等等所有元素</li>
    <li></li>
</ul>

  • ul 表示无序列表整体，包裹标签

  • li表示无序列表的每一项，用于包含每一行的内容

  • 显示特点：每一项前默认有黑色小圆点

  • ul中只能包含li标签，li中可以放任何元素

有序列表ol

<ol>
    <li></li>
    <li></li>
</ol>

  • 显示特点：列表的每一项之前默认显示序号

    正在上传…重新上传取消

  • 内容放置同ul>li

自定义列表dl

<dl>
    <dt>标题</dt>
    <dd>标题的解释描述</dd>
    <dd>标题的解释描述</dd>
</dl>

  • 应用：网页底部导航

  • 显示特点：dd前会有默认缩进效果

    正在上传…重新上传取消

  • dl中只能包含dt dd

  • dt/dd 可以包含任意内容

表格table

  • 应用：给后台直观展示数据

基本结构

<table border="1" width="400" height="600">
    <caption><h2>大标题，会自动加粗居中，在头部</h2></caption>
    <thead>//表格头部
      <tr>//行
        <th>表头</th>
        <th></th>
      </tr>
    </thead>
    <tbody>//表格主体
      <tr>
        <td>普通单元格</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
    <tfoot>
        表格底部
    </tfoot>
</table>

  • 事实上thead tbody tfoot浏览器解析时会自动生成；所以直接tr>td即可

合并单元格操作

  • 跨行rowspan

  • 跨列colspan

  • 左上原则：保留左、上第一个单元格书写代码，被合并的删除即可

注意：不可跨结构thead tbody等合并

表单form

用于收集数据

input基本系列

<form action="index.php">
    <!-- 文本框 -->
    用户名： <input type="text" placeholder="用户名/密码/邮箱"> <br>
    
    //密码框
    密码：<input type="password" placeholder="密码"> <br>
    
    //单选按钮
    性别：<input type="radio" name="gender" id="">男
    <input type="radio" name="gender" id="" checked>女
    <br>
    
    //复选框
    爱好：<input type="checkbox">喝酒 <input type="checkbox" name="" id="" checked>烫头 <input type="checkbox" name="" id="">抽烟
    <br> 
    
    //文件上传
    图片：<input type="file" name="" id="" multiple>
    <br>
    
    //用的不多，多用button
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
  </form>

  • radio实现单选效果：有相同的name值，常搭配label标签绑定内容扩大选定区域

  • file 文件上传 加multiple属性进行多选文件

  • name属性给表单元素唯一标识，提交给后台的形式：name的值=value的值，value没写就是用户输入的值，配合form的action提交地址和submit使用。

button按钮系列

<form action="index.php">
    <button type="submit">登录</button>
    <button type="reset">重置</button>
    <button type="button">发送验证码</button>
    <button>提交</button>
  </form>

  • button属性不写type值，则谷歌浏览器默认是submit

文本域

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

下拉列表select

<select>
    <option >北京</option>
    <option >上海</option>
    <option >武汉</option>
    <option  selected>深圳</option>
​
  </select>

label标签

为input表单元素和文本等内容建立绑定关系：

  • label直接包裹两者

  • label包裹文本等内容，给for属性，input表单元素给id属性 两者属性值一致

语义化标签

无语义

  • div 独占一行

  • span 一行可放多个

    <div>
    
</div>
<span></span>

语义化标签

<header>网页头部</header>
<nav>网页导航</nav>
<section>网页区块</section>
<article>网页文章</article>
<aside>网页侧边栏</aside>
<footer>网页底部</footer>

字符实体

&nbsp;空格
&lt;小于号
&gt;大于号

老罗专注摸鱼
关注
HTML简介（网页的基本组成，什么是HTML，Web标准的三大组成部分），HTML标签（HTML语法规范，标签关系），HTML结构标签（第一个HTML）
shy的博客
02-22 4018
网页的基本组成 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件 什么是HTML HTML是一种超文本标记语言，是一种用来描述网页的一种语言 HTML不是编程语言，而是标记语言，是一套标记标签 超文本: 可以加入声音，视频，动画，多媒体等（超越了文本限制） 可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本） Web标准的三大组成部分 主要包括结构、表现、行为 三个方
html+css基础教程之html简介和元素
html前端基础入门教程
03-01 3704
HTML 简介 什么是 HTML？ HTML即超文本标记语言 (Hyper Text Markup Language)， 是用来描述网页的一种语言。 超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 如下代...
HTML是什么？HTML简介
ccc369639963的博客
01-22 1万+
HTML是什么？HTML简介 HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。 使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。 每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL）
html简介
weixin_45706854的博客
12-03 2881
1、html的简介 什么是html？ - HyperText Markup Language：超文本标记语言，网页语言 ** 超文本：超出文本的范畴，使用html可以轻松实现这样操作 ** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称> ** 网页语言： * 第一个html程序。 - 创建java文件.java ** 先编译，然后再运行（jvm） - html后缀是 .html .htm ** 直接通过浏览器就可以运行 - 代码 ** 这是我
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
热门推荐
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
12-16 9万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
HTML简介及基本结构
h_h33的博客
11-09 9628
一:HTML的定义 二：编码格式 三：html文件的基本结构 四:html设计原则
前端第二章：1.HTML简介、Linux 命令行打开 .html 文件、常用标签（一）
励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！
04-25 6295
一、HTML 简介 1.HTML 是 超文本标记语言（Hypertext Markup Language） 2.负责 网页三要素 中的 结构 3.使用标签的形式 识别 网页中不同的组成部分 4.超文本 指的是 超链接，使用超链接能够让我们从一个界面跳转到另一个界面 二、Linux 命令行打开 .html 文件 1.命令： 浏览器名 文件名.html & 1.1 示例： 三、常用标签（一） 1.告诉浏览器 哪些内容 是 哪些内容 2.标签的语法： <标签名> 标签体 </标签
HTML5简介
qq_39660309的博客
12-24 9673
HTML5简介 HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能标记能表示不同的效果。 1.1 HTML到HTML5 虽然W3C努力为HTML制定规范，但由于绝大部分编写HTML页面的人并没有受过专业训练，他们对于HTML规范、XHTML规范也不甚了解，所以他们制作的HTML网页绝大部分都没有遵守HTML规范。 现有的HTML页面大量存在如下4...
HTML详解（1.html简介）
qq_43623447的博客
01-16 1万+
文章目录 HTML（HyperText Mark-up Language）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图 形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的 具体内容。 HTML语言被...
学生个人简介html网页
11-17
这个"学生个人简介html网页"项目是一个非常适合初学者学习的实例，它可以帮助理解HTML和CSS的基本概念以及如何结合使用它们来构建网页。 首先，HTML负责网页的内容结构。在个人简介网页中，HTML标签会用来定义不同...
HTML5快速入门（一）—— HTML简介
黑森林工作室
06-08 1万+
前言：1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我 2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时
html中src/href区别
hexadecimal_001的博客
10-05 525
在HTML中，src和href是两个常见的属性，它们用于指定资源的位置，但用途和上下文有所不同。
React 插入不转义的html
y523648的博客
10-08 225
在 React 中，字符串作为内容插入到 JSX 中，默认会被转义。这是为了防止 执行恶意代码，XSS（跨站脚本攻击）等安全问题。如果想要 HTML 不被转义，可以使用dangerouslySetInnerHTML属性。
HTML图形
最新发布
大河之犬的博客
10-08 638
它的主要特点是可缩放，图像在不同分辨率下不会失真，适合在网页上呈现高质量的图形和图表。SVG 支持图形元素（如路径、矩形、圆形、文本等）、样式、交互（如点击事件）和动画，广泛用于网页开发、数据可视化、图标等场景。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。// 参数 (0, 0) 表示矩形的左上角起始位置在画布的左上角（即坐标 (0, 0)）Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。// 150 是矩形的宽度，75 是矩形的高度。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 1080
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
好玩的水表电表
lulei5153的博客
10-01 2019
【代码】好玩的水表电表。
QD1-P1 HTML、CSS与JS三者之间的关系
qq_38641599的博客
10-08 264
视频 P1B/S架构Browser 浏览器Server 服务器学习动力做网站->做分享知识的网站->做有趣的分享知识的网站。HTML定义了网站的结构和内容它使用标签（如<div>​、<p>​、<img>​ 等）来组织文本、图像、链接等页面元素。​​CSS设置网页的样式和布局，它定义了字体、颜色、边距、高度、宽度等视觉效果。就像是网页的皮肤（同游戏角色皮肤一样），负责美化页面，让页面看起来更加美观和用户友好。​​JS用于实现网页的交互效果。
HTML ASCII：Web 开发中的字符编码基础
wjs2024的博客
10-05 561
ASCII，全称为美国信息交换标准代码（American Standard Code for Information Interchange），是一种用于电子通信的字符编码标准。它最初于1963年提出，用于在不同的计算机系统之间传输文本数据。ASCII码使用7位二进制数来表示128个不同的字符，包括大小写字母、数字、标点符号和控制字符。在HTML（超文本标记语言）中，ASCII编码扮演着重要的角色，因为它为网页内容的显示提供了基础。
JavaScript基础：运算符与HTML简介
HTML的发展历程中，经历了多个版本，由IETF（互联网工程任务组）和W3C（万维网联盟）制定和维护，包括HTML 1.0、2.0、4.0，以及后来的XHTML、DHTML和HTML/CSS/JavaScript的集成应用。 尽管不同浏览器可能对某些旧...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值