快速上手HTML

最新推荐文章于 2024-05-20 21:21:56 发布

@白小白

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量232

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_47134586/article/details/120368617

版权

1.关于HTML

HTML的全称为超文本标记语言，用于描述超文本中的内容和结构。HTML是一种建立网页文件的语言，每一个HTML文档都是一种静态的包含了HTML指令代码的网页文件。

超文本是一种组织信息的方式，它通过连接的方法将文本中的文字、图表与其他信息相关联，通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面。

了解更多

2.HTML基本结构

指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，基本标签分为:

双标签：<标记符属性="属性值" ... ></标记符>,如<html lang="ZN-CH"></html>

单标签：<标记符属性="属性值"/>,如 <br /> 换行标签。

每种标签都用属于自己的属性，属性以键值对显示出现，属性为标签提供附加信息。

HTML的基本结构如下：

<!--HTML的结构一般不需要改变  -->
<!DOCTYPE html> <!--文档类型声明 固定格式-->
<html lang="en"><!--html标记 代表文档的开始 lang属性 声明文档的语言 en是英语，ZN-CH是中文-->
<head>          <!--头标记 用于说明文档信息-->
    <meta charset="UTF-8"><!--元信息 -->

    <title>网页标题</title> <!--标题标记 网页标题-->
</head>
<body>  <!--主体标记 -->
    网页内容
</body>
</html>

<head>标签中用于说明文档信息，一般有 meta元信息,CSS样式，JavaScript脚本语言等。
<meta>标签中的charset属性告诉浏览器网页编码的字符集，除了charset，许有name，http-equiv等属性，主要用于告诉浏览器关于此网页的信息，在此不过多介绍。

基本结构的网页效果如下：

3.编写一个HTML

打开记事本 —>编写HTML代码 —>保存 —>所有文件 —>后缀为.html或.htm —>双击html文件，默认浏览器打开(推荐谷歌,火狐等主流浏览器)—>右击鼠标—>检查（浏览器中查看HTML代码）
使用 Adobe Dreamweaver，Visual Studio 等开发软件。

4.HTML5的注意事项

标签不再区分大小 <HTML> </HTML>或<html> </html>英文地址
允许属性不使用引号 <img src="URL ()" />或<img src= URL () />
对双引号和单引号不敏感 <a href="#" ></ a>或 <a href='#' ></ a>.
允许部分属性省略属性值
使用英文符号

4.HTML的标签

在介绍之前，小白把查阅文档的方式留下，学会文档查阅是很重要的O：

1.不会就找度娘

2.W3C：w3school 在线教程

3.MDN：中文地址| 5.总结

1.盒子标签

<div>:大盒子，标签独占一行

<span>：小盒子，一行可以有多个

<body>  
    <!-- 我们声明三的div大盒子和三个span小盒子 -->
    <div>第一个</div><div>第二个</div><div>第三个</div>
    <span>第一个</span>第二个<span></span>第三个<span></span>
</body>

效果如下：

第一个

第二个

第三个

第一个第二个第三个

2.六级标题标签

<h1>-<h6>标签

  <body>  
    <h1>h1标题标签</h1>
    <h2>h2标题标签</h2>
    <h3>h3标题标签</h3>
    <h4>h4标题标签</h4>
</body>

效果如下：

h1标题标签

h2标题标签

h3标题标签

h4标题标签

特点：六级标题，独占一行，加粗显示，逐级递减

3.段落标签和换行标签

3.1<p></p> (段落标签)

表示一个段落

文本会根据浏览器窗口大小自动换行

段落之间留有间隙（存在不可调间隙，部分可调）

3.2 <br />或<br>(换行)

单标签，另起一行显示剩余内容

行间没有间隙（间隙可调）

<body>  
    <!-- 在2个p标签中我们共有8行，4个段落-->
    <p>
            我爱我的祖国！我爱我的祖国！<br/>我爱我的祖国！我爱我的祖国！我爱我的祖国！我爱我的祖国！
        我爱我的祖国！我爱我的祖国！
            我爱我的祖国！我爱我的祖国！<br/>我爱我的祖国！我爱我的祖国！我爱我的祖国！我爱我的祖国！
        我爱我的祖国！我爱我的祖国！
    </p>
    <p>
        我爱我的祖国！我爱我的祖国！<br/>我爱我的祖国！我爱我的祖国！我爱我的祖国！我爱我的祖国！
    我爱我的祖国！我爱我的祖国！
        我爱我的祖国！我爱我的祖国！<br/>我爱我的祖国！我爱我的祖国！我爱我的祖国！我爱我的祖国！
    我爱我的祖国！我爱我的祖国！
</p>
    <!-- 网页效果却是2个段落，6行 -->
    <!-- 注意观察段落之间的间隙与行间隙 -->
</body>

当遇到<p>标签时，便重起一段，遇到<br>时，便重起一行

4.文本格式标签

加粗<strong></strong> 或 <b> </b>

倾斜<em> </em> 或 <i> </i>

删除线 <del> </del> 或 <s> </s>

下划线<ins></ins> 或 <u> </u>

我们一般通过CSS样式设置文本格式，了解即可。

5.图像标签

src是<img>必须属性，一般只需<img src="url" alt=' ' />

url（）图像文件地址：

图片(**.png)和html文件在一个文件夹：src=" **.png "

图片在html文件的子文件(image)中: src=" image/**.png "(使用最多)

图片在html文件的父文件(image)中: src=" ../image/**.png "

../表示到上级目录寻找 /表示到下级目录寻找

一定别忘了加上图片正确的后缀

alt="s"：在图片加载失败时图片位置会显示s信息

title="s"：当鼠标悬停在图片上时会提示s信息

width,hight设置图片高度和宽度，border设置图片边框，一般我们在CSS中设置

 <!--
    包结构如下：
    study
       |
       |-image
       |   |
       |   |-落日.png
       |
       |-imgText.html
       |
       |-可爱.jpg 
-->
<body>  
    <img src="image/落日.png" alt="这是一张落日图">
    <img src="可爱.jpg" alt="这是一张可爱的图片">
</body>

6.超链接标签

<a href="#" target=" ">文本或图片</a>

href是<a>标签的必须属性，href="跳转网页"，指定了链接的目标地址。

target=" "取值_self(默认)会在当前页面打开链接，取值_blank在新窗口打开链接

根据href取值不同标签类型可分为：

外部标签：href="http://....." 跳转到网上页面资源

内部标签：href="html文件的url地址"（和图片src属性一样）跳转到本地页面资源

空连接： href="#" 还不确定跳转到哪( 占时用当前页面作为目标地址)

下载链接：href="文件地址" 单击会下载一个文件

锚点链接：< a href='' #名字 ''> </a> 快速定位到当前页面某个位置

目标位置：标签中加 id 属性：id="名字"

如： <a href="#go"> <p id="go">快到这里来</p>

<body>  
    <p id="to"></p>
    <a href="https://www.baidu.com/">百度</a>
    <a href="#">空连接</a>
    <a href="#go">我要钻到底部</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> <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> <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> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <a href="#to">我要飞上去</a>
    <br id="go">
</body>

7.表格标签

7.1表格标签基础

<tr>

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

</tr>

...

</table>

<table>声明了一个表格，<tr>在表格里声明了一行，<td>在行里声明了一列,

<caption>标签给表格设置一个标题，可以省略。

<body>  
    <table align="center" border="1" cellpadding=10 cellspacing=10 width=600px height=200px> 
        <caption>学习表格</caption>
        <tr>
            <td>1</td><td>2</td>
        </tr>
        <tr>
            <td>3</td><td>4</td>
        </tr>
        <tr>
            <td>5</td><td>6</td>
        </tr>
    </table>

align 设置表格对齐方式取值为 left ，center ，right

border 设置表格边框样式 0(默认)表格便会隐身,见内容不见表格1 表示实线

cellpadding和cellspacing 容易混淆

width，height 设置单元格的宽和高

table还有许多属性，如 bgcolor，background 等可设置表格背景颜色，嵌入背景图片，

一般在CSS中设置，包括border， width，height 等属性，都会在CSS中设置，主要思想是结构和样式分离，HTML搭建结构，CSS美化样式，各司其职，HTML代码就不会显得臃肿，难以理解。

7.2 表格结构

<body>  
    <table align="center" border=1 cellpadding=0 cellspacing=0 width=200px height=160px> 
        <caption>学习表格</caption>
        <thead>
            <tr>
                <!-- <th>和<td>一样，不过<th>之间的内容会被 加粗局中 显示 -->
                <!--  表头一般用<th> <th>一般用在第一行和第一列-->
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>主体</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>脚注</td>
            </tr>
        </tfoot>
        
    </table>
</body>

添加表格结构标签使表格更容易理解,但并不是硬性要求

7.3 单元格合并

单元格合并指把多个单元格合并成一个大单元格，分为跨行合并和跨列合并

跨行合并：垂直方向合并 rowspan="合并个数" 属性添加在合并单元格最上侧单元格中

跨列合并：水平方向合并 colspan="合并个数" 属性添加在合并单元格最左侧单元格中

<table align="center" border=1 cellpadding=0 cellspacing=0 width=200px height=160px> 
        <caption>合并单元格</caption>
        <tr>
            <td rowspan="2"></td> <td></td> 
        </tr>
        <tr>
            <td></td> <td></td> 
        </tr>
        <tr>
            <td></td> <td colspan="2"></td> 
        </tr>
    </table>

效果如下：

可以试试合并4个单元格哦

8.列表标签

列表主要是用来布局页面的，使页面整齐有序

8.1无序列表

<ul>

.........

</ul>

效果如下：

列表1
列表2
......

8.2 有序列表

<ol>

.........

</ol>

效果如下：

列表1
列表2
......

<ul>标签和<ol>标签中只能是<li>标签,<li>标签中可以放任何元素

<ul>标签前是小原点，<ol>标签前是数字排序

<ul>标签和<ol>标签的属性不介绍，都是用CSS进行设置

8.3自定义列表

 <body>  
        <dl>
            <dt>主题1</dt>
            <dd>列表1</dd>       
            <dd>列表2</dd>

            <dt>主题2</dt>
            <dd>列表1</dd>       
            <dd>列表2</dd>
        </dl>
    </body>

效果如下：

<dl>中只能是<dt>和<dl>,<dl>的内容跟着<dt>走

<dt>和<dl>的数量可以有多个

9.表单标签

表单主要用于收集用户信息，表单由表单域，表单元素，提示信息三部分组成

9.1表单域

</from>

action=" url " 指定接收表单数据的服务器

method=" get/post" 指定提交的方法，一般是get或post

name="表单域名" 指定表单名称，用于区分不同表单

9.2 表单元素

9.2.1输入表单元素

type属性的取值决定输入控件类型

type属性值	控件类型
button	按钮
radio	单选按钮
checkbox	复选框(多选)
file	上传文件
image	图片形式的按钮
text	文本框
password	密码字段(*****显示输入内容)
hidden	隐藏输入字段
reset	重置表单数据
submit	提交数据

这里只列出了部分，红色是使用较多的控件

name=" " 为表单元素起名字，服务器就是根据name值区分同的表单元素，

对于radio单选按钮，我们先创建一个按钮组，相同name值的radio控件就在一个

按钮组，按钮组中的选项只能选择一个。对于checkbox复选框，我们也同样设置复

选框组，复选框组中的选项能选择多个。

value=" " 设置表单元素返回给服务器的值，value值会显示在表单控件上。

checked="checked" 按钮设置了这个属性，表示默认选择此按钮。

maxlength=" " 设置输入的最大长度

<form action="">
        <input type="text" name="" value="默认有的文本">
        
        <input type="password" >
        <input type="reset" >
        <input type="submit" value="提交">
        <!-- 设置按钮组 -->
        <input type="radio" name="radio" value="a" checked>
        <input type="radio" name="radio" value="b">
        <input type="radio" name="radio" value="c">
        <input type="radio" name="radio2" value="d">
        <!-- 设置复选框组 -->
        <input type="checkbox" name="charset" value="1" checked>
        <input type="checkbox" name="charset" value="2">
        <input type="checkbox" name="charset" value="3">

   </form>

效果如下：

9.2.2下拉列表

<option selected=" ">选项2/option>

........

</select>

至少有一堆<option>

multiple=" multiple" 设置此属性，表示可以多选

selected="selected" 设置此属性，表示默认选择此项

9.2.3文本域

[文本]

</textArea>

文本为默认显示的内容

clos=" " 设置文本列数 rows=" "设置文本行数

5.总结

这里我只是简单的介绍了一下html的基础语法，这些标签的配合使用就能够搭建网页结构，虽然html能够设置部分样式，但我们并不会这样去做，因为对于html写的样式，CSS表示表示不屑，在设置样式这一块，咋们的CSS可谓手到擒来。对于想深入学习的同学，可以去B站寻找适合自己的学习视频，这里也给一个任意门：

pink老师零基础前端入门教程