简单学习HTML基础~

最新推荐文章于 2024-10-25 16:29:29 发布

小顿爱编程

最新推荐文章于 2024-10-25 16:29:29 发布

阅读量260

点赞数 2

分类专栏： Html 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45053664/article/details/114542172

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML初体验

首先说一下HTML的官方含义，就是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。学东西咱们还是要知道自己学习一年两年的东西它到底是什么的哈~主要就是通过HTML来创建你自己的网站。下面的内容我会主要讲解一些我自己在学校学习的时候认为重要的一些点！

省心省力之好的工具

在进行代码编写的时候一款好的编译软件是能帮助到你节约大量的时间和精力，我常用的是有两款吧，在开始学习的时候我建议大家使用Hbuilder，这款软件真的是初学者的理想型，它能大幅提升开发效率，对程序员也设计了更人文关怀的UI，它包括最全面的语法库和浏览器兼容性数据。HBuilder是面向追求效率的极客开发者的，比如HBuilder强调的手不离键盘、飞一样编码。与之相对应的另一面代表是dreamweaver，dreamweaver拥有可视化拖拉拽布局页面的设计器，更多的是面向设计师或初学者。
HBuilder的优势：
① 最快的开发工具，五大助手大幅提升编码效率；
② 绿柔主题，保护健康；
③ 最全的语法库；
④ 最全的浏览器兼容性数据
第二个就是VS code 这是由微软开发的，同时支持Windows、Linux和macOS等操作系统且开放源代码。编译器中还内置了扩展程序管理功能。这个相对于Hbuilder上手稍微复杂一点

没有用的科普之基础架构

这一个代码我相信大家都看到很多次了，也不知道为什么要写这个，有的时候不写是不是感觉也没有影响。其实这个对于除了IE浏览器的其他浏览器来说都是可以不写的，写上主要是为了和IE浏览器进行适配，因为某某原因，对原因感兴趣的可以在评论区告诉我，我再来和大家说。告诉浏览器你写的是html代码\ 头部标签，相当于一个身体从上到下由你来创造。之后的Css内部样式也是在head标签中编写，以及引入外部Css样式的link标签也是一样。

基本标签

h1 - h6标签，标题标签，由大到小，1最大，6最小。自带加粗和独占一行

<h1>好好学习</h1>
<h2>天天向上</h2>
<h3>你就最棒</h3>

标签，段落标签，独占一行。

<p>这是第一自然段</p>
<p>这是第二自然段</p>

标签，超文本链接标签，鼠标点击来实现跳转。href属性中填入需要跳转的网址

<a href="www.baidu.com">跳转到百度</a>

图片标签，给你白白的网页插入一些绿色的图片吧~src属性中填入图片的地址，width和height设置图片的宽高。当图片未能成功加载时，现在alt中输入的文字提示信息。

<img src=" " width=" "  height=" " alt=" ">

像

 标签，分别对应加粗、倾斜、删除、下划线、上标、下标、分隔线、预文本标签。

在写代码的过程当中，初学还好，代码量不大，但之后的代码量大了之后出现错误再进行更正会非常麻烦，所以HTML注释就出现了~它主要是给我们看的，来提高其可读性，浏览器不会显示注释。

<!-- 这是一个注释-->

实践大于理论，多实践！

这是一个简单的HTML网页，大家可以看看所需要运用的知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度新闻</title>
</head>
<body>
    <img src="image/baidulogo.png"> &emsp;
    <a href="www.baidu.com" id="baidu">百度首页</a>&emsp;<a href="#">登录</a><hr>                 <!-- 第一部分 -->

    <p align="center"><font size="5" ><b>如果没有出演美国队长,这将是克里斯·埃文斯最大的错误</b></font></p>      
    <p align="center"><img src="image/03.jpeg" alt="蜘蛛侠" id="zhiz" align="top" width="30px" height="30px">
    &emsp;<a href="www.marvel.com" >漫威</a></p>                                       <!-- 第二部分 -->

    <p>&emsp;&nbsp;<b>美国队长克里斯·埃文斯</b>最初曾两次婉拒出演美国队长，但最后还是参演了。“在扮演一个对我来说意义重大的角色之后继续向前迈进，我认为任何一个演员，即使我一开始就扮演这个角色，好吧，我可能会被这个角色定义了？”
        CE在参加ACE漫展时说道。 “但在某种程度上来说，在过去十年间，你不禁会接受这样一个事实：当你走在街上时，每个人都喜欢，'队长！'”</p>   <!-- 第三部分 -->
        
    <marquee scollamout="20"><font color="red">欢迎进入百度新闻网</font></marquee>     <!-- 第四部分 -->
    
    <p align="center"><img src="image/02.jpeg" ></p>
    <p>尽管漫威这样的长期合约曾让CE有些焦虑，因为这样很可能会将一个演员局限在这个角色中。 “但实际情况是，漫威制作了一系列电影。如果我不是这些电影的一部分，如果我对这些电影最终说了不，那将是我生命中最大的错误”，他说道。</p> 
    <p>&nbsp;“我认为这些电影对我来说非常特别。这是令人难以置信的珍藏，而这些也永远不会再发生。我觉得很幸运与特别的演员
    ，以及导演编剧一起工作。这对我来说太特别了。”</p>
    
    <p align="center"><img src="image/01.jpeg" alt=""></p>
    <p>&emsp;&nbsp;“在我生命中的某个时刻，我真的很担心[出演美国队长]。但回想起来，我可以完全肯定地说，这是我做过最好的决定。
    ”CE还表示，即使这些电影糟透了，他的职业生涯也因此而陷入困境，但和这些白痴[一同出席漫展的还有“鹰眼”杰瑞米·雷纳和“战争机器
    ”唐·钱德尔]成为了朋友，<s>也超值了！</s></p>                                           <!-- 第五部分 -->
    
    <p align="right">2019-7-11</p><hr>
    <p><font size="2">相关搜索</font></p>
    <p align="center"><a href="#baidu">复仇者联盟演员表</a>&emsp;<a href="#zhiz">蜘蛛侠</a>&emsp;<a href="#">蜘蛛侠之英雄归来</a></p> <!-- 第六部分 -->
</body>
</html>

这就是整个的代码，大家可以看看，自己再敲着练习一下，前期的基础都没有设计到逻辑层面，大家只需要多记多背关键标签，关键属性。

小小表格，大大能量！

标签来定义表格。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1px" cellspacing="0px" cellpadding="0px" align="center" style="margin-top: 250px; background-image: url(image/1.jpg);" width="500px" height="500px">
        <caption><a href="#" style="text-decoration: none;"><font color="purple">大家来找茬~</font></a></caption>
        <tr align="center">
            <td><font color="green">1</font></td>
            <td><font color="green">2</font></td>
            <td><font color="green">3</font></td>
        </tr>
        <tr align="center">
            <td><font color="orange">4</font></td>
            <td><font color="orange"></font></td>
            <td><font color="orange">6</font></td>
        </tr>
        <tr align="center">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        
    </table>
</body>
</html>

HTML 表格和边框属性:

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格。cellspacing用来控制表格的内边距，cellpadding用来控制表格的外边距。align是已经过时的属性，大家在没有学习css之前都可以先使用这个属性来进行文本的对齐、向右、向左。