Html介绍及标签使用总结

最新推荐文章于 2022-04-30 22:45:20 发布

isOllie

最新推荐文章于 2022-04-30 22:45:20 发布

阅读量293

点赞数 1

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

本文链接：https://blog.csdn.net/qq_39141486/article/details/88940985

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html标签的使用

1 关于html的基本语法介绍

<!DOCTYPE html>：当前html版本的引用以及相关配置文件的引入
<head>：页面头部信息网页名称，字符编码集的相关配置
<body>：网页的主体部分

注意：Html是严格注意书写规范的，标签总是成对出现的，开始和结束标签一定要注意书写规范，另外，代码书写的工整美观也是考核一个合格程序员的标准。

2 常用标签以及属性的设置

2.1 字体标签

<font color="#00000"size="5" face="微软雅黑">你好啊！HTML</font>

color 设置字体颜色
size 设置字体大小，可用数字1-7（由大到小），也可以用像素（px）
face 设置字体样式
font标签已过时。

<font color="#00000"size="20px" face="微软雅黑">你好啊！HTML</font>

<strong>你好啊！</strong>

strong：对文字进行加粗

2.2 背景

<body bgcolor="aquamarine" bgproperties="fixed" background="img/1.jpg" >

一般在css里对页面的属性进行调整

2.3 图片

<img src="img/1.jpg" width="200px" height="200px" alt="网速不好" align="center">

Src是图片资源的路径和相对应的图片文件，一定要添加对应的文件格式。可以通过图片的宽高属性来改变插入图片的宽高值。
Alt属性是图片资源加载不成功时显示的文字标注信息。
Align是插入图片和周边的文字/文本相对位置居中还是左右。

2.4 背景音乐/多媒体

<bgsound src="music/SeeYouAgain.mp3" loop="-1"></bgsound>（只在IE浏览器中才可以有效果）

Loop是背景音乐的循环次数：正数值是多少就是循环次数是多少，负数就是无限循环，不论负数值是多少。0是不循环。

<embed src="music/ Seve.mp3"></embed>/*词语法来自IE，已过时*/
<audio src="audio/何曾惧.mp3" controls autoplay>何曾惧
</audio>
<video src="" controls autoplay></video>

embed 可以插入背景音乐或者多媒体，并且有控制按钮。
audio 插入音乐
video 插入视频
controls 控件 autoplay 自动播放

2.5 标题

<h1>标题一</h1>
<h2>标题二</h2>
……
<h6>标题六</h6>

1-6 标题正文的大小由大到小来显示

2.6 标尺线/水平线

<hr width="100px"  color="red" size="7">

可以通过它的属性来设置它的颜色，宽度和高度。根据自己的需要来设置。

2.7 超链接

<a href="index.html" target="" name=""></a>

Href是需要连接到的资源目的，target是连接目标资源打开的方式。
Blank是在空白也打开
Parent是子在父类存在的页面打开
Self是覆盖掉自身页面打开新的页面。
Name是设置锚点。

2.8 表格

<table border="1px " cellpadding="0px" cellspacing="0px" width="200px" height="200px">
    <caption>公司财务报表</caption>  用于表格的标题/名称
    <tr>
         <td colspan="2"></td>
    </tr>
    <tr>
        <td ></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

一般是在表格的第一行对表格头文件进行强调作用。
在早期的页面布局中，我们也可以用表格对页面的设置进行布局。
Cellspandding是单元格到表格边框的间距。Cellspaceing是单元格与单元格之间的距离。

2.9 单表

<form action="" method="">
    <input type="text" name=" " value=""><br>
    <input type="button" value="login"></input><br>
    <input type="checkbox">篮球<input type="checkbox">足球<br>
    <input type="radio" name="sex">man
    <input type="radio" name="sex">felman<br>
    <input type="file"><br>
    <input type="email" >
</form>

Action是表单的提交地址，一般表单的数据要提交到后台进行运算或者储存到数据库中。
Method是表单数据提交的安全方式。有两种：get(不安全，效率高)，post(安全，效率低)。

2.10 多窗口页面/框架

        <title></title>
    </head>
    <frameset cols="10%,*">
    <frame src="index.html"/>
    <frameset rows="20%,*">
        <frame src=""/>
        <frame src=""/>
    </frameset>
    </frameset>
</html>

注意：在框架标签使用时，不可以用<body>标签。

框架也用与页面的布局。

<frame  src="index.html" frameborder="0px" scrolling="no"/>

Scrolling是在页面大于当前框架时出现的滚轮滑动属性。

2.11 文字和图片的移动标签

<marquee behavior="alternate" direction="right" loop="2">
        你号啊
</marquee>
<marquee behavior="alternate" direction="right" loop="2">
    <img src="img/1.jpg">
</marquee>

文字和图片的移动，behavior是移动的属性，往返，单次循环等。
Derection是移动的方向，上下左右，也可以组合起来用作斜线对称线的移动。

2.12 常用的但标签和符号

<p>   段落标签。
<br>   换行标签
<hr>   标尺线
<h1>    标题

2.13 有序列表/无序列表

<ul >
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
<ol>
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ol>

ul-无序列表 ol-有序列表

列表通过css来控制他的显示样式。

2.14 下拉菜单

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

2.15 定义文档中的节/行内空间

<span>你好</span>

2.16 文本域

<textarea cols="80" rows="20"></textarea>

Cols定义的是文本域的宽度以及一行输入的字符数。
Rows是文本域的高度，有多少行

2.17 行内框架

<iframe src="img/1.jpg"></iframe>

Iframe是可以在body体内的框架

2.18 带边框的样式

<fieldset >
    <legend> HTML</legend>
</fieldset>

在一些网页的信息分隔符就可以这样设计。

2.19 DIV

<div class="col-md-9 rs-li-two">
    <ul class="list-unstyled list-inline">
        <li><a href="#">工作地点 |</a></li>
        <li><a href="#">工作职能 |</a></li>
        <li><a href="#">工作经验</a></li>
    </ul>
</div>