适合自学Web的小白—HTML基础_网页aglin的属性值有哪些_Kong_十六的博客-程序员秘密

技术标签： Web—第一阶段

前端小白一枚，现在在慢慢自学，身为大三的我，终于找到了努力的方向。虽然我来CSDN好久了一直都没有好好利用它，冷落了它，从今天开始，好好宠幸它。直到今天才来写下我的第一篇博客。接下来写的一些内容个人认为是比较常用而且重要的一些知识点。仅代表个人观点，有不足的地方请多担待。

HTML 基础

任何一个html文件必须有文件说明即：

<!DOCTYPE html>

html文件的基本结构主要分为两大部分：头部和主体。头部中主要是书写标题以及后期学习CSS时写style标签对其他标签进行修饰。主体部分是整个页面的灵魂，是整个页面的全体。在主体部分中可以任意使用标签。

在html中加注释用

<!DOCTYPE html>
<html lang="en">
<head> /*这是头部*/
    <meta charset="UTF-8">
    <title>Title</title>/*标题标签*/
</head>
<body>/*这是主体*/

</body>
</html>

html文件中的标签一般均为成对出现，但也有单个出现的标签，例如：a标签、br标签、img图像标签。其他的遇到了再做讲解。

HTML中常用标签

h1-h6：标题标签字体依次减小

p：段落标记

b和i：斜体字标签

em和strong：加粗字体标签

a：超链接标签。

br：换行标记

其中标题的标记是自动换行的，在书写标题时不用使用br标签。在使用p段落标签时需要换行的可以使用br换行。

这里给出例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML+CSS基础</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>这是一个段落 <b>这是一个斜体段落</b> <br>换行了
    这是一个段落
    这是一个段落 <em>这是一个粗体段落</em> 这是一个段落
</p>
<a href="https://www.csdn.net/"> 这是一个连接</a>
</body>
</html>

HTML中的列表

列表分为有序列表（ol）、无序列表（ul）、自定义列表（dl）。

有序列表：ol. 其中的列表项li表示。列表有一个type属性，它的值有：A i 1 a I。开始值不同，有序的顺序数据类型不同；ABCD.... 或者是 1 2 3 .... 或者是i ii iii..... 等。大家试一试就知道了。

无序列表：ul. ul中也有type属性，它的值不同体现在列表项前面的标志是圆形、实心圆还是正方形。

自定义列表：dl. 这种类型的列表是很长见的。dt标签是定义一个事物；dd是对dt定义的事物的描述解说。

还有一点就是列表都是可以嵌套的，但是只有列表项（li）可以嵌套。

举个例子：ul中只能有li标签不能有其他标签，但是li中可以嵌套ul列表、ol列表、dl列表。例子如下：

举例的源代码及运行效果

<h2>有序列表</h2>
<ol type="">
    <li>苹果</li>
    <li>香蕉</li>
    <li>榴莲</li>
</ol>
<ol type="A">字母列表
    <li>苹果</li>
    <li>香蕉</li>
    <li>榴莲</li>
</ol>

<h2>无序列表</h2>
<ul type="circle">我喜欢的城市
    <li>北京
        <ul>想去的景点
            <li>颐和园</li>
            <li>圆明园</li>
            <li>鸟巢</li>
            <li>东方明珠</li>
        </ul>
    </li>
    <li>上海</li>
    <li>广东</li>
    <li>深圳</li>
</ul>

<h2>自定义列表</h2>
<dl>
    <dt>电脑</dt>
    <dd>是一种能够按照程序运行的电子设备</dd>
</dl>

HTML中的图像

图像在网页中是不可或缺的一个重要元素。

插入图像img标签。img标签中的src属性（后面紧跟着的是属性值）：

src：URL。要显示图像的URL 即存储图像的路径（此属性是必须的）

align：top、middle、bottom。三个值。此属性是设置图像与文本的对齐方向。

把图像设为网页背景：在body中添加background即可：body background=“图像路径”。放一张我随便设的（花痴了一下哈哈阿哈）

HTML中的超链接

URL类型：

绝对URL超链接：简单说就是网络上一个站点、网页的完整路径。

相对URL超链接：如将自己网页上的某一段文字或标题连接到同以网站的其他网页上面。

书签超链接：即同一网页的超链接，又叫作书签。

常用的超链接一般都是第一种绝对URL超链接。

href：超链接href 的值是连接的路径。

文本连接：在a标签中添加描述性文本

图片连接：在标签中添加一个图片

在此只举一个图像超连接例子给大家参考。

这里是一个CSDN的连接

HTML的表格和表单

表格：

创建表格时用的是table双标签，其中tr是创建表格的行，td是创建表格的一个单元格，th是创建表格的表头，caption是创建带有表头的表格，caption必须紧跟随table之后。其中td标签必须写在tr标签中。有关表格的标签均是双标签。表格的有很多属性，接下来为大家介绍一些常用的属性。table：创建一个表格

caption：创建表格的标题必须紧跟table后

tr：创建表格中的行，有几个表格就有几行

th：创建表格的表头

td：创建表格中行的单元格，它只有rowspan和colspan两个属性

表格常用的属性

border：设置表格的边框，一般使用px为单位

bgcolor：为表格设置颜色

在表格中合并单元格无处不在、很常用的。表格中合并单元格分为合并行、合并列以及同时合并行和列。

合并行（上下单元格）：rowspan=“这里是跨行的个数”

合并列（左右单元格）：colspan=“这里是跨列的个数”

在合并的过程中，首先需要明确这几点：

1.合并的是哪些单元格

2.明确需要合并的单元格是跨行还是跨列，跨行使用rowspan属性并给其数值，跨列同理

3.把被合并的那个单元格删除或者备注掉

单元格内的文本问题，文本一般就是居中居左居右，这时就需要align这一属性

aglin：left/right/center三个属性值

下面给出例子：

<table  border="1px" bgcolor="red">
    <caption>English Table</caption>
    <tr>
        <th align="center">Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr bgcolor="#ffd700">
        <td colspan="2">Apple Steven</td>
<!--        <td>Steven</td>-->
        <td>USA</td>
    </tr>
    <tr>
        <td rowspan="2">Baidu <br>Google</td>
        <td>Li YanHong</td>
        <td>China</td>
    </tr>
    <tr>
<!--        <td>Google</td>-->
        <td>Larry Page</td>
        <td>USA</td>
    </tr>
    <tr >
        <td>Lenovo</td>
        <td>Liu Chuanzhi</td>
        <td>China</td>
    </tr>
    <tr>
        <td>Microsoft</td>
        <td>Bill Gates</td>
        <td>USA</td>
    </tr>
    <tr >
        <td>Nokia</td>
        <td>Stephen Elop</td>
        <td>Finland</td>
    </tr>

</table>

表单：
表单主要是收集网页上浏览者的相关信息，其标签是<form> < /form>

form的属性：action是最常用最重要的一个属性

action=‘url’：它可以是一个地址或者电子邮件地址

input标签：input是单标签

input标签有一些常用的属性：

type：表单元素的类型

表单有不同表单元素，不同的表单元素是因为表单中input标签中的type属性值的不同

type=“text”：文本框，可输入单行文本

type=“teatarea”：文本域，可输入多行文本；同时也可以设置文本的宽：cols；高：rows

type=“password”：密码域，输入秘密具有隐藏效果

type=“submit”：提交

type=“reset”：重置

type=“radio”：单选按钮。以组为单位使用：组必须相同，值域必须不同

type=“checkbox”：复选框。每一个复选框都是独立的一个元素，都必须有一个唯一的名称。

type=“button”：普通的按钮

name：定义元素的名称

value：定义元素的值或者是元素的初始值

id：元素的唯一标识，每个元素只有一个

select标签是创建一个下拉列表其中option是列表项

下面给出示例：

源代码：

<h2>这里是表单</h2>
<form action="https://www.csdn.net/">
<!--    这里的placeholder属性是设置提示性文字的-->
    文本框：<input type="text" placeholder="请输入您的账户"><br>
    密码框：<input type="password" placeholder="请输入您的密码"><br>
    单选按钮：<input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女"> 女<br>
    复选框：<br> 喜欢的城市
            <input type="checkbox" name="" value="box1">北京
            <input type="checkbox" name="" value="box2">上海
            <input type="checkbox" name="" value="box3">广东
    <br>
    下拉列表：<br>
    <select name="fruit" multiple>/*这里的multiple表示用户可以多选*/
        <option value="book1" selected>苹果</option>/*这里的selected表示这个元素被默认选中
        <option value="book2">香蕉</option>
        <option value="book3">榴莲</option>
        <option value="book4">橘子</option>
        <option value="book5">提子</option>
    </select> <br><br>
    <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;
    <input type="reset" value="重置">
</form>

显示效果：

HTML中的多媒体：音频与视频

还可以为视频或音频设置宽高，用width和height设置。我本人没有找视频跟音频来试验，看过的小伙伴可以自己找找相关的音视频试试。

<h2>这里是音频和视频</h2>
<!--loop 是循环播放.  autoplay 是自动播放  通过source属性可以添加多个音频和视频-->
<audio controls="controls" loop >
    <source src="song.mp3" type="audio/ogg">
    <source src="sang.mp3" type="audio/mpeg">
</audio>
<video controls="controls" autoplay loop>
    <source src="123.mp4" type="video/mp4">
</video>

对于HTML，这些是基础，其中最重要的我想就是表单、表格以及我们的列表了，这些在网页的应用比较广泛，就要求我们要熟练掌握了阿。那就写到这里吧，我的第一篇博客，我写了两天了，今天是第二天，终于写完了。自己的表达能力不是很好，很多时候都不知道怎么表述，就按个人的思路写了下来。HTML暂时结束，下一步奔向CSS3！冲阿！！！！！！

本文链接：https://blog.csdn.net/qq_42383764/article/details/103055162

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

MySQL详解_white'pure的博客-程序员秘密

文章目录MySql逻辑架构MySqlSQL优化索引索引的优缺点索引分类及操作索引建立原则执行计划id、tableselect_typetypepossible_keys、keykey_lenrefrowsExtraSQL优化案例单表优化两表优化避免索引失效的一些原则SQL优化方法exist和in选择order by优化排查SQL慢SQL日志设置查看慢SQL日志模拟数据并分析SQL全局查询日志MySql锁机制使用锁表锁行锁MySql逻辑架构主要分为：连接层，服务层，引擎层，存储层。客户端执行一条sele

python矩阵_Python 矩阵相关_weixin_39806388的博客-程序员秘密

Python 中矩阵运算主要使用numpy库。NumPy的主要对象是同种元素的多维数组。这是一个所有的元素都是一种类型、通过一个正整数索引的元素表格(通常是元素是数字）。因此对于随机查找来说，比python自带的list快很多。在numpy里面通常使用两个变量：array和matrix。其实python标准类库中也有array，但是它的功能相对numpy的少很多，所以不用。matrix是array...

【前端新手】实现ie浏览器界面兼容所遇的坑_差不多先生img的博客-程序员秘密

做项目界面时，可能要求是必须要兼容ie8及ie 8+的浏览器，ie7及以下的浏览器需要进行升级弹框提示。在进行ie浏览器的页面兼容时，遇到不少坑，但是也学到很多，现在记录下来，希望大家以后能少走弯路。如果你也要兼容8及8+以上的浏览器，就更应该看下哦！

Qt--QObject_pyqt qobeject的析构_ithewei的博客-程序员秘密

QObject上一节中我们讲了QObject是Qt中使用Meta-Object元对象模型或者说使用信号与槽机制，必须继承的根基类，一般面向对象语言都会有这么一个根基类，提供了语言的基础，那么Qt作为C++的扩展库，QObject作为Qt的根类，为我们提供了哪些功能呢？对象树在Qt的构造函数中，我们可以发现都带有一个QObject* parent=0的默认参数，这个parent就是用来指定父对象QOb

linux 迭代列出文件,讲解在Linux命令行下使用ls命令列出文件的技巧_好大夫在线的博客-程序员秘密

Linux ls 命令可以说是在 Linux 中常见到的命令之一，因为使用它可以掌握系统中文件所在目录中的内容，从而能够查看与修改文件，如果你正在使用 Linux ls 命令，不妨看一下以下技巧，它能帮助你更快速的完成任务。ls 命令起源及使用背景根据 Eric Fischer 在 Linux 文档项目中关于 ls 命令的介绍，该命令的起源可以追溯到 1961 年 MIT 的相容分时系统(CTSS...

android app 打包混淆模板_tongseng的博客-程序员秘密

这篇文章等是跟大家分享一在Android studio 进行代码混淆配置。之前大家在eclipse上也弄过代码混淆配置，其实一样，大家可以把之前在eclipse上的配置文件直接拿过来用。不管是.cfg文件还是.txt文件都一样。先给大家贴一个混淆模板吧。注释很清楚。是我目前一个项目用的proguard.cfg配置文件 #指定代码的压缩级别 -optimizationpas

适合自学Web的小白—HTML基础_网页aglin的属性值有哪些_Kong_十六的博客-程序员秘密

HTML 基础

HTML中常用标签

HTML中的列表

HTML中的图像

HTML中的超链接

HTML的表格和表单

HTML中的多媒体：音频与视频

智能推荐

MySQL详解_white'pure的博客-程序员秘密

python矩阵_Python 矩阵相关_weixin_39806388的博客-程序员秘密

【前端新手】实现ie浏览器界面兼容所遇的坑_差不多先生img的博客-程序员秘密

Qt--QObject_pyqt qobeject的析构_ithewei的博客-程序员秘密

linux 迭代列出文件,讲解在Linux命令行下使用ls命令列出文件的技巧_好大夫在线的博客-程序员秘密

android app 打包混淆模板_tongseng的博客-程序员秘密

随便推点

docker inspect container_name | grep Mounts -A 20_halcyon.fun的博客-程序员秘密

盘点世界十大软件外包公司排名是哪些公司_IT技术分享社区的博客-程序员秘密

拓端数据tecdat:预测危险未知数——事故预防多维度分析_weixin_34327761的博客-程序员秘密

iOS 播放音频的几种方法_TensorFlow学习的博客-程序员秘密

c++ 多态运行时多态和编译时多态_聊聊面试中的多态问题_weixin_39542742的博客-程序员秘密

Vue错误笔记 Uncaught ReferenceError: vue is not defined（新手上路）_YouthMe的博客-程序员秘密

推荐文章

热门文章

相关标签