Html入门

最新推荐文章于 2023-06-08 22:12:06 发布
最新推荐文章于 2023-06-08 22:12:06 发布
阅读量430 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yrr0924/article/details/77918113
版权

Html入门

 

 

A：基础：

1） 特点：

Html标签通常是成对出现

a.      简易性

b.     可扩展性

c.      平台无关性

2） html的文档机构

a.<html></html>

<head></head>

<body></body>

 

两个标记必须同时使用

3）样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!------meta标记，提供给用户不可见的信息------>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<!---这是注释，与java中不同--->

<!-----这是文件的标题------->

<title>无标题文档</title>

</head>

 

<body>

<!-----这是文档的主体部分，显示网页的内容-------->

</body>

</html>

B：基本标记

1）分隔标记

a.     换行<br/>

b.     分段标记<p></p>

c.      空格：（特殊符号）&nbsp;     直接写出来

2)排版标记

a.     文字的置左，置中，置右

属性：align

<body>

<palign="left"hello</p>

<palign="center" world</p>

<palign="right"java </p>

</body>

b.     置中的另一种表示

<body>

<center>您好</center>

</body>

c.      保持原样

<pre></pre>

3)字体标记

       a.标题标记

<h1>标题1</h1>

…….

<h6>标题6</h6>

      b.设置字体标记

           <font size=”7” color=”#F00” face=”黑体” 明天就开学了</font>

<body>

<pre><fontsize="+3" color="#FF0000" face="楷体"我爱你，中国</font></font>

</body>

c.字体变化标记

<b></b>加粗

<i></i>:斜体

<u></u>底线

4）其他字体变化标记

<s></s>文字有删除线

<sup></sup>:上标

<sub></sub>下标

<em></em>强调字体

<strong></strong>加强字体

<code></code>代码

<big></big>默认比字号大一号

      <small></small>默认比字体小一号

5）背景标记

     a.设置背景颜色

     <body bgcolor=”red”></body>

b.设置背景图片

   <bodybackgrond=”xx.jpg”></body>

6)分隔线

     <hr/>：水平分隔线

设置分割线属性

<hr color=”F00” size=”7px” width=”300px” heigh=”300px”align=”center”/>

去除阴影<hrnoshade>

7)img标记

<img src=”图片路径”></img>

设置图片属性

<body>

<imgsrc="../images/2.jpg" alt="这是一个美女图片" width="400px"height="400px" border="0" usemap="#Map"title="美女" />

<mapname="Map" id="Map">

</map>

</img>

</body>

8)序列列表

   a.有序列表<ol></ol>

   b.无序列表<ul>/<ul>

<body>

<!--有序列表:ol li

       ol有默认属性:type:指定的值是数字

-->

你最喜欢的明星是谁?

<oltype="I">

       <li>汤姆汉克斯</li>

    <li>梅西</li>

    <li>詹姆斯</li>

</ol>

<br/>

<!--无序列表:ul li

       ul的type属性:默认disc:实心原点

   

-->

学生管理系统

<ul  type="square">

       <li>成绩管理</li>

    <li>学生管理</li>

    <li>教师管理</li>

</ul>

<!--软件项目组织的列表:dl dt dd-->

软件组织架构的划分

<dl>

       <dt>技术总监</dt>

    <dd>攻城狮1号</dd>

    <dd>攻城狮2号</dd>

    <dd>攻城狮3号</dd>

    <dt>财务总监</dt>

    <dd>会计师1号</dd>

    <dd>会计师2号</dd>

    <dd>会计师3号</dd>

</dl>

<!--span:行内标签-->

<span>行内标签</span>

<!--div:块标签:-->

<div>块标签</div>

<!--div+css:进行网页的布局-->

</body>

9)转义字符

<:&lt

>:&gt

&:&amp

“:&quot

注册商标:&reg;

版权所有:&copy;

例如：

西部开源<sup>&reg;</sup>版权所有<sup>&copy;</sup>

 

10)超链接<ahref=”链接路径” target=”打开目标地”></a>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>超链接标签</title>

<!--

       超链接标签:a标签

    a标签有标签体的标签,有开始有结束标签

    两个常用的属性:

                 href:连接到的地址或者资源文件

            target:打开地址或者资源文件的方式:_self:在当前窗口直接打开(如果没有写target属性默认就是_selft这种方式打开);_blank:新建窗口打开

            用浏览器执行当前的这个网页:地址栏中有一个file:// :文件协议(本地文件或者本地地址)

            http协议的执行流程:首先在当前本机中c盘中找对应到hosts文件中ip对应的域名,如果能找到那么就直接打开,如果找不到,就调用网卡联网操作访问(经过中间网络运营商)进行访问

            file://文件协议

            http://协议

           thunder://迅雷协议

            mailto:邮件协议

 

           

            协议很多:普通协议上面这几种

           

            超链接标签引用:

                1)能链接到资源文件或者html地址

                2)作用:用来锚链接使用

                          1)打锚点

                        <a name="锚点名称"></a>

                       2)链接到哪里呢?

                        <a href="#name属性的值">超链接</a>

                           

                      同一个网页打锚点:

                                1)打锚点:

                                          <aname="锚点名称"></a>

                             2)链接到哪里呢?

                                         <a href="#name属性的值">超链接</a>

                        针对不同的一个网页:

                                     1)打锚点:

                                             <a name="锚点名称"></a>

                                       

                                2)链接到的地址:

                                      <a href="资源文件#锚点名称">连接到的资源</a>

-->         

 

 

</head>

 

<body>

<aname="top"></a>

<ahref="05.文本标签.html#list"target="_blank">超链接标签</a><br />

<a href="../1.jpg"target="_blank">链接到的图片</a><br />

<!--<ahref="www.baidu.com">链接到的百度</a>

       这种写法是错误的:

   

    加上一个协议:正确的写法:http://www.baidu.com

-->

<ahref="http://www.baidu.com">链接到的百度</a><br/>

<ahref="http://www.moive.com/fuchouzhelianmeng2.avi"><<复仇者联盟2>>(普通下载)</a><br />

<ahref="thunder://www.moive.com/fuchouzhelianmeng2.avi"><<复仇者联盟2>>(高速下载)</a><br/>

<ahref="mailto:zhangyang@westos.com">发送邮件给朋友</a><br/>

<ahref="#ch01">第一章内容</a>

<br /><br/><br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /><br/><br /><br />

<aname="ch01"></a>

 

厉害了我的歌<br/>

<ahref="#top">返回顶部</a>

</body>

</html>

在开发时，可通过查看w3School文档学习并使用

11）．html5的特性

a.<html5>中video元素<!--是用来执行视频,或者视频流的格式-->

<video src="video.mp4"controls="controls"></video>

b.  mark元素<!--给用户在视觉上进行高亮显示的-->

    <mark>这是我标记的重点</mark>

c.  audio元素  <!--用来执行音频,音乐或者是其他音频流-->

   <audiosrc="music.mp3" constrols="controls">audio元素 </audio>

d. progress元素<!--正在之行的引用程序-->

    <progress></progress>

12）表格标签:table

    行的标签:tr

    单元格:可以理解为列,td

          表格的标题:caption

        表头:th标签:表头自动加粗,并且自动居中

   

    合并单元格:

    rowspan:行的合并

    colspan:列的合并

   

    一个表格要想能显示出来,就必须指定边框属性

    table常用的属性:

                 border:边框

            width:表格的宽度

            heigth:表格的高度

            align:对齐的方式 left  center right

            背景颜色:bgcolor格标签

举例：

<body>

<tableborder="1px" width="400px" height="300px"align="center" bgcolor="pink">

       <captionstyle="color:#F00">2017年学生成绩表</caption>

    <tr>

          <th>姓名</th>

        <th>班级</th>

        <th>成绩</th>

    </tr>

    <tr align="center">

          <tdrowspan="2">狗娃</td>

        <td>软工1班</td>

        <td>90</td>

    </tr>

    <tr align="center">

         

        <td>经济1班</td>

        <td>80</td>

    </tr>

    <tr align="center">

          <td>狗蛋</td>

        <td>计算机2班</td>

        <td>98</td>

    </tr>

    <tr align="center">

          <td>狗剩</td>

        <td>通信1班</td>

        <td>85</td>

    </tr>

    <tr align="center">

          <tdcolspan="2">平均分</td>

        <td>80</td>

    </tr>

</table>

</body>

 


yrr0924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML入门
小刘的博客
02-05 8951
目录一、HTML的概念1.1 HTML的常见概念1.2 HTML的常用标签1.3 HTML标签的组织形式二、网页的基本结构三、浏览器和网页的关系3.1 什么是浏览器内核3.2 浏览器内核的发展3.3 浏览器内核的重要性3.4 网络标准的制定4. 开发工具的选择4.1 文本编辑工具4.2 集成开发环境 一、HTML的概念 1.1 HTML的常见概念 1.2 HTML的常用标签 1.3 HTML标签的组织形式 二、网页的基本结构 三、浏览器和网页的关系 3.1 什么是浏览器内核 3.2 浏览器
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零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML零基础入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-08 2814
欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！
HTML基础入门（详细）
weixin_51143430的博客
08-28 3298
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入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
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入门学习的源...
聚类算法-一种无监督学习方法.docx
最新发布
08-12
聚类算法是一种无监督学习方法，用于将数据集中的数据点自动分组到不同的类别中，这些类别也称为“簇”或“群”。聚类的目标是让同一簇内的数据点尽可能相似，而不同簇之间的数据点尽可能不相似。聚类算法广泛应用于多种领域，如数据挖掘、模式识别、图像分析、信息检索等。 聚类算法的基本概念 无监督学习：聚类算法不需要事先标记数据点的类别标签，而是根据数据本身的相似性来分组。 相似性度量：聚类算法依赖于某种相似性或距离度量来决定数据点之间的相似程度。常用的度量包括欧氏距离、曼哈顿距离等。 目标函数：大多数聚类算法都会尝试最小化某种目标函数，例如簇内的平方误差和（SSE）。 常见的聚类算法 K-Means K-Means 是一种原型聚类算法，它通过迭代地将数据点分配到最近的质心来形成簇，并重新计算每个簇的质心，直到质心不再显著变化为止。 在 Python 的 scikit-learn 库中，可以通过 KMeans 类实现 K-Means 聚类。 层次聚类 层次聚类构建一个树状图（称为树状图或 dendrogram），显示数据点是如何逐渐合并成簇的。 这种算法可以是凝聚型（自底向上）或分裂型（自顶向下）。
45ft集装箱模型3D图纸 STEP格式.zip
08-12
45ft集装箱模型3D图纸 STEP格式.zip
Spring Boot网吧管理系统.zip
08-12
该系统严格按照需求分析制作相关模块，并利用所学知识尽力完成，但是本人由于学识浅薄，无法真正做到让该程序可以投入市场使用，仅仅简单实现部分功能，希望日后还能改善。 本系统具有以下优点： 该系统具有较高的适用性，选用B/S结构，可以在绝大部分个人平台上使用该系统。 系统将用户权限进行划分，管理员，网管和会员都能看到及操作的信息不一样，三者具备不同的操作权限。 该系统操作界面简单明了，大部分人都可以正常使用。 但也存在以下问题需要改进： 运行时窗口不能被刷新，可以改进。 系统过于简单，显示的信息有限。。 不能添加多个管理员账号，如果可以则将利于发展网吧规模，便于网吧信息集中管理。 不能实时预约接待消息和网吧反馈建议，容易被忽视，不利于管理员服务客户。
微信小程序大作业 新闻小程序
08-12
微信小程序大作业 新闻小程序
HTML入门：从基础到实践
"这是一份由浅入深的HTML入门教材，旨在帮助初学者掌握HTML的基础知识，包括HTML文档的基本结构和字符实体的使用。" 在Web程序开发中，HTML（超文本标记语言）是构建网页内容的核心语言。HTML文件本质上是包含一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值