HTML常用标签

目录

1、文本标签

2、文本格式化标签

3、图像标签

4、超链接标签

5、表格标签

6、列表标签 

7、表单标签

8、其他标签

9、HTML5新增标签(新增的标签和属性使我们在制作页面时更                                       加方便使用)


1、文本标签

<p></p>  段落标签
<br/>       强制换行
<hr>        分界线(水平线)

标题标签:

    <h1>标题一、我爱写代码</h1>
    <h2>标题二、我不掉头发</h2>
    <h3>标题三、好好学习,天天向上</h3>
    <h4>标题四、做一个优秀的前端开发师</h4>
    <h5>标题五、热爱生活,努力赚钱</h5>
    <h6>标题六、希望疫情快点结束</h6>

2、文本格式化标签

 加粗 :     <strong></strong>或者<b></b>
 倾斜  :    <em></em>或者<i></i>
 删除线(中划线): <del></del>或者<s></s>
 下划线  :<ins></ins>

分区:<div></div>  一行只能放一个 

         <span></span> 一行可以显示多个,内容为横向显示

3、图像标签

<img src="图像URL"/  alt="注释"  title="注释">

alt为替换文本,当图像显示不出时用文字替换

title为提示文本,鼠标放图片上时会有文字提示

可以在图像标签中给图像添加width、height、border等属性;

4、超链接标签

<a href="链接"  target=" "> </a>

target为打开窗口的方式,默认值为_self,即在当前窗口打开页面;_blank为在新窗口打开页面

<a href="#"></a>  空链接

<a href="文件或者压缩包名"></a>  下载链接

锚点链接:1、设置锚点 <a name= "名字"></a>

                   2、设置锚点链接 <a herf="#名字"></a>

5、表格标签

<table></table>  定义表格的标签

<tr></tr>  定义表格中的行

<td></td>  定义表格中的单元格 

<th></th>  表头单元格(使字体居中加粗)

<thead></thead>  定义表格头部

<tbody></tbody>  定义表格主体

表格中一些常用属性

cellpadding  内容与单元格间的距离

cellspacing   单元格与单元格间的距离

合并单元格:rowspan =“合并单元格个数”   跨行合并

                     colspan =“合并单元格个数”    跨列合作

    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>

6、列表标签 

<ul></ul>  无序列表

<ol></ol>  有序列表

<dl></dl>  自定义列表

<dt></dt> 表头,列表项

<dd></dd> 列表内容

7、表单标签

<form></form> 表单域

<input type="属性值"/>     radio单选按钮    checkbox复选框

<select></select>  下拉表单标签

<option></option>  选项,在里边写selected=“selected”时为默认选定状态

<textarea></textarea>  文本域标签

8、其他标签

注释标签 :  <!--内容-->

空格标签 :&nbsp

符号标签:&lt (<) 、 &gt (>)

9、HTML5新增标签(新增的标签和属性使我们在制作页面时更                                       加方便使用)

双标签

<header>:头部标签

<nav>:导航标签

<article>:内容标签

<section>:定义文档某个区域

<aside>:侧边栏标签

<footer>:尾部标签

<auido>:音频标签

<video src="文件地址" controls="controls" οnerrοr=""(发生错误时执行某个方法)></video>:视频标签

input表单类型:type= “email”、“url”、“date”、“number”....

表单属性:

required:内容不能为空

placeholder:提示文本,会有一个默认搜索内容

autofocus:自动聚焦属性,即光标自动定位到搜索栏

autocomplete off/on:基于之搜索内容保留于文本框历史浏览

multiple:可以多选文件提交
 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶油味的泡芙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值