IT源码网

html5——常用元素与属性

zhengyun_ustc 2023年04月08日 编程语言 17 0

html5是由标签组成的标记语言,本篇就介绍HTML5的部分标签

    html5保留的常用标签

<!--  -->    定义HTML注释 
<html>    HTML5文档的根元素 
<head>    定义HTML文档的头部页面元素 
<title>    定义HTML5的页面标题 
<body>    定义HTML5文档的页面主体部分 
<style>    该元素用于引入样式定义 
<h2>到<h7>    定义标题一到标题六 
<p>    段落标签 
<br>    换行标签 
<hr>    定义水平线 
<div>    定义文档中的块 
<span>    与div标签基本相似,默认不会换行

代码示例:

<!DOCTYPE html> 
<html> 
    <meta charset="utf-8"><!--定义编码方式--> 
    <head> 
        <title>标签代码示例</title> 
    <head> 
    <body> 
        <h2>标题一</h2><!--标题标签--> 
        <h3>标题二</h3> 
        <h4>标题三</h4> 
        <h5>标题四</h5> 
        <h6>标题五</h6> 
        <h7>标题六</h7> 
        <hr><!--输出一条水平线--> 
        <span>php</span><span>mysql</span><span>html</span><!--定义三个span标签--> 
        <br><!--换行标签--> 
        <div>php</div><div>mysql</div><div>html</div> 
        <p>tomcat</p> 
    </body> 
</html>

文本格式化标签

    这些元素让文本在浏览器中呈现出特定的效果

<b>    定义粗体文本 
<i>    定义斜体文本 
<em>    定义强调文本 
<strong>    定义粗体文本,与<b>标签的作用和用法基本相同 
<sup>    定义上标文本 
<sub>    定义下标文本 
<bdo>    定义文本的显示方向,该标签可以指定dir属性,该属性值只能是ltr或者是rtl

代码示例:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>文本格式化标签</title> 
    </head> 
    <body> 
        <span><b>加粗文本</b></span><br/> 
        <span><i>斜体文本</i></span><br/> 
        <span><b><i>粗斜体文本</i></b></span></br> 
        <span><em>被强调的文本<em><span><br/> 
        <big><span>大号字体文本</span></big><br/> 
        <p><strong>加粗文本</strong></p><br/> 
        <small><span>小号字体文本</span></small><br/> 
        <div>普通文本<sup>上标文本</sup></div> 
        <bdo dir="ltr">从左向右排列</bdo><br/> 
        <bdo dir="rtl">从右向左排列</bdo><br/> 
    </body> 
</html>

语义相关元素

html5保留了如下相关元素    <abbr> 用于表示一个缩写 
    <address> 用于表示一个地址 
    <blockquote> 用于定义一段长的引用文本 
    <q>用于定义一段短的引用文本 
    <cite> 用于表示作品的标题 
    <code> 用于表示一段计算机代码 
    <dfn> 用于定义一个专业术语 
    <del> 定义文档中被删除的文本 
    <ins> 定义文档插入的文本 
    <pre> 预格式化标签 
    <samp> 定义示范文本内容 
    <kbd> 定义键盘文本 
    <var> 用于表示一个变量

超链接和锚点

    超链接<a.../>,该元素可以指定 id class style等核心属性,也可以指定onclick等各种事件属性,还可以指定如下三个重要属性

    href:指定超链接所关联的另一个资源

    target:指定使用框架集中的哪一个框架来装载另一个资源,该属性的属性值可以是_self _blank _top _parent

<a href="  target="_blank" ">百度</a> 
<a href="#test">定位到test锚点</a> 
<a name="test"></a>

 列表相关标签

<ul> 定义无序列表 
<ol> 定义有序列表 该元素可以指定如下三个属性,start :指定列表项的起始数字  type :哪种类型 
的编号  reversed 该属性用于指定是否将排序反转 (目前没有浏览器支持该属性) 
<li> 定义列表项目 
<dl> 用于定义列表 
<dt> 用于定义标题列表项 
<dd> 用于定义普通列表项

  代码示例:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>列表相关标签</title> 
    </head> 
    <body> 
             <ul> 
          <li>列表一</li> 
          <li>列表二</li> 
          <li>列表三</li> 
        </ul> 
         <ol start="2" type="I"> 
             <li>列表一</li> 
             <li>列表二</li> 
             <li>列表三</li> 
          </ol> 
          <dl> 
              <dt><dt> 
              <dd><dd> 
              <dd><dd> 
              <dt><dt> 
                     <dd><dd> 
                     <dd><dd> 
          <dl> 
    </body> 
</html>

图像相关标签:

<img.../> 
    src:该属性指定图片的所在的位置 
    alt:作为改图片的提示信息 
    height:该图片的的高度 
    width:该图片的宽度 
    usemap="#mapname" 
 <map.../> 
 <map name=""> 
     <area="" coords="" href=""> 
     <area="" coords="" href=""> 
 </map>

表格相关标签:

<table> 用于定义表格 
    属性:cellpadding :指定单元格内容和单元格边框之间的间距 
          cellspacing :指定单元格之间的间距,该属性可以是像素值也可以是百分比 
          width:表格的宽度 
<caption> 定义表格标题 
<tr> 定义表格行 
<td> 定义单元格 
<th> 定义表格页眉的单元格 
<tbody> 定义表格的主体 
<thead> 定义表格的头 
<tfoot> 定义表格的脚 
    rowspan colspan 两个属性用于定义跨行跨列

框架相关元素:

<iframe src="" width ="" height="">

html5新增的通用属性:

contentEditable属性 
    该属性设置为true,那么浏览器将允许开发者直接编辑该HTML元素里的内容,可以继承,如果一 
个HTML元素的父元素是可编辑的那么子元素默认也是可以编辑的 
designMode 属性 
    相当于一个全局的contentEditable属性,如果把真个页面的designMode属性设置为on时,该页面 
上所有可支持contentEditabe都变成可编辑状态 
hidden属性 
    hiddle设为true,就意味着浏览器不显示该组件,浏览器也不会保留该组件所占用的空间,相当于 
在CSS中设置display:none; 
spellcheck属性 
    设置spellcheck="true"浏览器将会对输入的文本内容执行输入检查

html5新增的常用元素:应用较少,略

html5头部和元信息

<script>该元素用于包含JavaScript脚本 
    链接外部js<script type="text/javascript" src=""> 
<style>用于定义内部CSS样式 
<link>链接外部资源 
    链接外部CSS<link type="text/css" rel="stylesheet" href=""> 
<meta>定义HTML页面的元数据 
    <mata charset="utf-8"> 
    <mata http-equiv="refreash" content="2;URL="http://www.baidu.com">

本文参考链接:https://www.yisu.com/zixun/2341.html
评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Leetcode 2. 两数相加(高精度加法模板)