html基础标签介绍及演示代码

文章目录

一、什么是html?

 Html是超文本标记语言,是用来描述 web文档的一种标记语言。使用标签作为页面的开始和结束部分。html通常被称为静态网页。HTML是带html或Htm扩展名的文件。

二、基本的标签

1.标签的使用和描述

1.1 标签的分类

行级标签:

行级标签在使用后不自动选择换行,如标签:<font>/<img>等等

块级标签:

块级标签在使用后会自动换行,如标签:<p>/<ol>/<ul>/<dl>等等

1.2基本标签

标签描述
p前后会有空白,会分行
font字体标签
ol有序列表
ul无序列表
dl自定义列表
img插入图片
marquee滚动标签
a超链接标签
table表格标签
form表单标签
input文本输入域标签
slelct下拉列表框
textarea文本域标签
frameset框架集
iframei内嵌框架

2.特殊标签

特殊标签描述
&nbsp;空格        
&gt;大于号
&lt;小于号
&qaot;引号
&copy;版权号
&reg;注册号
&yen;人民币

3.列表标签使用

3.1有序列表语法

<ol type="" start="">
    <li> 
       ....     
    </li>
<ol>

3.2无序列表语法

<ul>
   <li>
      ...
   </li>
</ul>

3.3自定义列表语法

<dl>
    <dt>
     .....
    </dt>
</dl>

总结:

属性描述
type输入字母或数字列表排列 为A 从A开始排序 
start排序从数字几或从哪个字母开始

列表的内容卸载<li>标签中间可写入多个。自定义列表卸载<dt>标签中。

无序列表默认为实心圆 type=“circle” 空心圆为type="square"

4、字体标签

4.1语法

<font 属性> ...  </font>
属性描述
size改变字体大小
color改变字体颜色
align改变字体对齐位置

4.2演示:

 <font align="center" color="blue" size="50"></font>

5、图片标签

5.1语法

<img src="" alt=""/>
属性描述
src插入图片的路径
alt当网络错误时替图片显示,正常时不显示
width改变图片的宽度
height改变图片的高度
aligni改变图片的对齐方式

注:因为<img>时行级标签,所以使图片居中对齐需要放在<p>标签中

列如:

<p align="center"><img src=""></p>

6、滚动标签

6.1语法

    <marquee behavior="" direction="">
        <!-- 可以插入图片或文字使之滚动起来 -->
        <font>...</font>
        <img src="" />
    </marquee>
属性描述
behavior

滚动的方式:

slide:只滚动一次

alternate:来回滚动

direction滚动的方向 从左到右 从上到下
height设置滚动框的高度
width设置滚动框的宽度
bgcolor滚动框的背景颜色
scorlldelay滚动的延时
onmouseseover="this.stop"点击停止滚动
οnmοuseοut="this.start"鼠标箭头离开开始滚动

例:

    <!-- 使文字从左向后来回滚动 高100px 宽100px 背景为黑色 -->
    <marquee behavior="alternate" direction="left" width="100" height="100" bgcolor="black">
        <font size="5" color="blue">欢迎你</font>
    </marquee>

7、超链接

7.1语法

<a href="">文字或图片</a>
属性描述
href跳转的地址
target

目标页面的打开方式

_self(默认)在当前页面打开

_blank 在新的页面打开

例:

<!-- 返回登录的链接-->
<a href="">登录</a>

8、锚链接

8.1语法:

    <!-- #表示当前页面的最前面 -->
    <a href="#name">点击到目标内容</a>
    <!-- 设置锚点 -->
    <a name="name">目标内容头</a>

注:

1、跳转到当前页面的其他页面可使用相对路径

2、若跳转到其他网站下,需要使用完整的url 如:https://www.baidu.con

9、表格

9.1表格介绍:

表格由行(row)和列(col)组成

表格的结构可以分为三个部分

分别为:表头(thead)、正文(ybody)、脚注(tfoot)

表格是可以相互嵌套的。放在<td>中

9.2表格的语法


    <table>
        <!-- 表头 -->
        <thead>
                    <!-- 表的标题 -->
                    <caption>

                   </caption>
            <!-- 第一行 -->
            <tr>
                <!-- 第一列 -->
                <td>

                </td>
            </tr>
        </thead>
        <!-- 正文 -->
        <tbody>
            <tr>
               <!-- th标签可以使文字加粗 与<b>标签差不多-->
                <th>
    
                </th>
            </tr>
        </tbody>
        <!-- 脚注 -->
        <tfoot>
            <tr>
                <td>
    
                </td>
            </tr>
        </tfoot>
    </table>
属性描述使用范围
border边框大小table
bordercolor边框颜色table
background背景图片table
cellspacing单元格之间的距离table
cellpadding单元格填充table
width宽度table/td/tr
height高度table/tr/td
align对齐方式table/tr/td
valign水平向上(top)/下居中(bottom)tr/td
rowspan跨行td
colspan跨列td

9.3示例:

<!-- 写一个3行3列的标签 并使之居中对齐 -->
    <table align="center" border="1" width="300" height="300">
        <thead>
            <caption>标题</caption>
        </thead>
        <tbody>
            <tr align="center">
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr align="center">
                <!-- 跨行 -->
                <td rowspan="2">2.1</td>
                <!-- 跨列 -->
                <td colspan="2">2.2</td>
            </tr>
            <tr align="center"> 
                <td>3.1</td>
                <td>3.2</td>
            </tr>
        </tbody>
    </table>

10、表单

10.1表单介绍

表单可以看做成一个容器,用来实现手机用户信息,实现用户交互

表单中有很多表单元素

表单中可以嵌套table表格

10.2语法

    <form action="" method="">
        <!-- 表单元素 -->
    </form>
属性描述
action表单提交地址
method表单提交方式

10.3 get和post的区别

表单提交的方式分为get和post两种方式

1、get可以将表单元素的值以name=value形式附加在地址栏中,多值时以&连接

2、如表单元素超出地址栏长度,会截断超出的部分导致数据丢失

3、密码类型的数据也会显示在地址栏中,不安全


1、post是以打包邮寄的方式将数据发给服务器进行处理,更加的安全可靠

11、input标签

11.1  input元素介绍

input称为文本输入域,是最基本的表单元素,可以接受用户输入的数据

11.2语法

  <input type="text" value="默认值" name="名称" id="唯一标识">
类型描述
text单行文本框,type的默认值
password密码框
radio

单选框

同一组单选框需要设置name值相同 防止多选

checked 布尔值默认选中 默认为true

checkebox

复选框

用一组复选框name值需一样 方便传值

submit

提交按钮

有内置功能,将from中的表单元素提交给action处理

若不在from中则内置功能失效

reset

重置

有内置功能,从新恢复默认值

button普通按钮 比submit灵活
file文件域上传文件 multiple 可多选文件上传
hidden

隐藏域

在页面不显示,服务器可以接受

image

图品按钮

图片形式提交按钮,有内置功能

11.3 示例:

    <!-- 用户注册表单 -->
    <form action="" method="get">
        <!-- 使用 label标签当点击文字时 可以自动指向文本框输入值 使得用户体验更好
        for和name的值需要相同 使他们关联起来 -->
        <label for="username">用户名:</label>
        <input type="text" name="username" value="name" maxlength="10"><br>
        <label for="pwd">密码:</label>
        <input type="password" name="pwd"><br>
        <button>提交</button>
        <input type="reset">
    </form>

12、slelct标签

12.1 select标签介绍

select称为下拉列表框,可以让用户选择多项中的一个或多个 不需要占用太多的空间

12.2 语法

    <select name="" id="">
        <option value="" ></option>
    </select>
属性描述
multiple多选
size同时出现的项目个数
selected默认选中项

示例:

    <!-- 下路列表框 -->
    <select name="" id="" size="3" multiple >
        <option value="" selected>请选择城市</option>
        <option value="" >苏州</option>
        <option value="" >常州</option>
        <option value="" >无锡</option>
    </select>

13、文本域标签

13.1语法

    <textarea name="" id="" cols="30" rows="10">
        文本。。。。。。
    </textarea>

属性描述
cols文本框宽度的大小
rows文本框高度的大小
disable设置控件禁用
readonly设置控件只读

14、框架集标签

14.1介绍

使用框架可以将多张页面放在同一张页面加载的技术

使用时需要放在body外面 放在里面不生效

14.2语法

<!-- 将一张页面分为2行,第一行占百分之20 *表示第二行占剩下的百分之80 -->
    <frameset role="20%,*">
        <!-- src插入页面的地址 -->
        <frame src="url">
            <!-- 将第二行分为2个列 第一列占百分之20 第二列占百分之80 -->
            <frameset role="20%,*">
                <frame src="url">
                <frame src="url">
            </frameset>
    </frameset>

属性描述使用范围
rows水平分割frameset
scols垂直分割frameset
border边框大小farmeset
bordercolor边框颜色farmeset
noresize禁止调整框架尺寸frame
scrolling=“yes/no”是否出现滚动条frame

 

15、内嵌框架

15.1语法

    <!-- 引入其他页面  src 引入页面的地址 frameborder为框架的边框 -->
    <iframe src="" frameborder="0"></iframe>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值