HTML 常用的标签

2018-07-16  本文已影响0人  hzl的学习小记

这篇文章简单记录了一些html中实用的标签和我学习HTML过程中的笔记
另外对于html的学习,我推荐
https://developer.mozilla.org/zh-CN/
这个网站,遇到想要不懂的标签都可以在这个网站中搜索,网站中会有详细的用法与介绍。

html5基本结构

<!DOCTYPE html>           定义HTML文档类型,此为标准HTML 5的文档声明
 <html lang="en">          定义HTML文档的语言类型
 <head>
 <meta charset="UTF-8">    定义HTML文档字符类型,UTF-8是现在使用最广泛的网页编码
 <title>Document</title>   定义文档的标题
 </head>
 <body>                    浏览器呈现的页面内容
    <header>               页面头部(HTML 5特有标签)
        <h1>HTML 5</h1>    一级标题
    </header>

    <main>                 页面主体(HTML 5特有标签)
    </main>

    <footer>               页脚(HTML 5特有标签)
    </footer>
 </body>
</html>                   HTML文件结束标记


段落

<p>...</p>

用于定义网页中的一段文本,段落与段落之间自动换行。

标题标签

<h1>...</h1>     一级标题
<h2>...</h2>     二级标题
<h3>...</h3>     三级标题
<h4>...</h4>     四级标题
<h5>...</h5>     五级标题
<h6>...</h6>     六级标题

特殊文字标签

<i>...</i> 斜体
<em>...</em> 斜体(强调语气)
<b>...</b> 粗体
<strong>...</strong> 加粗(强调语气)
<kbd>...</kbd> 用来表示文本是从键盘上键入的
<u>...</u> 下划线
<del>...</del> 删除
<sub> 下标
<sup> 上标

<a> 标签

<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

<a href="..." target="_blank">...</a>

download
<a href="文件路径" download="下载时的文件名">链接名称</a>
此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。

href:表示对应链接地址。
target:代表此链接打开方式,默认为本窗口打开,_blank重新打开一个窗口浏览对应链接网站。

ps: <a href="">link</a> 标签被点击后会发生什么?
A:当前页面刷新

<a href="#id名">...</a>“#”代表锚点。在下文标签中加个id名后,当鼠标点击文字,就可以直接跳转至对应的位置。
<a href="#">link</a> 标签被点击后会页面滚动到顶部.

如果我希望写一个<a>标签,并且我希望它不跳转,什么都不做, 我们使用js伪协议
<a href="javascript:;">link</a>

图片

<img src=" " alt=" ">

src:指定图片来源地址

alt:当图片无法显示时的提示文本,同时方便视觉障碍人士阅读本网页。

列表

1 有序列表 <ol> order list 。
用于表示带步骤或者编号的并列内容。
<ol>的直接子元素是<li>,如想嵌套其它元素则只能在<li>标签中
嵌套其它元素。

<ol>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ol>

2,无序列表 <ul> unsort list。

用于表示并列的内容。
<ul>的直接子元素是<li>,如想嵌套其它元素则只能在<li>标签中嵌套其它元素。

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

3,自定义列表

<dl>
   <dt>...</dt> 自定义列表项
       <dd>...</dd> 自定义列表项的解释
       <dd>...</dd> 自定义列表项的解释
   <dt>...</dt> 自定义列表项
       <dd>...</dd> 自定义列表项的解释
       <dd>...</dd>  自定义列表项的解释
</dl>

表格 <table></table>
表格基本结构

<table border=1> 
   <colgroup>
       <col width=100>
       <col width=200>
       <col width=70>
   </colgroup>
   <thead>
    <tr>
            <th>project</th><td>姓名</td><td>班级</td><td>分数</td>
        </tr>
   </thead>
   <tbody>
    <tr>
            <th></th><td>xiaoming</td><td>1</td><td>91</td>
        </tr>

    <tr>
            <th></th><td>xd</td><td>2</td><td>95</td>
        </tr>
    <tr>
            <th>avg</th><td></td><td></td><td>93</td>
        </tr>

   </tbody>
    <tfoot>
    <tr>
            <th>sum</th><td></td><td></td><td>186</td>
        </tr>
   </tfoot>
</table> 

表单<form>...</form>
<form action="users" method="post">
     <input type="text" name="username">
     <input type="password" name="password">
     <input type="submit" value="提交">
</form> 

定义供用户输入的HTML表单(action里面的值是需要提交表单上送地址,method提交方式里面的值只能选择get或post,建议使用post)

<button>button</button> 如果没写type,且form里面只有botton, 自动升级(默认submit)

<label>标签里面的内容,自动跳转到对应的文本框。
(老司机版本)

<form action="users" method="post">
     <lable>username<input type="text" name="username"></lable>
     <lable><input type="password" name="password"></lable>
     喜欢的水果
     <lable><input type="checkbox" name="fruit" value="orange">桔子</lable>
     <lable><input type="checkbox" name="fruit" value="banana">香蕉</lable>
     <lable><input type="radio" name="loveme" value="yes">yes</lable>
     <lable><input type="radio" name="loveme" value="no">no</lable>
     
     <select name="group" multiple>
            <option value="">-</option>
            <option value="1">first</option>
            <option value="2">second</option>
            <option value="3" disabled>third</option>
            <option value="4" selected>fourth</option>
      </select>   
     <lable><input type="submit" value="提交"></lable>
</form> 

name必须写, 否则提交的时候不会带上这个值


参考资料 https://developer.mozilla.org/zh-CN/

上一篇下一篇

猜你喜欢

热点阅读