初识HTML(HTML常用元素用法总结一)

1. 基本格式

<!DOCTYPE html> //文档类型声明
<html lang="zh-cn"> //表示 HTML 文档开始,设置语言为中文
<head> //包含文档元数据开始
    <meta charset="utf-8"> //声明字符编码
    <title>基本结构</title> //设置文档标题
</head> //包含文档元数据结束
<body> //表示 HTML 文档内容
    //页面内容主体
</body> //表示 HTML
</html> 

PS:
路径问题:
    1.  绝对路径:首先是 file:///开头,然后是磁盘符,然后是一个个的目录层次,找到相应文件。这种方式最致命的问题是,当整个目录转移到另外的盘符或其他电脑时,目录结构一旦出现任何变化,链接当即失效。
    2. 相对路径:相对路径的条件是必须文件都在一个磁盘或目录下,如果是在同一个目录下, 直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下,有多个子目录层次,那就需要使用目录结构语法。  
    3. 路径语法:
        同一个目录:test.html 或./test.html;
        在子目录:xxx/test.html;
        在孙子目录:xxx/xxx/test.html;
        在父目录:../test.html;
        在爷爷目录:../../test.html;

2. 常用标签

<a>超链接标签<a/>

<b>标记一段文字但不强调</b>

<strong>表示重要</strong>

<p>段落标签</p>

<div>通用分组标签</div>

<hr添加一条分割线>

<blockquote>大段的来自他出的内容</blockquote>

<pre>格式应该保留的内容</pre>

<ul>无序列表</ul>
<ol>有序列表</ol>
<li>ul,ol中的列表项</li>

<dl>生成说明列表</dl>
<dt>说明列表的标题</dt>
<dd>说明列表的详细内容</dd>

<figsure>用于插入图片</figsure>
<figcaption>为figsure的图片添加标题/figcaption>

<table>表格标签</table>

<thead>标题行标签</thead>

<tbody>表格主体标签</tbody>

<tfoot>表脚标签</tfoot> 

<tr>一行单元格标签</tr>

<th>标题行单元格标签</th>

<td><td> 表示单元格

<col>列bioaqian </col>

<colgroup>一组列标签</colgroup>

<caption>表格标题</caption> 

<wbr>可安全换行<wbr>

<i>表示外文或是科学术语</i>

<em>表示强调</em>

<s>表示文字已不再确认</s>

<del>表示被删除的文字</del>

<u>表示给文字加上下划线</u>

<ins>添加一段文本表示强调作用</ins>

<small>添加小号字体的文本</small>

<sub>添加下标</sub>

<sup>添加上标</sup>

<code>表示计算机代码片段</code>

<var>表示编程语言中的变量</var>

<samp>表示程序或者是计算机的输出</samp>

<kdb>表示用户的输入,英文状态有效</kdb>

<abbr>表示一段文本的缩写</abbr>

<dfn>表示定义术语</dfn>

<q>表示引自他处的内容</q>

<cite>表示其他作品的标题</cite>

//注音标签,可以在文字上边标注拼音  
<ruby>
    饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
    餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>


<bdo dir="rtl">指定文字方向</bdo> 教程<br>

<mark>表示另一段与上下文有关的内容</mark> 教程<br>

<time>定义时间和日期</time>

<span>定义文档中的一节</span>

3.常见标签的属性和用法

超链接标签—a:

        属性名:
        href         指定<a>元素所指资源的 URL
        hreflang     指向的链接资源所使用的语言
        media        说明所链接资源用于哪种设备
        rel          说明文档与所链接资源的关系类型
        target       指定用以打开所链接资源的浏览环境
        type         说明所链接资源的 MIME 类型(比如 text/html)

栗子:
href属性:
<a href="http://blog.csdn.net/wqc_csdn">我的博客</a>"

target属性:
//在新的空白页打开页面
<a href="http://blog.csdn.net/wqc_csdn" target="_blank>我的博客</a>

_black            在新窗口或标签页中打开文档
_parent           在父窗框组(frameset)中打开文档
_self             默认值,在当前窗口打开文档
_top              在顶层窗口打开文档 

锚点设置:

    //链接
    <a href="#1">第一</a> 
    <a href="#2">第二</a>
    <a href="#3">第三</a>
    //锚点
    <a name="1"></a> 
    <a id="3"></a>

有序列表—ol:

        属性名:
        start     从第几个序列开始统计
        reversed  是否倒序排列
        type      表示列表的编号类型:1(数字)、a(小写字母)、A(大写字母)、i(小写罗马数字)、I(大写罗马数字)

附:w3c中关于HTML5的说明文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值