文档章节

HTML基础总结

Banana2333
 Banana2333
发布于 2017/04/09 10:39
字数 1957
阅读 4
收藏 0

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

 

1、HTML基本结构

<html>
    <head>
      
    </head>

    <body>

    </body>
</html>

 

2、title标签(<title>....</title>)

<html>
    <head>
        <title>标签</title> <!--网页的标题信息,它会出现在浏览器的标题栏中-->
    </head>
    
    <body>

    </body>
</html>

 

3、代码注释(<!--....-->)

<html>
    <head>
        
    </head>

    <body>
        <!--注释文字-->
    </body>
</html>

 

4、段落标签(<p>....</p>)

<html>
    <head>

    </head>

    <body>
        <p>段落一</p>
        <p>段落二</p>
    </body>
</html>

 

5、标题标签(<hx>....</hx>)

<html>
    <head>

    </head>

    <body>
        <h1>一级标题</h1>   <!--一级标题级别最高-->
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>

    </body>
</html>

 

6、强调语气标签(<em>....</em> or <strong>....</strong>)

<html>
    <head>

    </head>

    <body>
        <em>219.00</em>    <!--强调 默认斜体表示-->
        <strong>219.00</strong>    <!--更强烈的强调 默认粗体表示-->

    </body>
</html>

 

7、设置单独样式标签(<span>....</span>)

<html>
    <head>
       <style>
          span{
            color:blue;
             }
       </style>
    </head>

    <body>
        <p>Hello World!</p>
        <p><span>Hello Stranger!</span></p>

    </body>
</html>

 

8、短文本引用标签(<q>....</q>)

<html>
    <head>

    </head>

    <body>
        <p>Hello World!</p>
        <q>Hello Stranger!</q>
    </body>
</html>

 

9、长文本引用标签(<blockquote>....</blockquote>)

<html>
    <head>

    </head>

    <body>
       <blockquote>青青园中葵,朝露待日晞。阳春布德泽,万物生光辉。常恐秋节至,焜黄华叶衰。百川东到海,何时复西归,少壮不努力,老大徒伤悲!</blockquote>
    </body>
</html>

 

10、分行显示文本标签(<br />)

<html>
    <head>

    </head>

    <body>
       <p>青青园中葵,<br />朝露待日晞。<br />阳春布德泽,<br />万物生光辉。<br />常恐秋节至,<br />焜黄华叶衰。<br />百川东到海,<br />何时复西归,<br />少壮不努力,<br />老大徒伤悲!</p>
    </body>
</html>

 

11、空格标签(&nbsp;)

<html>
    <head>

    </head>

    <body>
       <p>Hello       World!</p> <!--无论多少个空格,只显示一个-->
       <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World!</p> <!--有多少个空格,就显示多少个-->
    </body>
</html>

 

12、添加水平横线标签(<hr />)

<html>
    <head>

    </head>

    <body>
       <p>Hello World!</p>
       <hr />
       <p>Hi Stranger!</p>
    </body>
</html>

 

13、地址信息标签(<address>...</address>)

<html>
    <head>

    </head>

    <body>
       <address>联系地址:深圳市罗湖区</address>
    </body>
</html>

 

14、代码标签(<code>....</code> or <pre>....</pre>)

<html>
    <head>

    </head>

    <body>
       <code>print 'a + b =',1+2</code>  <!--短代码用<code>....</code>  长代码用<pre>....</pre>-->
       <pre>#include <stdio.h><br />int main()<br />{<br />&nbsp&nbsp&nbsp&nbspint&nbspa,b = 3;<br />&nbsp&nbsp&nbsp&nbspprintf("a + b = %i",a+b);<br />&nbsp&nbsp&nbsp&nbspreturn 0;<br />} </pre>
    </body>
</html>

 

15、无顺序信息列表标签(<ul>....<li>....</li>....</ul>)

<html>
    <head>

    </head>

    <body>
       <ul>
         <li>列表一</li>
         <li>列表二</li>    <!--无前后顺序-->
         <li>列表三</li>
         <li>列表四</li>
       </ul>
    </body>
</html>

 

16、有顺序信息列表标签(<ol>....<li>....</li>....</ol>)

<html>
    <head>

    </head>

    <body>
       <ol>
         <li>列表一</li>
         <li>列表二</li>    <!--有顺序列表-->
         <li>列表三</li>
       </ol>
    </body>
</html>

 

17、排版标签(<div>....</div>)

<html>
    <head>

    </head>

    <body>
       <div>栏目一</div>
       <ol>
         <li>QQ1.0</li>
         <li>QQ2.0</li>
         <li>QQ3.0</li>                        
       </ol>

        <div id = "GAME">栏目二</div>    <!--div后的 id = "xxx" 为独立板块唯一命名-->
        <ol>
          <li>传奇</li>
          <li>泡泡堂</li>
          <li>梦幻西游</li>
        </ol>
    </body>
</html>

 

18、表格标签(<table>....</table>)

表格摘要    <table summary = "xxxxxx">

表格标题     <caption>....</caption>

表格的四个元素

<table>....</table>    整个表格以<table>开始,以</table>结束

<tbody>....</tbody>   当表格内容非常多,表格会下载一点显示一点,若加上<tbody>....</tbody>则会等全部表格内容下载完后再显示

<tr>....</tr>    表格的一行,有几行就有几对

<td>....</td>    表格的一个单元格

<th>....</th>    表格表头

<html>
    <head>

    </head>

    <body>
       <caption>课程表</caption>       <!--<caption>....</caption> 表格标题-->
       <table summary = "这是课程表">      <!--<table summary = "xxxx"> 表格摘要,并不会显示-->
       <table>
        <tr>
         <th>星期一</th>
         <th>星期二</th>
         <th>星期三</th>                  
         <th>星期四</th>                        
         <th>星期五</th>
         <th>星期六</th>
         <th>星期日</th>
        </tr>

        <tr>
         <td>语文</td>
         <td>数学</td>
         <td>英语</td>
         <td>物理</td>
         <td>化学</td>
         <td>生物</td>
         <td>体育</td>
        </tr>

       </table>
    </body>
</html>

 

19、超链接(<a href = "目标网址" title = "鼠标滑过显示的文本">链接显示文本</a>)

<a href = "目标网址" title = "鼠标滑过显示的文本">链接显示文本</a>    原窗口打开
<a href = "目标网址" target = "_blank">链接显示文本</a>       新窗口打开
<a href = "mailto:xxx@163.com">发送</a>          链接Email地址

 

<html>
    <head>

    </head>

    <body>
       <a href = "https://my.oschina.net/u/2533215/blog" title = "有毒">有种不要点我!</a>
       <a href = "https://my.oschina.net/u/2533215/blog" target = "_blank">点我点我!</a>
       <a href = "mailto:xxx@163.com">发送</a>
    </body>
</html>

 

20、插入图片标签(<img src = "图片地址" alt = "下载失败时的替换文本" title = "提示文本" />)

src    标识图像的位置

alt    指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本

title    提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)

<html>
    <head>

    </head>

    <body>
       <img src = "https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=b5ef6c0e044f78f0940692a118586130/29381f30e924b899e7038b6269061d950a7bf6a9.jpg" alt = "Image" title = "盖尔·加朵"/>
    </body>
</html>

 

21、表单标签(<form method = "get/post" action = "服务器文件">....</form>)

输入框    <input type = "text/password" name = "名称" value = "文本">

type若为text 则为文本输入框(账号),password则为密码输入框(密码)

name为文本框命名,为后台程序asp、PHP使用

value为文本输入框设置默认值。(提示作用)

<html>
    <head>

    </head>

    <body>
       <form method = "post" action = "save.php">
       <input type = "text" name = "name" value = "请输入账号..."/>   <!--文本框默认 请输入账号...-->
       <input type = "password" name = "password"/>
       </form>
         
    </body>
</html>

 

22、文本域标签(<textarea rows = "行数" cols = "列数">文本</textarea>)

cols    多行输入域的列数

rows    多行输入域的行数

<html>
    <head>

    </head>

    <body>
       <textarea rows = "5" cols = "10">请输入内容...</textarea>   <!--文本框默认内容 请输入内容...-->
    </body>
</html>

 

23、单选框、复选框标签(<input type = "radio/checkbox" value = "值" name = “名称” checked = "checked" />)

type为radio是为单选框,checkbox为复选框

value为提交数据到服务器的值

name为控件命名

checked当设置checked = "checked"时,该选项被默认选中

<html>
    <head>
                             <!--喜欢为默认选项,同一组单选按钮,name取值一定要一致!!!-->
    </head>

    <body>      
       喜欢:<input type = "radio" value = "喜欢" name = "radioLove" checked = "checked"/>
       不喜欢:<input type = "radio" value = "不喜欢" name = "radioLove"/>
       你猜:<input type = "radio" value = "你猜" name = "radioLove"/>
       <br />
                             <!--喜欢、你猜为默认选项-->
       喜欢:<input type = "checkbox" value = "喜欢" name = "radioLove" checked = "checked"/>
       不喜欢:<input type = "checkbox" value = "不喜欢" name = "radioLove"/>
       你猜:<input type = "checkbox" value = "你猜" name = "radioLove" checked = "checked"/>
    </body>
</html>

 

24、下拉列表框(<select>....<option value = "向服务器提交的值">显示的值</option>....</select>)

若设置selected = "selected",则该选项被默认选中

在<select>标签中设置multiple = "multiple" 可实现多选

<html>
    <head>

    </head>

    <body>
      <select>  <!--单选-->
        <option value = "星期一">星期一</option>
        <option value = "星期二">星期二</option>
        <option value = "星期三">星期三</option>
        <option value = "星期四" selected = "selected">星期四</option>  <!--星期四被默认选中-->
        <option value = "星期五">星期五</option>
        <option value = "星期六">星期六</option>
        <option value = "星期七">星期七</option>
      </select>
      <br />
      <br />
      <select multiple = "multiple">    <!--多选,windows按CTRL+单击-->
        <option value = "星期一">星期一</option>
        <option value = "星期二">星期二</option>
        <option value = "星期三">星期三</option>
        <option value = "星期四" selected = "selected">星期四</option>  <!--星期四被默认选中-->
        <option value = "星期五">星期五</option>
        <option value = "星期六">星期六</option>
        <option value = "星期七">星期七</option>
      </select>
    </body>
</html>

 

25、提交、重置按钮标签(input type = "submit/reset" value ="显示文本")

type为submit时为提交,reset为重置

<html>
    <head>

    </head>

    <body>
       <input type = "submit" value = "提交">
       <br />
       <br />
       <input type = "reset" value = "重置">
    </body>
</html>

 

26、label标签(label for = "控件id名称")

点击文本会自动将焦点转到相应表单控件上

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<html>
    <head>

    </head>

    <body>
       <label for = "man">男</label>
       <input type = "radio" name = "gender" id = "man"/>
       <br />
       <label for="woman">女</label>
       <input type = "radio" name = "gender" id = "woman"/>
    </body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
Banana2333
粉丝 3
博文 5
码字总数 5902
作品 0
深圳
程序员
私信 提问
标签之美一——HTML基础元素

标签之美--HTML基础标签使用总结 HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下: 1、<html></html> 任何HTML文件都会有这样一个标签,标记网页的开始和结束。...

珲少
2015/05/06
0
0
JavaScript基础(javascript实现)

写在前面,最近研究python爬虫,基础的没问题,可是到模拟登录着一块之后已知没有什么进展。发现还是要回来把js好好的学一遍才行,因此这几天先把js基础全都看完了,以下只是自己在学习js基础...

开源中国段子手
2016/01/14
63
0
WebView与JS的交互

上一篇介绍了WebView的基础用法,可以移步下面的链接 WebView的基础用法 下面进入今天的正题 WebView与JS的交互 1.Android调用JS里面的方法 html文件如下 callJS里面有2句代码 1调用alter()...

tmyzh
2018/01/03
0
0
Webpack轻松入门(四)——HTML打包

到目前为止,有关Webpack最基础的内容差不多已经讲完了,其中包括Webpack运行的基本流程、CSS的打包和图片的打包,也就是说,当你掌握这几节之后,基本上就能像以前不用Webpack时一样愉快地写...

璿而不华
2018/06/18
0
0
学习前端开发,一段心路历程,这根本没有速成的方法

     本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们总结成了十条警言,希望能够对你的学习带来一些小的帮助。            希望收藏了我写的文章的你同...

学习web前端
2017/10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux iptables之mangle表使用案例

mangle表的用途 mangle表的主要功能是根据规则修改数据包的一些标志位,以便其他规则或程序可以利用这种标志对数据包进行过滤或策略路由。 mangel表使用示例 示例1-策略路由1 内网的客户机通...

月下狼
今天
3
0
OSChina 周日乱弹 —— 兼职我想去学学布偶戏

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy : 《火炎 - 女王蜂》 《火炎 - 女王蜂》 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁 :还在睡觉突然接到一个小哥哥电话“x...

小小编辑
今天
82
5
租房软件隐私保护如同虚设

近日,苏州市民赵先生向江苏新闻广播新闻热线025-84658888反映,他在“安居客”手机应用软件上浏览二手房信息,并且使用该软件自动生成的虚拟号码向当地一家中介公司进行咨询。可电话刚挂不久...

linux-tao
今天
3
0
分布式项目(五)iot-pgsql

书接上回,在Mapping server中,我们已经把数据都整理好了,现在利用postgresql存储历史数据。 iot-pgsql 构建iot-pgsql模块,这里我们写数据库为了性能考虑不在使用mybatis,换成spring jd...

lelinked
今天
6
0
一文分析java基础面试题中易出错考点

前言 这篇文章主要针对的是笔试题中出现的通过查看代码执行结果选择正确答案题材。 正式进入题目内容: 1、(单选题)下面代码的输出结果是什么? public class Base { private Strin...

一看就喷亏的小猿
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部