HTML入门

最新推荐文章于 2024-10-29 14:54:04 发布
最新推荐文章于 2024-10-29 14:54:04 发布
阅读量127 收藏
点赞数
分类专栏： html 文章标签： html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52044287/article/details/129417979
版权
（未完待续）

1.初识HTML

2.HTML骨架

<html>根标签
       <head>头标签
             <title></title>标题标签
       </head>
       <body>主体标签
      
       </body>
</html>

3.我的第一个页面及标签简介

<html>
       <head>
             <title>我的第一个网站</title>
       </head>
       <body>
       我终于制作了自己的第一个页面
       </body>
</html>

4.猪八戒骨架记忆法

5.什么是标签及其分类

6.标签嵌套和并列关系

  • 嵌套关系：子元素缩进一个Tab身位

  • 并列关系：上下对齐

7.简单小测验

8.sublime开发工具

Ctrl+s保存文件，注意文件名后缀是 .html

右击“在浏览器中打开”可以看到（每次敲了代码之后都要保存才能看到）

<!DOCTYPE html>  向浏览器和用户说明我们使用什么HTML版本号
<html>
<head>
    <meta charset="utf-8"> 目前最常用字符集，包含全世界所有国家需要用的字符
    <title></title>
</head>
<body>
   
</body>
</html>

HTML标签

HTML标签语义化：标签的含义

HTML标签

  • 学结构就是认识HTML标签

  • HTML标签很多，学习最常用的，少用的查手册即可

一、排版标签：网络布局
1.标题标签（六个等级,没有七啦）

一般情况下不要用h1（重要），一般都是给logo使用

<h1>文本内容</h1>
,<h2>,<h3>,<h4>,<h5>,<h6>

2.段落标签

默认情况下，文本在一个段落中会根据浏览器窗口大小自动换行

<p>文本内容</p>

3.*水平线标签
<hr />单标签

4.换行标签（目前比段落标签更适合小规模的换行）
<br />单标签

5.div span标签(无语义，是布局用的)
<div> 内容</div>   <span>内容</span>

6.文本格式化标签（是文字以特殊方式显示）
只有使用意思       这一列有强调作用
<b></b>     粗体       <strong></strong>
<i></i>     斜体       <em></em>
<s></s>     加删除线    <del></del>
<u></u>     加下划线    <ins></ins>

二、标签属性
<标签名 属性1="属性值1" 属性2="属性值2"...> 内容部分 </标签名>

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
2.属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
3.任何标签的属性都有默认值，省略该属性则取默认值

采取键值对的格式

三、图像标签img
<img src="DSC_7454.jpg"/>     基本图像插入方式
<img src="DSC_7454.jpg"alt="这是XXX"/>       带有alt（当图像不能显示时的替换文本）的图像
<img src="DSC_7454.jpg"title="这是XXX"/>        带有title（鼠标悬停时显示的内容）的图像
<img src="DSC_7454.jpg" width="300 "/>            带有宽度（一般宽和高改一个就行，会自动匹配）的图像
<img src="DSC_7454.jpg" border=" 5"/>            带有边框（设置图像边框的宽度）的图像

四、链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

href

外部链接需要添加http://
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>

内部链接 直接链接内部页面名称即可
<a href="sublime使用.html">百度</a>

当没有确定链接目标时，常将链接标签属性值定义为# （表示此链接暂时为一个空链接）

<a href="#">我的作品地址</a>

不仅可以创建文本超链接，在网页中各种网页元素如图像、表格、音频、视频等都可以添加超链接

target

用于指定链接页面打开方式，self为默认值，blank为在新窗口打开方式

<a href="http://www.baidu.com" target="_blank">百度</a> 在新窗口打开百度

五、锚点定位（难点）
<a href="#id名">链接文本</a>  创建链接文本
id="id名"  要到达的地方，给它一个定义
              
                <h2 id="top"> 目录</a></h2>
<a href="#name">1.姓名</a>
<a href="#class">2.班级</a>
3，背景
4，经历

<h3 id="name">姓名</h3>
<h4 ><a href="#top">返回顶部</a></h4>        这样子就不用滑动鼠标往上翻动了
小猪先生
<h3 id="class">班级</h3>
<h4 ><a href="#top">返回顶部</a></h4>
幼稚园1班
<h3>背景</h3>
<h3>经历</h3>

六、base标签

base可以设置整体链接的打开状态

<head>
    <base target="_blank"/>   这样就设置了下面的链接都以新窗口打开，若有些不这样，再在里面另外写
</head>

七、特殊字符标签

可以查HTML为特殊字符准备的专门替代代码的表

比如：空格符        小于号 <     大于号 >     和号&

可以在输入法小键盘里面的“特殊符号”里面直接用

八、注释标签（多写注释呀）

便于阅读，又不会在网页中显示

<!--  注释的内容 -->

九、路径
  • 绝对路径：略
  • 相对路径：

  • 同一级路径：图像文件与HTML文件位于同一文件夹下

只需要输入图像文件的名称即可 如<img src="logo.gif"/>

  • 下一级文件夹：输入文件夹名和文件名，之间用/隔开

<img src="img/img01/logo.gif"/>

？怎么看起来用/或者\都可以啊

比如说图片文件在C:\Users\user\Pictures 文件名为QQ图片20210507223357.jpg

那我们要得到它就<img src="C:/Users/user/Pictures/QQ图片20210507223357.jpg"/>

  • 上一级文件：在文件名前加入“../”，上两级就“../../”,以此类推

十、列表标签
1.无序列表

不要在ul里面写其他标签 或者文字，但是li与li之间相当于是一个容器，可以容纳所有元素

无序列表会带有自己的样式属性，由css管

快捷键：ul>li*想要的li的数量

<ul>    
    <li>列表项1</li>
    <li>列表项1</li>
    <li>列表项1</li>
    ...
</ul>
2.*有序列表ol

注意事项同ul

<ol>    
    <li>列表项1</li>
    <li>列表项1</li>
    <li>列表项1</li>
    ...
</ol>

3.自定义列表dl
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
<dl>
__sweety
关注
专栏目录
html的根标签是什么,html标签
weixin_39626298的博客
06-15 5877
第一部分什么是 HTMLHTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素(elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签(tags)可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。...
常用 HTML 标签参考手册
好好吃饭，好好睡觉
06-30 732
input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。html 标签告诉浏览器这是一个 HTML 文档，他是 html 页面中的顶级标签，或者说是顶级元素，所以他也被成为根元素。<textarea> 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。<tbody> 封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。<tr> 定义表格中的行。
html 标签的自定义属性
Sun
06-15 3万+
自定义属性是相对于内置属性来说的。 jQuery 方法 方法一：attr() 设置或返回被选元素的属性值。 语法： // 获取值 $(&amp;amp;quot;img&amp;amp;quot;).attr(&amp;amp;quot;src&amp;amp;quot;); // 设置值 $(&amp;amp;quot;img&amp;amp;quot;).attr(&amp;amp;quot;src&amp;amp;q
重新认识HTML系列001——html根元素详解
林中路
06-09 5096
html根元素详解 文档查看 html作为HTML页面的根元素，根据文档，其原来有三个属性：manifest,version,xmlns ，由于新的版本更替，前两个已经不用了，我们来讲一下xmlnsxmlns它的作用是指派XML的命名空间。关于XML的命名空间，这里有详尽的教程：XML命名空间通过该教程，我们明确了以下几点： XML的命名空间解决了XML文件中标签命名冲突的问题 XML命名空间属
HTML入门（详细）
qq_63525426的博客
05-03 3万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html入门练习
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
菜鸟教程：零基础HTML入门
weixin_52163352的博客
11-08 2万+
HTML入门 文章目录一、HTML是什么？二、入门实例1.新建html文档2.html常用标签三、属性总结 一、HTML是什么？ HTML全称：Hyper Text Markup Language 中文名：超文本标记语言 HTML是由W3C组织定义的语言标准，是用于描述页面机构的语言。 二、入门实例 1.新建html文档 如图： 每一个html文件开头必须是这个标签，作用是告诉浏览器此文档为html文档。 ：根元素在所有的html文件中这个元素级别最高 网页编码格式，一般为UTF-8 中间内容就是这个h
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
HTML入门学习的源代码.zip
01-01
HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源...
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML入门教程8：HTML格式化
软考鸭
10-29 510
通过遵循这些HTML格式化的实践和建议，你可以创建出结构清晰、易于阅读和美观的网页。随着你对HTML和CSS的掌握程度的提高，你还可以进一步探索更高级的格式化技巧和布局方法。推荐使用外部样式表，因为它可以将样式与内容分离，提高代码的可维护性和重用性。CSS是HTML格式化的强大工具，它允许你精确地控制网页元素的布局、颜色、字体、间距等。HTML标签不仅用于定义网页的结构和内容，还可以通过其属性和样式来影响内容的显示方式。标签来创建不同级别的标题，这有助于建立内容的层次结构，并使网页更加易于导航和理解。
HTML入门教程4：HTML属性
软考鸭
10-29 865
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
HTML入门教程18：HTML类
软考鸭
10-29 293
在HTML中，你使用class属性来为元素分配类名。类名可以是任何你选择的名称，但最好使用能够描述元素用途或样式的名称。类名前面用一个点（.）表示，但在HTML中给元素分配类名时不需要这个点。< div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素
炫酷的登录框!(附源码)
最新发布
m0_50864141的博客
10-29 1777
【代码】炫酷的登录框!(附源码)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值