HTML结构

由 张泽祥 创建,Loen 最后一次修改 2017-08-14

HTML的结构一般包括<html><head><body>,一般包括html文档、head头部、body身体,很多个html文档页面就是网站。

<!DOCTYPE html>     <!--文档类型 html-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>我是页面标题</title>
    </head>
    <body>
        正文
    </body>
</html>

文本

#段落
正文标题 <h1></h1> 到 <h6></h6>
段落 <p>直接写</p>
换行 <br>

#特殊符号
时间   <time>9:00</time>
时间   <time datetime="2016-02-14">情人节</time>
下划线  <u> </u>

删除线 <del> </del>

上标   <sup> </sup>
下标   <sub> </sub>
联系地址 <address> </address>

水平线 <hr>
注释  <!-- 这是注释 -->

版权号 ©
注册商标 ®
&   ";
<   ⁢
>   >
宽度、随着值变化   Width 
像素绝对值、越大线越粗  Size  

被CSS了的
空格   
左对齐  <p align=“Left”>…</p>
居中    <p align=“Center”>…</p>
右对齐  <p align=“Right”>…</p>
加粗     <b> </b>
加语气   <strong> </strong>
倾斜     <i> </i>
缩小     <small> </small>
单句引用 <q>  </q>
多句引用 <blockquote> </blockquote>

#列表
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>

<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>

#代码标签
防止浏览器误认为是要执行代码
单行<code></code>
多行<pre></pre>

#跳转标签
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

表格

#table标签、tbody标签  
table标签表示表格,tbody标签用它来将表格分段,可以一部分一部分的显示 
tr表示一行
th表示行内表头
td表示行内表数据

border="1" 表格边框大小
<table>
    <tbody>
      <tr> <th>表格标题</th> <th>表格标题</th> </tr>
      <tr> <td>表格数据</td> <td>表格数据</td> </tr>
    </tbody>
</table>

#摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<table summary="表格简介文本">

#标题
用以描述表格内容,标题的显示位置:表格上方。
<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>

</table>

#表格边框
<style type="text/css">
    table tr td,th{
           border:1px solid #000;
    }           

</style>

超链接

#<a></a>标签
使用a标签可实现超链接
<a href="http://zhimiyun.com">外部链接</a>
<a href="/html">本地链接</a>
<a href="/html"  target="_blank">新窗口打开</a>

导航链接
<nav>  
  <a href="/html/">HTML</a>|<a href="/css/">CSS</a>|     
</nav>

图片链接
相当于将图片标记语言放在了超链接下面
<a href="https://www.w3cschool.cn"> <img src="images\xxgk.jpg" alt="loge" width="258" height="39" /></a>

<mailto>标签
使用mailto能让访问者便捷向网站管理者发送电子邮件
用mailto做许多其它事情。下面一一进行讲解,请看详细图示:
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
<a herf="mailto:yy@imooc.com?subject=我是邮件主题。&body=我是邮件内容。">对此影评有何感想,发送邮件给我</a>
<a href="mailto:425389019@qq.com">邮件链接</a>

图片

#<img>标签
用来插入图片
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。

静态图片    
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<img src="images\xxgk.jpg" alt="loge" width="258" height="39" />

背景图片    
<body background=images\bg.jpg>

音乐视频

音乐
定义了mp3与ogg两个格式
<audio controls loop>
  <source src="music/大王叫我来巡山.MP3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
</audio>

视频
<video width="320" height="240" controls>
  <source src="video/鹬.mp4"  type="video/mp4">
</video>
<embed src='http://player.youku.com/player.php/sid/XMjg2NjYzNzc1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

表单

<form></form>标签
使用表单标签,与用户交互,网站怎样与用户进行交互?答案是使用HTML表单(form)表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

method:数据传送的方式(get/post),post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的wiki,里面有详细介绍。
action:服务器文件,浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

type: 表单样式,文本框text   密码框password  单选框radio  复选框checkbox   多行文本框comment  
name:为文本框命名,以备后台程序ASP 、PHP使用。
value:为文本输入框设置默认值。(一般起到提示作用)
placeholder:框内的提示符

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

    <form  action="save.php" method="post"  >
        账户: 
        <input type="text" name="myName"  value="zhangzexiang"  placeholder='请输入账号'>
        密码: 
        <input type="password" name="pass">

         <input type="submit" value="提交"  name="submit" />
         <input type="reset" value="重置" name="reset" />

    </form> 

多行文本框:
<textarea  rows="行数" cols="列数">文本</textarea>

    <form  action="save.php" method="post" >
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    </form>

单选框:
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>

复选框:
1、type:当 type="radio" 时,控件为单选框,当 type="checkbox" 时控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

        <form action="save.php" method="post" >
             <label>性别:</label>
             <label>男</label>
             <input type="radio" value="1"  name="gender" />
             <label>女</label>
            <input type="radio" value="2"  name="gender" />
        </form>

下拉框
selected="selected":
设置selected="selected"属性,则该选项就被默认选中。
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select>
          <option value="看书">看书</option>
          <option value="旅游" selected="selected">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
    </form>

multiple="multiple"让下拉框多选
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select multiple="multiple">
          <option value="看书">看书</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
    </form>

<form>
<select>
<option>房子</option>
<option>车子</option>
<option selected>永久生命</option>      <!-- selected>Fiat 是预选按钮  -->
<option value="钱">金钱</option>
<input type="reset" value="重置">
</select>
</form>

form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<form action="save.php" method="post">
  <label>你对什么运动感兴趣:</label><br />
  <label for="mal">慢跑</label>
  <input type="checkbox" name="慢跑" id="mal"/><br />
  <label for="mal">登山</label>
  <input type="checkbox" name="登山" id="mal"/><br />
  <label for="mal">篮球</label>
  <input type="checkbox" name="篮球" id="mal"/><br />
</form>
以上内容是否对您有帮助:
二维码
建议反馈
二维码