码迷,mamicode.com
首页 > Web开发 > 详细

html文档结构与常用标签

时间:2020-07-13 18:31:28      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:主页   code   路径   href   读取   aci   cells   doctype   nbsp   

html块标签含样式的标签
<div> 标签 块元素,表示一块内容没有具体的语义
<div>div在html中有着分割的作用,<br />
分割与其他样式的作用,去设置页面的布局和样式,<br />
主要的作用就是包含一个区块,区块夹在div中,<br />
和前后代码隔开,形成一个区块。</div>

<span> 标签 行内元素,表示一行中的一小段内容没有具体的语义
含样式和语义的标签
<em>标签 行内元素 表示语气中的强调词
<i> 标签 行内元素,表示专业词汇
<b> 标签 行内元素 表示文档中的关键字或者产品名
<strong> 标签 行内元素 表示非常重要的内容
html 图像标签
<img> 标签可以在网页上插入一张图片他是独立使用的标签他的常用属性有:
src 属性定义图片的引用地址
alt 属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片盲人读屏软件会读取这个文字让盲人识别图片所以该属性非常重要
html链接标签
<a>标签可以在网页上定义一个链接地址他的常用属性有:
hrel 属性 定义跳转的地址
title 属性 定义鼠标悬停时弹出的提示文字文框
target 属性 定义链接窗口打开的位置
target="_self"缺省值新页面替换原来的页面在原来位置打开
target="_blank"新页面会在新开的一个浏览器窗口打开
<a href="#"></a> <!-- #表示链接到页面顶部-->
<a href="https://music.163.com/" title="跳转的网易云网站">网易云</a>
<a href="2.html" target="_blank">测试页面2</a>
html表格
<table>标签:声明一个表格,他的常用属性如下:
border属性定义表格的边框设置值是数值
cellpadding属性定义单元格内容与边框的距离设置值是数值
cellspacing属性定义单元格与单元格之间的距离设置值是数值
align属性设置整体表格想对于浏览器窗口的水平对齐方式设置值有:left,center,right
<tr>标签:定义表格中的一行
<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格他们的常用属性如:
align设置单元格中内容的水平对齐方式设置值有:left,center,right
valign设置单元格中内容的垂直对齐方式top,middle,bottom
colspan设置单元格水平合并设置值是数值
rowspan设置单元格垂直合并设置值是数值

1,

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>个人主页</title>
</head>

<body>
<!--
html 注释
-->
你好!欢迎访问我的个人主页!
</boby>
</html>

2,

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>个人主页</title>
</head>

<body>
<!--
html 注释
-->
你好!欢迎访问我的个人主页!

<h1>个人主页<h1>

<h2>主题标签二<h2>
<h3>主题标签三<h3>
<h4>主题标签四<h4>
<h5>主题标签五<h5>
<h6>主题标签六<h6>
</boby>
</html>

 

3,

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <h1>html简介</h1>
        <p>&nbsp;&nbsp;&nbsp;"en"是以英文的方式显示!<br />
        &nbsp是空格方式显示 &gt是大于号显示!&lt是小于号显示!!!<br />
        文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言</p>
        <p>7&gt;6</p>
        <p>8&lt;9</p>
</body>
</html>
<!-->
<br />是强制换行
<-->

4,

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>链接</title>

</head>
<body>
        <h1>网页一的标题</h1>
        <a href="网页插入图片.html">跳转到图片的网页</a>

        <a href="https://music.163.com/" title="跳转到网易云网站" target="_blank">
               <img src="绝对路径的.png" alt="网易logo">
        </a>

        <a href="#">缺省链接</a>
</body>
</html>

5,

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>列表标签</title>

</head>
<body>
        <h1>有序列表</h1>
        <ol>
              <li>html</li>
              <li>css</li>
              <li>javascript</li>
         </ol>

         <h1>无序列表</h1>
         <ul>
               <li><a herf="#">新闻标题一</a></li>
               <li><a herf="#">新闻标题二</a></li>
               <li><a herf="#">新闻标题三</a></li>
         </ul>
         <h1>定义列表</h1>
         <dl>
               <dt>html</dt>
               <dd>负责页面结构</dd>
               <dt>css</dt>
               <dd>负责页面的表现</dd>
                <dt>javascript</dt>
               <dd>负责页面的行为</dd>
         </dl>
</body>
</html>

6,

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>网页插入图片</title>
</head>
<body>
        <h2>图片</h2>
        <!-- 完整的写法是:src="./images/002.jpg"  ./ 表示当前目录 -->
        <img src="文件名.jpg"  alt="水果图片" />
        # <img alt="水果图片" />
</body>
</html>

7,

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>表格</title>
</head>
<body>
        <h1>表格</h1>
        <table border="1" width="800" height="300" align="center">
                <tr>
                     <th>1</th>
                     <th>2</th>
                     <th>3</th>
                </tr>

                <tr>
                     <td align="center">1</td>
                     <td align="center">2</td>
                     <td align="center">3</td>
                </tr>
                 
                 <tr>
                     <td valign="top" align="center">1</td>
                     <td>2</td>
                     <td>3</td>
                </tr>

                <tr>
                     <td>1</td>
                     <td>2</td>
                     <td>3</td>
                </tr>
                 

         </table>
         <br />

         <table border="1" width="800" height="200" align="center">
                 <tr>
                      <td colspan="5">基本情况</tb>
                  </tr>
                   <tr>
                      <td width="20%"></tb>
                      <td width="20%"></tb>
                      <td width="20%"></tb>
                      <td width="20%"></tb>
                      <td rowspan="5"><img src="images/绝对路径.png" alt="人物图片"></tb>
                   </tr>
                      <tr>
                      <td></tb>
                      <td></tb>
                      <td></tb>
                      <td></tb>
                     
                   </tr>
                      <tr>
                      <td></tb>
                      <td></tb>
                      <td></tb>
                      <td></tb>
                 
                    </tr>
                   
</body>
</html>

 

html文档结构与常用标签

标签:主页   code   路径   href   读取   aci   cells   doctype   nbsp   

原文地址:https://www.cnblogs.com/laochun/p/13294582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!