HTML基础快速入门

最新推荐文章于 2024-09-25 23:18:47 发布
最新推荐文章于 2024-09-25 23:18:47 发布
阅读量195 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allllloo/article/details/107297067
版权

导航
在这里插入图片描述

本文适合新手快速入门,多数知识点都有案例

简介

  • HTML:全称Hyper Text Markup Language(超文本语言)
    • 超文本包括:文字,图片,音频,视频,动画等

为什么使用HTML5?

  • 世界知名浏览器商都支持
  • 市场的需求
  • 跨平台

W3C

  • World Wide Web Consortium(万维网联盟)

  • Web技术领域最权威和最具影响力的国际中立性技术标准机构

  • 官网

  • 中国官网

  • W3C标准

    • 结构化标准语言(HTML XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM ECMAScript)

基本结构

等成对出现的标签,分别叫开放标签和闭合标签

单独出现的标签(空元素),如

;意为用/来关闭空元素

自闭合标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHp7Bkzc-1594524716994)(C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\image-20200626143215263.png)]

<!--注释内容-->
<!--DOCTYPE:告诉浏览器我们要用的哪种规范-->

<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签,它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords",content="狂神说Java">
    <meta name="description",content="来这个地方可以学Java">


    <title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello,World!
Welcome to HTML World!
</body>

</html>

网页基本标签

<body>
Hello,World!
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级</h2>

<!-- 段落标签-->
<p>床前明月光</p>

<!--水平分割线标签-->
<hr/>

<!--换行标签-->
我要上天</br>
我要当宇航员<br/>
<!--无序列表标签-->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<!-- 字体样式标签-->
粗体:<strong>I Love you!</strong>
斜体:<em>I Love you,too</em>
<hr/>

<!--特殊符号标签-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于&gt;<br/>
小于&lt;<br/>
版权符号&copy;佟<br/>
</body>

图像标签

<body>
<!--

    src:图片地址(必填)
        相对地址(推荐使用)  绝对地址
    ../     表示返回上一级目录
    alt:    如果图片未显示,出现的字
    title:  鼠标悬停时出现的字
-->
<img src="../resources/img/1.jpg" alt="背影" title="背景图片" height="300" width="580">

</body>

超链接标签

<body>

<!-- a标签:
        href(必填):表示跳转的页面
        target: 表示窗口打开的地方
               _blank 新窗口打开     _self 在原窗口打开
-->
    <!--使用name作为标记(锚链接)-->
<a name="top">顶部</a>&nbsp;&nbsp;&nbsp;
<a href="#down">回到底部</a>
<br/>
<br/>
<a href="图像标签.html" target="_blank"><strong>点击我跳转到图像标签</strong></a>
<a href="https://www.baidu.com" target="_self"><strong>点击我跳转到百度</strong></a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
格式: #标记的名字
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<a href="我的第一个HTML.html#top">点击我切换</a>
<hr/>
<!--邮件链接
    mailto:
-->
<a href="mailto:1814489634@qq.com">点击联系我</a>
<!--qq推广链接-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1521564395&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1521564395:41" alt="你好请联系我" title="你好请联系我"/></a>

</body>

# 行内元素和块元素
  • 块元素
    • 无论内容多少,该元素独占一行(p , h1~~h6)
  • 行内元素
    • 内容撑开宽度,左右都是行内元素的可以排在一行(a strong em)

列表

<!--有序列表(ol)
    应用范围:试卷,问答....
-->

<!--无序列表(ul)
    应用范围: 导航,侧边栏....
-->

<!--自定义列表(dl)
    dl:标签
    dt:列表标题
    dd:列表内容

    应用范围:网站底部的导航
-->

表格

特点:简单通用 结构稳定

基本结构:

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!--表格 table
	border 单元格格式
	tr:行
	td:列
	colspan:跨行
	rowspan:跨列
-->
<table border="1px">
    <tr>
        <td colspan="4">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>

    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

视频和音频

<!--音频和视频
        src:路径
        controls:控制条
        autoplay:自动播放
    -->
    <video src="../resources/video/aaa.MP4"controls autoplay></video>

    <audio src="../resources/audio/a1.mp3"controls autoplay></audio>

内联框架

<!--iframe:内联框架
    src:地址
    w-h:宽度高度
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="800px" height="500px"></iframe>

<a href="我的第一个HTML.html" target="hello">点击他跳转</a>

表单

<!--form表示表单
    action:数据传输的地址
    method:post,get 传输方式
        post:比较安全,常用于传输大文件  get:可以在url中看到提交的信息,不安全,高效
-->
<form action="我的第一个HTML.html" method="get">

    <!--文本框输入:input type="text"
        密码框:input type="password"
        name:指定表单元素的名称
        value: 默认的初始值
        size: 文本框显示的长度
        maxlength: 最大填入长度
    -->
    <p>名字:<input type="text" name="username" value="默认初始值" size="10" maxlength="8"></p>
    <p>密码:<input type="password" name="password"></p>

    <p>
        <!--单选框标签:input type="radio"
        value: 单选框的值
        name: 表示所属的组
        -->
        <input type="radio" value="boy" name="gender">男
        <input type="radio" value="girl" name="gender">女
    </p>

    <!--多选框标签:checkbox
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="game" name="hobby">游戏

    </p>
    <!--submit:提交
        reset:重置
        button:按钮
        image:图片按钮    
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/img/1.jpg" width="500" height="500">
    </p>
    <p>
        
        <input type="submit">
        <input type="reset" value="清空按钮">
    </p>
    
</form>


    <!--下拉框/列表框
        selected:表示默认选项(按钮,单选多选都可用)
    -->
    <p>下拉框
        <select name="列表名称">
            <option value="选项">中国</option>
            <option value="选项">美国</option>
            <option value="选项">日本</option>
            <option value="选项" selected>瑞士</option>
            <option value="选项">雅典</option>
        </select>
    </p>


    <!--文本域:textarea
        cols:列
        rows:行
    -->
    <p>反馈
        <textarea name="textarea" cols="30" rows="10">
        文本内容
        </textarea>
    </p>
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

验证标签

<!--邮箱验证-->
    <p>邮箱<input type="email" name="email"></p>
    <!--URL验证-->
    <p>URL<input type="url" name="url"></p>
    <!--数字验证-->
    <p>数字<input type="number" name="num" max="100" min="0" step="3"></p>
    <!--滑块-->
    <p>滑块<input type="range" name="voice" max="1000" min="10"></p>
    <!--搜索框-->
    <p>搜索<input type="search"name="sousuo"></p>

表单的应用

  • 禁用: diabled

  • 只读: readonly

  • 隐藏域: hidden

  • 点击就转到某个框: label(与id连用)

表单初级验证

  • 提示信息: placeholder
  • 非空判断: required(只能用于输入框)
  • 正则表达式: pattern(使用时需要上网去查找)
    • https://www.jb51.net/tools/regexsc.htm
田野上的辉桑
关注
快速入门HTML和CSS
m0_54129816的博客
03-12 1840
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
Koa框架基础快速入门
01-27
**Koa框架基础快速入门** Koa框架是Node.js领域中的一个轻量级Web应用框架，由Express团队创建，旨在提供更加简洁、高效且强大的功能。Koa的主要目标是通过使用ES6的Generator特性（在较新版本的Node.js中为async/...
快速掌握HTML基础||简洁明了
qq_37387886的博客
11-11 171
HTML （HyperText Markup Language 超文本标签语言） 一般来说，写HTML的就Dreamweaver和sublime text ---------------------------------------------------------------------------- <html></html> 定义 HTML 文档，全部...
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Kafaka基础快速入门
长安不及十里的博客
10-29 2万+
Kafaka基本入门 文章目录Kafaka基本入门一 基本认识1.1 消息中间件（消息队列）1.2 常用消息中间件1.3 通信协议1.4 基本术语二 kafaka的基本介绍2.1 概述2.2 消息系统介绍2.3 点对点消息传递模式2.4 发布-订阅消息传递模式三 Kafka中的术语解释3.1 概述3.2 broker3.3 Topic3.4 Partition3.5 Producer3.6 Consumer3.7 Consumer Group3.8 Leader3.9 Follower四 Kafaka的安装
HTML入门（详细）
qq_63525426的博客
05-03 3万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML基础入门（详细）
weixin_51143430的博客
08-28 3802
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
前端零基础快速入门html
web前端学习
05-20 722
前端零基础快速入门html
adb命令零基础快速入门
sylnhgj的博客
12-11 4855
一、adb基础 1.什么是adb？ adb全称为Android Debug Bridge，就是起到调试桥的作用。顾名思义，adb就是一个debug工具。 2.adb工作原理 不是很理解？那就来看看它的工作原理吧。 上图是一个简单的adb工作原理图。adb客户端服务器端程序，由上图可以看出它主要三个组件组成：Client，Server，Daemon。 （1）当你启动一个adb Client（客户端），Client首先会选确认是否已有一个adb Server（服务器）进程在运行，如果没有，.
【HTML】零基础入门教程
qq_52719660的博客
10-20 5226
一、HTML简介 HTML是英文Hyper Text Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。超文本：超文本文件就是指具有超链接功能的文件。 二、建立HTML文件 1.页面基本结构 打开vscode，新建后缀名为.html的文件，搭建页面基本结构的快捷键：①英文感叹号＋回车，②html:5+回车 。
HTML详解（基础快速入门版）
03-20
适用人群：初学HTML，想要了解如何创建表格、超链接以及表单的爱好者们
php快速入门
01-08
### PHP快速入门知识点详解 #### 一、PHP简介与安装配置 - **PHP定义**：PHP（Hypertext Preprocessor）是一种广泛使用的开源通用脚本语言，尤其适用于Web开发并可嵌入HTML中。语法吸收了C语言、Java以及Perl的特点...
PHP快速入门
06-27
《PHP快速入门：基于ThinkPHP框架的数据库操作详解》 在Web开发领域，PHP作为一种流行的服务器端脚本语言，以其简单易学、功能强大的特点深受开发者喜爱。而ThinkPHP作为一个国内广泛使用的PHP框架，更是为PHP开发...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
1. HTML基础知识：了解HTML的基本结构，如何创建元素，以及如何组织网页内容。 2. HTML5新特性：掌握新的HTML5元素，以及如何利用它们来增强网页的功能和用户体验。 3. CSS样式规则：学习选择器、属性和值，学会控制...
2024 IDEA软件 部署tomcat 十二步 运行web页面（html类似的）（中英文对照版本）新手小白易上手
m0_47484034的博客
09-25 722
2024 IDEA软件 部署tomcat 运行web页面（html类似的）（中英文对照版本）新手小白易上手
html TAB、table生成
TrueLink的博客
09-24 929
表格的列标题（th）使用了大写的属性名（Num1、Num2等），而数据项（item）的键是小写的（num1、num2等）。动态生成选项卡头部：遍历data.datasets数组，为每个数据集创建一个按钮（button），按钮的文本内容包含选项卡的编号和数据集的名称。默认显示第一个选项卡的内容：通过检查索引（index），如果它是第一个数据集（index === 0），则给对应的.tab-content元素添加.active类，使其内容被显示。：这个div用于存放动态生成的选项卡内容（即表格）。
xpath的基本使用，精准定位html中的元素
最新发布
mecende的博客
09-25 748
从根节点开始选取 /html/div/span// 从任意节点开始选取 //input. 选取当前节点.. 选取当前节点的父节点 //input/.. 会选取 input 的父节点。
【CSS】盒子模型
千里之行，始于足下
09-23 975
盒子模型：宽度，高度，内边距，外边距，边框，圆角，阴影，溢出，浮动，外边距合并问题，子元素外边距传递塌陷问题，浮动塌陷问题
HTML基础教程：快速入门网页编程
"本资源是一份关于HTML基础的教程，旨在教授初学者如何进行网页编程。教程涵盖了HTML的基本标记、文档结构以及简单的文本处理方法，包括如何创建HTML文档、设置网页标题、创建网页实体以及如何分段和换行。" 在网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值