HTML基础

最新推荐文章于 2024-10-11 13:58:34 发布
最新推荐文章于 2024-10-11 13:58:34 发布
阅读量232 收藏
点赞数 3
分类专栏： HTML 文章标签： html 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45162683/article/details/112902656
版权
本文详细介绍了HTML5的基本概念，包括如何创建第一个HTML网页，使用meta标签进行SEO优化，以及常见的HTML标签如标题、段落、换行、水平线、字体样式、图像、链接、锚点、功能性链接、行内元素和块级元素、列表、媒体元素、页面结构和表单提交。此外，还涵盖了表单元素的各种类型和验证方法。
摘要由CSDN通过智能技术生成

什么是HTML

  • HTML

    • Hyper Text Markup Language(超文本标记语言)

    • 目前我们最新的HTML已经到了第五代 也就是我们最常说的 H5

第一个HTML网页

<!-- DOCTYPE:告诉浏览器,我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- 注释的快捷键 ctrl+/ -->
<!-- head 标签代表网页的头部-->
<head>
<!-- meta 描述标签，它用来描述我们网站的一些信息-->
<!-- meta 标签 一般来做SEO-->
<!--  SEO一般有两个需要做：一个是站内优化，另一个是站外优化，这样效果才能更好！
站内优化：关键字优化，内容优化，标签优化，标题标签优化，关键字和原始文章增加，这对SEO来说是十分必要的。
站外优化：要做友联，外链的添加，针对站点里边的产品，服务，特征等进行优化操作。-->
    <meta charset="UTF-8">
    <meta name="keywords" content="开始学习HTML了">
    <meta name="description" content="跟上我打一个HTML网页">
<!-- title 标签代表网页的标题-->
    <title>我的第一个网页</title>
</head>
<!--body 标签代表网页的主体 -->
<body>
我的第一个html网页
</body>
</html>

想要查看meta标签里面的内容

  • 打开浏览器 右击 查看网页源代码就会出现

网页的基本标签

标题标签

<h1>一级目录</h1>    h1到 h6

段落标签

<p></p>   段落标签  段落标签属于块级元素 块级元素独占一行所以 每一组p标签结束后会自动换行

换行标签

<br/>    换行标签   在文章想换行的时候 加上<br/>

水平线标签

</hr>   水平标签 有一条分割的直线

字体样式标签

粗体 ：<strong> 这个是粗体的文字</strong>
斜体 : 这个字体是斜体  <em><这个字体是斜体/em>

注释和特殊符号

注释 ：<!---->
空格 ： &nbsp；
大于号 : &gt;
小于号 ：&lt;
版权所有符号 ：&copy;
所有的特殊符号都是 &开头 ;结尾

图像标签

<!-- img的学习
 src ：图片的地址 这个必须填
     src 里面可以填相对路径和绝对路径
     相对路径就是 在本项目目录下的路径  推荐使用相对路径
     绝对路径是 图片处于计算机中的路径 这样就会把图片写死 不推荐
    ../  返回上级目录
 alt： alt 是如果图片不能正常显示的话 图片就会出现alt里面的内容。
title: 悬停文字  鼠标放在图片上 就会显示出文字
-->

案例：

<img src="../img/1.jpg" alt="图片">

链接标签

<!-- a 标签
href： 必填 表示要跳转到那个页面
target: 表示窗口在哪里打开
  _blank 在新标签中打开
  _self 在自己网页中打开

-->

<a href="https:www.baidu.com" target="_self">我要跳转到百度</a>

a标签中间不光可以有文字 还可以有图片  可以点击图片进行跳转

<a href="https:www.baidu.com"><img src="../img/1.jpg" alt="图片"></a>

锚链接

  • 使用锚链接需要一个锚标签
  • 跳转到标记处
  • 锚链接不光可以在本页面进行跳转 还可以跨页面进行跳转
<a name="#ccc">顶部</a>
正文
<a herf="#ccc">点击返回顶部</a>

功能性链接

邮件链接：mailto

<a href="mailto:XXXXXXXXXXXX@qq.com">点击联系我的邮箱</a>

qq推广 :

  • 百度搜索qq推广，并找到官网
  • 登录qq 点击 推广工具
  • 输入你的内容 并且 复制到你的网页中
  • 就可以使用了
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=408750259&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:408750259:53" alt="发消息" title="发消息"/></a>

行内元素和块级元素

块元素

- 无论内容多少 该元素独占一行
- <p></p>   <h1-h6></h1-h6>

行内元素

- 内容撑开宽度，左右都是行内元素的可以排在一排
-  a   strong   em  ....

列表标签

<!--有序标签
 适用范围 ： 试卷 问道
 -->
<ol>
    <li>Java</li>
    <li>C#</li>
    <li>Python</li>
    <li>C</li>
    <li>HTML</li>
    <li>JS</li>
</ol>

<!--无序列表
适用范围： 导航  侧边栏
-->
<l>
    <li>Java</li>
    <li>C#</li>
    <li>Python</li>
    <li>C</li>
    <li>HTML</li>
    <li>JS</li>

</l>

<!--自定义列表
适用范围：公司网站底部
dl：标签
dt：列表名称
dd：列表内容

-->
<dl>
    <dt>个人资料：</dt>

    <dd>姓名</dd>
    <dd>年龄</dd>
    <dd>性别</dd>
    <dd>地址</dd>

    <dt>购物平台：</dt>

    <dd>淘宝</dd>
    <dd>拼多多</dd>
    <dd>京东</dd>
    <dd>小米商城</dd>

</dl>

媒体元素（音频和视频）

<!-- 音频和视频
src :资源路径
controls : 控制条
autoplay : 自动播放
-->
<!--<video src="./resource/video/元旦视频.mp4" controls autoplay></video>-->
y
<audio src="./resource/audio/5e8c684ec85e0.mp3" controls autoplay></audio>

页面结构分析

在这里插入图片描述

<header>
    <h2>网页头部 </h2>
</header>

<section>
    <h2>网页主体 </h2>
</section>
<footer>
    <h2>网页尾部 </h2>
</footer>

内联框架

<!--iframe 内联框架
src : 跳转的地址
name : 框架的名称
-->
<iframe src="" name="bk" frameborder="0" width="1000px" height="1000px">

</iframe>

<a href="列表.html" target="bk">点击跳转</a>

表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form表单提交</title>
</head>
<body>


<h1>注册</h1>
<!-- form 表单提交
action : 表单提交的位置  可以是网站,也可以是请求处理的地址
method: 提交的方式有两种
   1.post  这个相对来说比较安全  传输大文件
   2.get 我们可以在url里面看见我们提交的信息  不安全  但是高效
-->
<form action="列表.html" method="post">
<!-- type 标签里 还可以有其他属性
 maxlength : 这个表示这个文本框里面最大可以输入几个字符
 value: 网页刚打开时 文本框的默认的值

 -->
    <p>姓名 <input type="text" name="username"  value="XXX" readonly placeholder="请输入用户名"> </p>
    <p>密码 <input type="password" name="pwd" value="123456" required></p>

<!-- 单选按钮 标签
  type="radio"
  value :单选框的值
  name:表示组
-->
    <p>性别:
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女" disabled>女

    </p>

<!-- 多选框标签
  type="checkbox"
-->
  <p> 爱好:
      <input type="checkbox" name="hobby" value="sleep">睡觉
      <input type="checkbox" name="hobby" value="code" checked>敲代码
      <input type="checkbox" name="hobby" value="play">玩
      <input type="checkbox" name="hobby" value="eat">吃好吃的
  </p>

<!--    按钮
type="button"  普通按钮
type="image" 图片按钮
type="submit" 提交按钮
 type="reset"  重置按钮
-->
    <p>
      <input type="button" value="点我">
<!--      <input type="image" src="./resource/img/53.jpg">-->
    </p>

    <p>选择国家：
<!--下拉列表

 -->
        <select name="gj">
             <option value="china">中国</option>
             <option value="USA">美国</option>
             <option value="deguo" selected >德国</option>
             <option value="yidali">意大利</option>
        </select>
    </p>

<!--文本域-->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10"> </textarea>
    </p>

<!--    上传文件-->
    <p>
        <input type="file" name="wj">
        <input type="button" value="上传">
    </p>
<!-- 简单的验证email  必须包含@ 和 . 但是 这个验证不严谨-->
    <p>邮箱：
        <input type="email" name="email">

    </p>
<!-- url 这个判断是不是一个网址-->
    <p>url:
        <input type="url" name="url">

    </p>
<!--  number
   判断里面是否是数字
    max="100":  这个标签里面 最大输入100
    min="10"   这个标签里面 最小输入10
    step="20"   这个标签里 的数字 每次+20
-->
    <p>number:
        <input type="number" name="number" max="100" min="10" step="20">
    </p>

<!-- 滑块
-->
    <p>调节音量
        <input type="range" name="voice" max="100" min="0" step="2">

    </p>
<!--  搜索框-->
    <p>搜索框:
        <input type="search" name="search">
    </p>

<!--  增强鼠标的可用性-->
  <p>
      <label for="mark">你点我试试</label>
      <input type="text" id="mark">

  </p>
    <p>正则表达式邮箱：
        <input type="type" name="email1" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">

    </p>

    <p><input type="submit">
        <input type="reset"></p>

</form>
</body>
</html>

初级表单验证

placeholder 提示信息
required  非空判断
pattern  正则表达式
全栈小李
关注
专栏目录
HTML基础模板
qq_61690596的博客
07-18 2118
HTML基本模板，每个基础元素的内容和作用
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4845
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
全网最全HTML基础
a1085653724的博客
04-20 5176
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础入门（详细）
weixin_51143430的博客
08-28 3820
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基础知识详解
qq_52262831的博客
12-23 4987
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML基础知识点大全
m0_69674158的博客
05-04 6953
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
HTML基础知识总结
ss810540895的博客
05-05 8776
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
HTML基础知识
m0_53161561的博客
03-23 4292
HTML基础知识HTML的概述及开发环境1.1.1 HTML的概述1.1.2 HTML的历史版本1.1.3 网页组成1.1.4 开发环境HTML标签组织页面内容2.1.1 HTML标签名称与属性 HTML的概述及开发环境 1.1.1 HTML的概述 HTML是超文本标记语言，英语名称为HyperText Markup Language，它是一种用于创建网页的标准标记语言。 可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 超文本标记语言是标准通用标记语言
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
Lucky的博客
04-16 8754
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
HTML基础练习题
热门推荐
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础（新手入门教程）
华夏天骄
05-17 5166
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
前端开发笔记--html 黑马程序员2
m0_73805171的博客
10-08 253
路径分为绝对路径和相对路径。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1322
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
【写个本地的html】写个本地的html文件，做个demo，直接用浏览器打开
weixin_41747256的博客
10-10 234
【写个本地的html】写个本地的html文件，做个demo，直接用浏览器打开
《常见 HTML 标签和属性全解析》
一名资深Java工程师的技术分享
10-10 1022
在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。
前端开发笔记--html 黑马程序员1
m0_73805171的博客
10-08 1216
VsCode在刚下载完成后默认是英文的，这对我们这些中国程序员来说很不友好，为了解决这个问题我们可以选择在VsCode中安装一个这个插件，在安装并重启VsCode后VsCode便会将语言调整为中文。这个插件能够让我们实时看到我们修改后的代码的效果，而不需要在每次修改后都刷新浏览器。这个插件能够帮助我们进行快捷的修改标签在我们修改前一个·标签，后一个标签也会改动。由于篇幅的原因在这里便简单介绍一下一些比较重要的插件，黑马那边有更加全面的插件。这个插件能够让我们选择想要的浏览器进行预览。1.前端开发框架代码。
Chromium HTML Tags与c++接口对应关系分析
最新发布
杰克东的专栏
10-11 698
head>对应"head",},其中 == "a" 接口定义 interfaceName: "HTMLAnchorElement", 其他的也类似。查找html_tag定义只需在third_party\blink\renderer\core\html\html_tag_names.json5文件中输入对对应标签，即可找到interfaceName定义。又可以根据interfaceName定义的文件名找到blink和v8定义。
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值