html文档结构与常用标签

2021-01-21 09:14

阅读:707

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

html块标签含样式的标签

标签 块元素,表示一块内容没有具体的语义
div在html中有着分割的作用,

分割与其他样式的作用,去设置页面的布局和样式,

主要的作用就是包含一个区块,区块夹在div中,

和前后代码隔开,形成一个区块。

标签 行内元素,表示一行中的一小段内容没有具体的语义
含样式和语义的标签
标签 行内元素 表示语气中的强调词
标签 行内元素,表示专业词汇
标签 行内元素 表示文档中的关键字或者产品名
标签 行内元素 表示非常重要的内容
html 图像标签
标签可以在网页上插入一张图片他是独立使用的标签他的常用属性有:
src 属性定义图片的引用地址
alt 属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片盲人读屏软件会读取这个文字让盲人识别图片所以该属性非常重要
html链接标签
标签可以在网页上定义一个链接地址他的常用属性有:
hrel 属性 定义跳转的地址
title 属性 定义鼠标悬停时弹出的提示文字文框
target 属性 定义链接窗口打开的位置
target="_self"缺省值新页面替换原来的页面在原来位置打开
target="_blank"新页面会在新开的一个浏览器窗口打开

网易云
测试页面2
html表格

标签:声明一个表格,他的常用属性如下:
border属性定义表格的边框设置值是数值
cellpadding属性定义单元格内容与边框的距离设置值是数值
cellspacing属性定义单元格与单元格之间的距离设置值是数值
align属性设置整体表格想对于浏览器窗口的水平对齐方式设置值有:left,center,right
标签:定义表格中的一行
标签:定义一行中的一个单元格,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>

你好!欢迎访问我的个人主页!
boby>
html>

2,

DOCTYPE html>
html>

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

body>

你好!欢迎访问我的个人主页!

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>Documenttitle>
head>
body>
        h1>html简介h1>
        p>   "en"是以英文的方式显示!br />
        &nbsp是空格方式显示 &gt是大于号显示!&lt是小于号显示!!!br />
        文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言p>
        p>7>6p>
        p>8<9p>
body>
html>

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>htmlli>
              li>cssli>
              li>javascriptli>
         ol>

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

6,

DOCTYPE html>
html lang="en">
head>
        meta charset="UTF-8">
        title>网页插入图片title>
head>
body>
        h2>图片h2>
        
        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>1th>
                     th>2th>
                     th>3th>
                tr>

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

                tr>
                     td>1td>
                     td>2td>
                     td>3td>
                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


评论


亲,登录后才可以留言!