HTML基础

最新推荐文章于 2024-09-12 15:29:35 发布
最新推荐文章于 2024-09-12 15:29:35 发布
阅读量288 收藏
点赞数
文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45087607/article/details/119053056
版权

H5前端学习日志day1

HTML5的概念

我们今天所谈论的HTML5这个词已经产生了一些变化，它代表的已经不再是简单的HTML网页设计标准，而是围绕着HTML这个东西以及他周边的一系列网页相关技术的总称，这其中既包含了HTML+css的网页制作，也包含了JavaScript这门编程语言的相关开发，这就是HTML5。

–H5是HTML的第5个版本–
–H5是一门技术总称–
–HTML:超文本标记语言–
–w3c:万维网联盟–
–xhtml:可扩展的超文本标记语言。–

H5能做什么

1.网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）
2.小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）
3.Hybrid App(混合应用开发，手机应用 例如，支付宝，淘宝等)
4.Native App(原生应用开发，例如React Native 等框架的开发）
5.桌面应用开发（电脑软件）
6.游戏开发（例如，微信小游戏，其实好多游戏都可以用前端语言进行编写）
7.后端开发（前端学到的nodejs可以实现后端的开发）

项目开发流程

产品经理->UI->前端->后端->测试->运维

网页的组成部分

HTML结构+CSS表现+JS行为

文件命名规范

1、文件命名规则：用英文，不建议使用中文
2、名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。
3、命名的时候最好使用语义化比较强的英文

HTML的语法

1、常规标记、双标记
<标记 属性=“属性值” 属性=“属性值”>文字内容</标记>

2、空标记、单标记
<标记 属性=“属性值” 属性=“属性值” />

属性：对标签进行细节描述
通用属性：几乎所有标签都有的属性（style、class、title、id）

HTML文件和基本结构说明

1、VS Code快捷键
ctrl + / 添加或者取消注释
ctrl + S 保存
!+回车 生成基本结构

2、HTML文件基本结构

// HTML文件基本结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 字符集 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!-- 标题 -->
    <style><style/><!-- 属性 -->
</head>
<body>
    <!-- 代码正文 -->
</body>
</html>

HTML基本标签

1、标题
hn 【n代表1-6】
h1-h6文字逐渐变小，强调逐渐降低

<h1>Hello World!</h1>

2、段落
p

<p>这是一个段落</p>

3、强制换行
br

<h1>Hello World!</h1>
<br>
<p>这是一个段落</p>

4、水平分割线
hr

<hr/>

HTML文本标签

1、变大
big

<big>hello<big/>

2、变小
small

<small>hello<small/>

3、倾斜
i 和 em

<i>内容</i>
<em>内容</em>   //推荐使用em

4、加粗
b 和 strong

<b>内容</b>
<strong>内容</strong>  <!--推荐使用strong-->

5、上标
sup

<sup>内容</sup>

6、下标
sub

<sub>内容</sub>

7、删除线
del

<del>内容</del>

HTML列表标签

1、有序列表

<ol  type="A" start="4">
      <li>有序列表</li>
      <li>有序列表</li>
</ol>

 type：序号类型    start ：开始的序号

2、无序列表

<ul>
      <li>无序列表</li>
      <li>无序列表</li>
</ul>

注意：ol或者ul里面只能有li,li外面必须被ol或者ul包裹,li里面可以有任意的标签

3.定义列表

<dl>
	<dt></dt>
	<dd></dd>
</dl>

图片

 <img src='图片路径' alt='替换文本' width='宽度' height='高度' title='提示文本'>

说明：图片的多种格式都认识，修改宽度，高度会等比例变化，反之亦然。
1、绝对路径
绝对路径是指文件在硬盘上真正存在的路径。
2、相对路径
就是相对于自己的目标文件位置。
同级：直呼其名
上级: …/
下级: /
当前文件： ./

超链接

<a  href="路径"  title="鼠标悬停上去之后的提示信息"  target="规定在何处打开文档">内容</a>

target:
_self代表在当前标签页打开新页面
_blank代表在新的标签页打开新页面

布局标签

排版中用于实现样式的结构性标签
div:盒子标签、块标签
span:无意义标签

大多数时候选择div,当一行文字中有谁有特殊效果，选择用span

表格

<table border='设置边框的粗度' cellspacing='双线边框之间的间隔 0' cellpadding='内容和边框之间的间隔'>
    <tr>
        <td></td>
    </tr>
</table>

table代表表格
tr代表行
td代表单元格

6行5列快捷生成 table>tr[通配符]6>td[通配符]5

合并的步骤：
1.实现基本表格
2.判定要合并的单元格是跨行还是跨列，给左上的单元格设置对应的属性 【跨行rowspan 跨列colspan】
3.保存，看错误效果，删掉对应行多的单元格

特殊符号

&符号名;
小空格  
大空格  
版权 ©
商标 ®
大于 >
小于 <

knight1135
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html基础教程之HTML 标题
html基础教程
02-03 4494
HTML标题 在 HTML 文档中，标题很重要。 HTML 标题 标题（Heading）是通过 <h1> – <h6> 标签进行定义的. <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这...
HTML基础模板
qq_61690596的博客
07-18 2078
HTML基本模板，每个基础元素的内容和作用
HTML标签
LW0512的博客
09-10 790
HTML标签 基本概念 HTML标签是HTML中最基本的单位,也是最重要的部分,标签是由尖括号组成的"<"和">" 单标签 单身贵族 <br/><meta/> 双标签 情侣 一对一对的 <head></head> <body></body><html></html> <title></title><h1></h1><font></f
html(下)
weixin_45663702的博客
12-28 543
html基础 html概述 html( Hyper Text Markup Language )超文本标记语言 超文本指图片、文本、视频、声音、流媒体等 标记，是一种特殊的语法由标签组成 <标签名>，这种语言浏览器看得懂，文件的后缀名 xxx.html w3c世界万维网是html的规范 前段开发中涉及的三种语言分别是： html 内容层 > 表现 css 样式层 > 修饰 html JavaScript 控制层（行为层） > 控制 html 1.标签 （1）单标签 &lt
HTML-
ChristianCheng的博客
08-12 348
“HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
HTML文件命名规范大全
热门推荐
narutozoro111的博客
10-23 1万+
项目中文件名字 1：符合应用场景 2：一律使用小写英文字母，统一要求，英文，禁止中文拼音。 3：命名规则：是团队成员可以看懂自己的代码，自己也方便查找并修改 xxx.hml文件的命名 1：主页面: index.html 2: 子页面，首页: home.html 我的: mine.html 关于我们: abutus.html 信息反馈 feedback 产品：product 购物: s...
web前端面试-10大经典题（HTML基础）
厚积薄发.
11-21 4440
web前端面试-10大经典题（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">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4773
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8780
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
HTML 页面用中文命名会怎么样,html+css 习惯养成（命名规范）
weixin_39886619的博客
06-04 903
相信许多初学者在使用相关html、css的编程软件的时候都对命名规范(英语好的人表讲话！)发愁，小编开始也是对各种命名规范头大，今天就让我为大家梳理一下有关的命名规范吧~文件夹命名：常用：html、css、js、images特殊：当我们的页面非常大需要维护的时候往往会将许多文件夹分开来放置。head.头文件foot.底文件index.首页文件article_channel.文章_频道页a...
html的命名规范
weixin_30361753的博客
07-14 3144
一，html的命名规范 1，文件名称命名规则 统一使用，小写的英文字母，数字和下划线和减号的组合，不得包含汉字空格和特殊符号 原则是，方便理解和方便查找 2，首页面的命名 统一使用index，例如index.html index.css index.js 3，子页面的命名 可以使用纯英文命名的方式，中文直接翻译。 二，图片的命名规范 1，图片的名称分为两个部分，用下划线间隔开，前面的部分是表示图片...
html中css中文命名,css样式怎么命名才规范？
weixin_42524703的博客
07-03 507
做前端开发的朋友都知道css，但是好多人还不知道css怎样命名才算是规范的，其实css命名规范有很多版本，看自己对哪种比较适合或者说习惯，下面本篇文章就来介绍一下CSS样式怎样命名才规范。CSS的命名规则首先来说，css的命名一定要有意义，那么css的命名格式有要求吗？这里介绍三种形式，可以用连字符或者下滑线，也可以用驼峰命名形式，举例：.title-my或者.title_my或者.titleMy...
HTML 列表
qq_40107571的博客
09-06 380
HTML 列表
8- 【JavaWeb】用HTML和CSS来创建一个简洁的登录界面
最新发布
weixin_44329069的博客
09-12 350
我们将使用HTML和CSS来创建一个简洁、现代的登录界面。
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 115
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值