html入门

最新推荐文章于 2023-06-08 22:12:06 发布
最新推荐文章于 2023-06-08 22:12:06 发布
阅读量246 收藏 1
点赞数
分类专栏： web 文章标签： html 编辑器 标签 文档 结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_eyefocus/article/details/50514910
版权

html入门

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- 注释 -->
<!-- HTML文档的基本结构：
<html>
  主要定义当前页面的基本信息
  <head></head>
  主要定义当前页面中含有的标签
  <body></body>
</html>

HTML文档的后缀名必须为：*.html
这篇文档需要交给浏览器解析呈现。 -->
<head>
<!--头标签，定义网页的一些属性 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 定义网页的标题 会在标题栏中显示 
    title标签可以处理SEO 
    （SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”，百度首页排名）-->
<title>Insert title here</title>
</head>
<!-- body存放当前页面的控件 -->
<body>
    123换行
    <br /> 456
    <!-- 段落示例  自动换行-->
    <p>fsfsafasdfafga..egae
        .f.af.a.fsa.f.saf.sa.fsa.fs.af.saf.asfsadfwfagawfad.gae.ga.</p>
    <p>fsfsafasdfafga..egae
        .f.af.a.fsa.f.saf.sa.fsa.fs.af.saf.asfsadfwfagawfad.gae.ga.</p>

    <!--标题标签  6个<h1><h2>...<h6>
大小不一样-->
    <h1>123</h1>
    <h2>123</h2>
    <h3>123</h3>
    <h4>123</h4>
    <h5>123</h5>
    <h6>123</h6>

    <!--样式标签  
<i>斜体 
<b>加粗 
<u>下划线  
<s>划掉-->
    <i>1231</i>
    <b>1231</b>
    <u>1231</u>
    <s>1231</s>


    <!-- 图片标签 
在网页中显示一张图片
src：目标路径
alt/title:鼠标悬停时的提示文字-->
    <hr>
    <img alt="百度的图片"
        src="http://baike.soso.com/p/20090711/20090711101754-314944703.jpg"
        title="百度的图片">
    <hr />
    <hr>
    <img alt="本地的图片" src="e:/ben.jpg" title="本地的图片">
    <hr />
    <hr>
    <img alt="本地相对的图片" src="benben.jpg" title="本地相对的图片">
    <hr />
    <!-- width,height 设置宽高 ,单位px 一般设置一个，另外一个属性将自适应-->
    <hr>
    <img alt="本地相对的图片" src="benben.jpg" title="本地相对的图片" width="500px">
    <hr />
    <!-- 网页当中支持的图片格式：jpg,jpeg,png,gif 
jpg/jpeg:压缩率高，轻微失真，不支持透明度
png:支持透明色
gif:支持透明色，支持动态图，不支持某些颜色-->

    <!-- 网页中路径：相对路径和绝对路径
绝对路径：网络绝对路径和系统绝对路径 
相对路径：..返回上一层../-->

    <!-- <hr华丽分割线> -->

    <!-- 网页中的超链接:图片链接和文本链接，链接显示的样式不同
href:跳转到的目标地址
title: 同图片-->
    <!-- 这是一个文本链接-->
    <hr>
    <a alt="链接提示" href="https://www.baidu.com" title="链接提示"> 这是一个文本链接 </a>
    <hr />
    <!-- 这是一个图片链接-->
    <hr>
    <a alt="链接提示" href="https://www.baidu.com" title="链接提示"> <img
        alt="本地相对的图片" src="benbenla-0.jpg" title="本地相对的图片" width="500px">
    </a>
    <hr />
    <!-- 这是一个假链接
href：里面写javascrpt:;什么操作也不执行
        #跳转到当前界面 -->
    <hr>
    <a alt="链接提示" href="javascrpt:;" title="链接提示"> 这是一个假链接 </a>
    <hr />

    <hr>
    <a alt="链接提示" href="#" title="链接提示"> 跳转到当前页面 </a>
    <hr />

    <!--网页中的表格
1>早期页面中使用表格实现网格布局
2>在网页中呈现二维数据-->
    <!-- 网页中
<table> 描述一个表格
<tr> 描述一个表格行
<td></td> 描述一个单元格
-->
    <!-- 一个手机键盘示例 -->
    <hr>
    <!-- table的常见属性：width height 
    align对齐方式 
    border边框 
    cellpading单元格内边距 
    cellspacing 单元格空隙-->
    <table width="300px" height="300dp" align="center" border="10"
        bordercolor="#124241" cellspacing="0" cellpadding="2">
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr align="center">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <hr />

    <!-- 单元格合并  rowspan 行合并
                            colspan         列合并-->
    <!--画一个合并图-->
    <table width="300px" height="300dp" align="center" border="10"
        bordercolor="#124241" cellspacing="0" cellpadding="2">
        <tr align="center">
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr align="center">
            <td rowspan="2">4</td>
            <td>5</td>
        </tr>
        <tr align="center">
            <td colspan="2">3</td>
        </tr>
    </table>
    <hr />

    <!-- 课程表 demo-->
    <hr>
    <table width="360" height="240" align="center" border="10"
        bordercolor="#124241" cellspacing="0" cellpadding="2">
        <tr>
            <td>无</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td colspan="2">末</td>
        </tr>

        <tr>
            <td rowspan="4">上</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
            <td rowspan="7"></td>
        </tr>
        <tr>


            <td></td>
            <td></td>

            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>


            <td></td>
            <td></td>
            <td></td>
            <td></td>

            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>


            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="3">下<br>午
            </td>
            <td></td>

            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr>



            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <hr />

    <!--第二套表格标准  
     caption 标题
     thead  表头
     tbody   表题
     tfoot     表脚-->


    <!--表单  -->


</body>
</html>
lucky_eyefocus
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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入门学习的源...
HTML入门教程
05-10
HTML入门教程
html入门学习01
05-26
html入门初始的一些概念和标签标注，p标签，a标签，b标签，i标签等。以及一些html的面试问题和标签的应用示范，
HTML入门总结思维图
最新发布
03-24
HTML入门总结思维图
小白HTML入门介绍从0开始
01-06
从零开始入门程序员
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值