day01-HTML入门/基础环境软件/HTML5常用标签

已于 2023-05-10 15:08:05 修改
阅读量133 收藏
点赞数
文章标签： firefox css 前端
于 2023-05-09 15:55:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63713552/article/details/130579660
版权

0目录

1.HTML入门

2.基础环境软件

3.HTML5常用标签

1.HTML入门

HTML定义：

  1. Hyper Text Markup Language（超文本标记语言）
  2. 文本：以.txt为后缀的文档/文件（只能存放字符）
  3. 超：“超越文本”，包含除了字符以外，还包含视频或音频
  4. 标记：特殊字符<>
  5. HTML作用：开发网页（网站系统的网站页面）

HTML基础结构：网页骨架

  1. <html>      //网页根标签(骨架最外层）
  2. <head></head>    //网页的头部标签（骨架里边的上层）
  3. <body></body>    //网页的体部标签（骨架里边的中层加下层）
  4. </html>

HTML发展史：

1993 html诞生

（2000 xml+html=XHTML）

2013 html5诞生

HTML优势：

  1. 知名浏览器厂商对HTML5的支持（特别是Google，Firefox）

   微软，Google，苹果，Opera，Firefox

  1. 市场的需求（页面开发H5的市场占有率极高）
  2. 跨平台（同一套H5可同时部署到PC/APP）

W3C标准      World Wide Web Consortium（万维网联盟）

组成结构：

  1. 结构化（XHTML、XML）
  2. 表现化（CSS）---样式级联表
  3. 行为化（DOM、ECMAScript）----DOM--文档模型，ECMAScript--JS（JavaScript）的前身
 

2.基础环境软件

了解常用的H5开发软件

  1. 记事本（性能低）
  2. Dreamweaver（一般和PS结合使用/美工）
  3. WebStorm（功能组件不突出）
  4. Hbuilder（简单直观）
  5. Vscode（高性能，企业选用）
  6. IDEA（主攻开发后端，不擅长前端开发）

安装Hbuilder：

  1. 下载包，放在非C盘目录
  2. 启动Hbuilder
  3. 创建web项目工程：

文件-新建-web项目-删除默认html，demokb23下新建html

  1. 保存项目：ctrl+s快捷键----保存完无*
  2. 测试网页：点击上方chrome测试网页运行效果

3.HTML5常用标签

1.HTML基本结构：

  1. <html>

<head></head>

<body></body>

</html>

  1. HTML标签种类：

成对标签：例如：<head></head>

     自闭标签：例如：<hr/>

2.HTML5声明：

<DOCTYPE html>

  1. “DOC/TYPE”（文档/类型）：告诉浏览器使用什么规范（HTML的规范）

拓展：html 4.01的声明

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

3.<title>文档标题标签：

<title>刘伟</title>：网页标题变更为“刘伟”

4.<meta>元信息标签：

<meta charset="UTF-8"> ：UTF-8字符集

（1）meta 标签名称

（2）charst 属性名称

（3）UTF-8 属性值

（4）可以设置当前的文档的字符集，以便于浏览器识别字符集

5.<h1>标题标签：

  1. h1-h6，（h7及往后不报错，会显示正常正文）
  2. h1-h6（标题标签）一般是保存在body标签中

而title（文档标题标签）一般存放的位置在head标签中

6.<p>段落标签paragraph：

被p标签包裹的内容作为一个新的段落

7.<br/>换行标签：

定义：强制性的将<br/>后的内容另起一行

8.<hr/>水平线标签：

实现水平线分割

9.<strong>加粗标签：

对字体进行加粗

10.<em>斜体标签

对字体进行倾斜处理

11.<img>图像标签

src显示图片，width更改图片宽度，height更改图片高度

alt赋予加载不出图片时的文字提示

title赋予图片名称（光标停留在图片上时显示）

12.<a>链接标签

<a href="demo001.html">点击</a>：

        href:链接路径

<a href="demo001.html">点击1</a>                     //原有页面显示demo001.html页面内容

<a href="demo001.html" target="_blank">点击2</a>   //跳转到新的空白页显示demo001.html页面内容

<a href="demo001.html" target="_self">点击3</a>    //原有页面显示demo001.html页面内容

总结：<a href>如果不添加target属性，默认就是target="_self"

13.<a href=“#marker”>锚链接

 例如：

    <body>
        <a name="mark">
        </a>
        新闻 [1] ，也叫消息、资讯，是通过报纸、电台、广播、电视台等媒体途径所传播信息的
        最新进展。<a href="#mark">跳转到首行</a>
    </body>

bigdatakepper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
HTML5基础①--HTML5介绍与标签
weixin_66768178的博客
03-10 117
一.网络传输三大要素 1.URL：统一资源定位符 2.HTTP协议 3.HTML：超文本标记语言 二、HTML 全称：Hyper Text Markup Language ----超文本标记语言 超文本： ​ **文本：**普通的txt文件，无法保存图片、视频、表格等。 ​ **超文本：**比较厉害的文本，可以保存 ​ 类比：人和超人 标记： ​ 标签（标记） ​ 比如：XXX ​ 双闭合标签 ​
前端技术—1.HTML与HTML5常用标签
不放手，不错过的博客
07-24 555
HTML与HTML5常用标签
HTML基础学习第一课
xiaomoge__的博客
09-07 942
HTML的基础知识
入门-day01HTML基础
m0_56712012的博客
11-08 68
入门-day01HTML基础
高级软件人才培训专家-day01-HTML-CSS
03-10
高级软件人才培训专家-day01-HTML-CSS
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
HTML入门及常用标签-day01.xmind
10-11
HTML入门及常用标签-day01.xmind
day01-HTML附件
07-23
总的来说，"day01-HTML附件"的学习涵盖了HTML的基础知识和实践应用，旨在帮助初学者理解HTML的结构、语法以及如何与其他技术（如CSS和JavaScript）协作，从而创建出功能丰富、易读易用的网页。通过学习和练习，你将...
高级软件人才培训专家-day08-Mybatis入门
03-10
高级软件人才培训专家_day08-Mybatis入门
Tomcat异步请求实现原理和应用场景简介
zzz19920821的博客
07-09 322
Tomcat支持异步请求，这是从Servlet 3.0规范开始引入的特性。以下将详细介绍Tomcat支持异步请求的实现原理以及Java应用场景。
Tomcat部署以及优化
ibertine_P的博客
07-09 764
tomcat是用java代码的程序，运行的是java的web服务器tomcat和php一样都是用来处理动态页面，tomcat也可以做为web应用服务器，开源的php处理.php为结尾的tomcat 处理.jspnginx 处理 .html。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1080
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1067
title>充电效果
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 668
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 595
仅对已定位的元素（）有效，默认值为0，可以为负值。
JS之防抖和节流
喵喵的博客
07-09 991
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
旋转木马案例
喵喵的博客
07-08 713
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
css画半圆&&画圆弧
M1512415的博客
07-12 126
【代码】css画半圆&&画圆弧。
初学java 必备：JavaSE基础\day01-Java入门&IDEA&基础语法
05-07
在JavaSE基础中，day01-Java入门是一个非常重要的部分。这一部分主要涵盖了Java编程语言的基本概念和语法规则，是初学者建立起对Java编程的基本理解的起点。 在day01-Java入门中，学习者将首先了解到Java编程语言的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值