HTML的初识

最新推荐文章于 2023-04-14 13:09:23 发布
最新推荐文章于 2023-04-14 13:09:23 发布
阅读量135 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42592601/article/details/109306421
版权

初识HTML

概述：HTML知识点

在这里插入图片描述

一. 我的第一个网页

<!--DOCTYPE:告诉我们的浏览器，我们要使用什么样的规范-->
<!--head：代表网页的头部-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta：用于描述网页的信息-->
    <!--meta：一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="飞飞学习Java开发!">
    <meta name="description" content="在这里学习Java的前端知识!">
    <!--title：代表网页的名字-->
    <title>我的第一个网页</title>
</head>

<!--body：代表网页的主体-->
<body>
Helloworld!
</body>
</html>

二. 基本标签的使用

主要包括几个基本的知识点：

  • 几级标题
  • 段落标签
  • 水平线标签
  • 粗体和斜体的使用
  • 换行标签
  • 特殊符号标签
    • 空格&snap;
    • 一般的形式为： &…;【可以通过提示选择】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签的学习</title>
</head>
<body>
<!--标签的分级-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>>

<!--段落标签-->
<p>两只老虎 跑得快 跑得快</p>
<p>一直没有耳朵 一直没眼睛 真奇怪</p>

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

<!--粗体和斜体标签-->
<h1>粗体和斜体的使用</h1>
<p>
    <strong>i love you</strong>
</p>

<em>i love you</em><br>

<!--换行标签-->
两只老虎 跑得快 跑得快<br>
一直没有耳朵 一直没眼睛 真奇怪<br>

<br>
<!--特殊符号-->
空  格<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
&gt;
<br>
&lt;
&copy;版权飞所有
&nabla;<br>
</body>
</html>

三. 图像标签

<body>
<!--
路径：可以分成是相对路径和绝对路径，我们推荐使用相对路径
绝对路径：我们从盘符开始写的路径
相对路径：针对当前的项目的路径，我们使用../代表上一个路径
-->
<img src="../resorces/image/1.jpg" alt="snow" title="悬停文字" width="800" height="1000" >
</body>
</html>

四. 链接标签

  • 主要分成是普通型链接

     <a href="https://www.baidu.com" target="-_blank">点击跳转页面一</a>

  • 功能性链接

    <!--跳转邮箱-->
<a href="mailto:2277644734@qq.com">联系我</a>
<!--跳转QQ-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我领取资料" title="加我领取资料"/></a>

  • 锚链接

    <a name="top">顶部</a>
<a href="#top">回到顶部</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的学习</title>
</head>
<body>

<a name="top">顶部</a>
<!--
href:表示我要跳转到的那个页面
-->
<p>
    <a href="1.我的第一个网页.html" target="-_blank">点击跳转页面一</a>
</p>
<p>
    <a href="https://www.baidu.com"><img src="../resorces/image/1.jpg" alt="snow" title="跳转到百度" width="800" height="1000" ></a>

</p>

<a href="#top">回到顶部</a>

<!--功能性链接-->
<a href="mailto:2277644734@qq.com">联系我</a>

<p>
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"
    ><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我领取资料" title="加我领取资料"/></a>
</p>

</body>
</html>

五. 列表

  • 有序列表

    <ol>
    <li>java</li>
    <li>python</li>
    <li>linux</li>
</ol>

  • 无序列表

    <ul>
    <li>java</li>
    <li>python</li>
    <li>linux</li>
</ul>

  • 自定义列表

    <!--自定义列表-->
<!--
dl ： 标签
dt ：列表的名称
dd ：列表的内容
-->
<dl>
    <dt>subject</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>
    
    <dt>location</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>合肥</dd>
</dl>

六. 表格

<!--
tr 表示每一行
td表示每一列
colspan 表示列合并
rowspan 表示行合并
-->
<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>

</table>

七. 媒体元素

  • video

    <!--
src: 代表我们的video的路径，我们还是推荐使用相对路径
controls ：表示我们对于视频的控制
autoplay ： 表示我们自动开始播放我们的视频
-->
<video src="相对路径"controls autoplay></video>

  • audio

    <!--
src: 代表我们的audio的路径，我们还是推荐使用相对路径
controls ：表示我们对于视频的控制
autoplay ： 表示我们自动开始播放我们的视频
-->
<audio src=""controls autoplay></audio>

八. 页面结构

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

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

九. 内联结构

<!--普通的内联方式-->
<iframe src="https:\\www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

<!--通过图片内联方式-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com/video/BV1x4411V75C?p=11"target="hello">点击跳转</a>

十. 表单

  • form[ get/ post]

  • 文本框

    <input type="text" name="username" maxlength="8" size="20">

  • 密码框

    <input type="password" name="pwd" value= "12580">

  • 单选框

    <!--单选框标签
input type = “radio”
value：单选框的值
name： 表示组
-->
<p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

  • 多选框

    <p>爱好：
  <input type="checkbox" value="sleep" name="hobby" checked>睡觉
  <input type="checkbox" value="code" name="hobby">敲代码
  <input type="checkbox" value="game" name="hobby">打游戏
  <input type="checkbox" value="sports" name="hobby">运动
</p>

  • 按钮

    <input type="button" value="点击变长">

  • 下拉框

    <p>国家选择：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="USA" selected>美国</option>
        <option value="Eth">瑞士</option>
        <option value="India">印度</option>
    </select>    
</p>

  • 滑块

     <input type="range" name="range" max="100" min="1">
1飞飞1
关注
专栏目录
HTML 初识
m0_73070900的博客
08-01 1345
HTML基本骨架是构建网页的最基本的结果。VSCode中可以输入！再按Tab/Enter 自动生成此代码。
HTML初识
m0_63931604的博客
04-12 52
html初识教学反思,《初识FrontPage》教学反思
weixin_33308577的博客
06-05 369
为了加深学生们的动手能力和综合运用frontpage制作网页的能力，我特别设定了本节综合制作活动课，我想，我可以将奥运情感，带入到我的课堂教学中，同学们利用所掌握的FrontPage软件知识来制作一个简单宣传北京2008奥运的网页，来宣传奥运、支持奥运、让更多的小朋友来了解奥运。因此，我决定以奥运吉祥物为主题制作一个奥运宣传栏，同学们对此都非常的感兴趣。于是我在课前就请同学们通过网络来收集一些与关...
01-HTML初识
weixin_47175934的博客
08-30 148
网页相关，五大浏览器，vs code使用，html语法，排版系列标签，文本格式化标签，链接标签
HTML： html初识
dformy的博客
11-01 646
1、实例 <!doctye html> <html> <head> <title> 这里用于显示标签内容 </title> </head> <body> <h1>这里用于显示标题<h1> <p> 此处用于显示段落，并且两段之间会自动换行，或者使用<br>进行换行操作</p> <a href="http://www.baidu.com"> 百度 &lt
HTML5初识
weixin_48152652的博客
04-07 1307
初识HTML HTML（Hyper Text Markup Language）俗称超文本标记语言 HTML发展史：目前已经发展到HTML5版本 HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等。 W3C World Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立
第一讲 HTML初识
菡萏的博客
11-25 1578
文科编程系列课程-Web开发 第一讲 HTML初识 目录1 标记（Mark）1.1 文本中的标点1.2 标点符号的特点1.3 从标点到标签2 HTML2.1 HTML的概念2.2 HTML52.3 HTML实践3 课后作业 1 标记（Mark） 1.1 文本中的标点 中国古代书籍中，一般不加标点符号，而是通过文意、语感、语气助词、语法结构等进行断句。像全国卷高考语文中的文言文题目就涉及到文章的断句。 如今，在现代汉语中，我们有一套完整的标点符号系统。在《中华人民共和国国家标准 标点符号用法》里给出了.
HTML初识——网页设计html基础
qq_45864756的博客
08-29 5563
html初识
初识HTML
heliuerya的博客
01-25 1067
初识HTML
Html 初识3
长安
08-14 172
一 效果图 二 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> </style> <title>Html 初识3</title> </head> <body> <!--...
HTML初识基础认知 + HTML标签
12-05
"HTML初识基础认知 + HTML标签" HTML初识基础认知是学习HTML标签的基础，理解HTML的基本语法和标签的关系，能够使用排版标签实现网页中的标题、段落等效果，使用相对路径选择不同目录下的文件，使用媒体标签在网页...
HTML第01天（HTML初识）总结.emmx
08-21
HTML第01天（HTML初识）总结.emmx
统计软件与数据分析Lesson8----HTML初识
爱数据爱统计
04-14 500
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页。
电子商务之价格优化算法：梯度下降：机器学习在价格优化中的角色.docx
11-05
电子商务之价格优化算法：梯度下降：机器学习在价格优化中的角色.docx
ToadforOracle与Oracle数据库版本兼容性教程.docx
11-05
ToadforOracle与Oracle数据库版本兼容性教程.docx
browser360-cn-stable-13.3.1016.4-1-amd64.deb
11-05
360浏览器银河麒麟版 for X86 适配兆芯 / 海光 / intel / AMD CPU
基于React.js和Material-UI个人作品集网站模板（附源码+说明文档）.zip
11-05
使用React.js构建,提供多种主题可供选择,并且易于定制。该项目旨在帮助开发者和自由职业者创建自己的个性化投资组合。 主要功能点 多种主题可供选择,包括绿色、黑白、蓝色、红色、橙色、紫色、粉色和黄色 易于定制,可以在src/data文件夹中更新个人信息 包含主页、关于、简历、教育、技能、经验、项目、成就、服务、推荐信、博客和联系等多个部分 支持通过Google表单收集联系信息 提供SEO优化建议 支持多种部署方式,如Netlify、Firebase、Heroku和GitHub Pages 技术栈主要 React.js Material-UI Axios React-fast-marquee React-helmet React-icons React-reveal React-router-dom React-router-hash-link React-slick Slick-carousel Validator
中小型企业财务管理系统 SSM毕业设计 附带论文.zip
最新发布
11-05
中小型企业财务管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
apsw-3.38.5.post1-cp39-cp39-win_amd64.whl.rar
11-05
python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。
html 初识CSS：丰富多彩的网页样式品
04-02
在初识CSS时，你可以了解以下几个方面： 1. CSS的基本语法：CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块中包含了一系列的样式属性和值。 2. 样式属性和值：CSS提供了丰富的样式属性和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值