search
HomeWeb Front-endHTML TutorialHTML标签图文详解（二）_html/css_WEB-ITnose

HTML标签图文详解（二）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:35 AM

HTML标签超详细的图文演示再来一波~~~

如果还没有看过昨天的福利的，那可要抓紧喽，传送门：HTML标签----图文详解

本文主要内容

  • 清单标签
  • 表格标签
  • 框架标签及内嵌框架
  • 表单标签及语义化
  • 多媒体标签

    • 清单标签（列表标签）

    列表标签分为三种。

    1、无序列表
      ，无序列表中的每一项是

    英文单词：un list。
    例如：

    <ul>	<li>默认1</li>	<li>默认2</li>	<li>默认3</li></ul>

    效果：

    属性：

  • type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。
    效果如下：

    • 不光是

      标签有type属性，
        里面的
      • 标签也有type属性（虽然说这种写法很少见）。效果如下：


        2、有序列表
          ，里面的每一项是

        英文单词：Order List。
        例如：

        <ol >		<li>呵呵哒1</li>	<li>呵呵哒2</li>	<li>呵呵哒3</li></ol>

        效果：

        属性：

      • type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

        • 举例：

        <ol type="1">		<li>呵呵</li>	<li>呵呵</li>	<li>呵呵</li></ol><ol type="a">		<li>嘿嘿</li>	<li>嘿嘿</li>	<li>呵呵</li></ol><ol type="i" start="4">		<li>哈哈</li>	<li>哈哈</li>	<li>哈哈</li></ol><ol type="I" start="10">		<li>么么</li>	<li>么么</li>	<li>么么</li></ol>

        效果如下：

        3、定义列表

        英文单词：define list，没有属性。

      • ：列表的标题，define title
      • ：列表的列表项

        • 举例：

        <dl>	<dt>第一条</dt>	<dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>	<dd>我会让你明白，我从不说空话</dd>	<dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>	<dt>第二条</dt>	<dd>良辰最喜欢对那些自认能力出众的人出手</dd>	<dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>	<dd>你只要记住，我叫叶良辰</dd>	<dd>不介意陪你玩玩</dd>	<dd>良辰必有重谢</dd></dl>

        效果：

        表格标签

        表格标签用

        表示。
        一个表格
        是由每行组成的，每行是由
        组成的。
        所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
        在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。

        例如，一行的单元格：

        	<table>		<tr>			<td></td>			<td></td>			<td></td>			<td></td>		</tr>	</table>

        上面的表格中没有加文字，所以在生成的网页中什么都看不到。
        例如，3行4列的单元格：

        	<table>		<tr>			<td>生命壹号</td>			<td>23</td>			<td>男</td>			<td>黄冈</td>		</tr>		<tr>			<td>许嵩</td>			<td>29</td>			<td>男</td>			<td>安徽</td>		</tr>		<tr>			<td>邓紫棋</td>			<td>23</td>			<td>女</td>			<td>香港</td>		</tr>	</table>

        效果：

        上图中的表格好像没看到边框呀，不急，接下来看看

        标签的属性。

        的属性：
      • border：边框。像素为单位。
      • width：宽度。像素为单位。
      • height：高度。像素为单位。
      • align：表格的对齐方式。属性值可以填：left right center。
        注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签
        • ：行

        一个表格就是一行一行组成的嘛。
        属性：

      • dir：共有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
      • bgcolor：设置这一行的单元格的背景色。
        注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。


      • 属性：align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
        效果：

        • 表格的

        标签、标签、标签

        这三个标签有与没有的区别：

      • 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
      • 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

        • 举例：

         <body>	<table border="1">		<tbody>		<tr>			<td>生命壹号</td>			<td>23</td>			<td>男</td>			<td>黄冈</td>		</tr>		</tbody>		<tfoot>		<tr>			<td>许嵩</td>			<td>29</td>			<td>男</td>			<td>安徽</td>		</tr>		</tfoot>		<thead>		<tr>			<td>邓紫棋</td>			<td>23</td>			<td>女</td>			<td>香港</td>		</tr>		</thead>	</table> </body>

        效果：

        框架标签

        如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。

      • 注意，框架标签不能放在标签里面，因为标签代表的只是一个页面，而框架标签代表的是多个页面。
      • 框架的集合用表示，然后在集合里放入一个一个的框架

        • ：框架的集合

        一个框架的集合可以包含多个框架或框架的集合。
        属性：

      • rows：水平分割，将框架分为上下部分。写法有两种：
        1、绝对值写法：rows="200,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
        2、相对值写法：rows="30%,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
        注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。

      • cols：垂直分割，将框架分为左右部分。写法有两种：
        1、绝对值写法：cols="200,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
        2、相对值写法：cols="30%,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
        注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。

        • 效果：

        上图中，如果删掉页面right.html，显示效果如下：

        ：框架

        一个框架显示一个页面。
        属性：

      • scrolling="no"：是否需要滚动条。默认值是true。
      • noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。

        • 举例：

        <frame src="top.html" noresize></frame>
      • bordercolor="#00FF00"：给框架的边框定义颜色。这个属性在框架集合中同样适用。
        颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。

      • frameborder="0"或frameborder="1"：隐藏或显示边框。

      • name：给框架起一个名字。
        利用name这个属性，我们可以在框架里进行超链。
        举例：

        • 效果：

        内嵌框架

        内嵌框架用

      • src="subframe/the_second.html"：内嵌的那个页面
      • width=800：宽度
      • height=“150：高度
      • scrolling="no"：是否需要滚动条。默认值是true。
      • name="mainFrame"：窗口名称。公有属性。

        • 效果：

        内嵌框架举例：（在内嵌页面中切换显示不同的压面）

         <body> 	<a href="文字页面.html" target="myframe">默认显示文字页面</a><br> 	<a href="图片页面.html" target="myframe">点击进入图片页面</a><br> 	<a href="表格页面.html" target="myframe">点击进入表格页面</a><br> 	<iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe> 	<br> 	嘿嘿 </body>

        效果演示：

        表单标签

        表单标签用

        表示，用于与服务器的交互。

        ：输入标签

        用于接收用户输入。
        属性：

      • type="属性值"：文本类型。属性值可以是：
        text（默认）
        password：密码类型
        radio：单选按钮，名字相同的按钮作为一组进行单选
        checkbox：多选按钮，名字相同的按钮作为一组进行选择
        hidden：隐藏框，在表单中包含不希望用户看见的信息
        button：普通按钮，结合js代码进行使用。
        submit：提交按钮，传送当前表单的数据给服务器或其他程序处理
        reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
        image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
        file：文件选择框

      • value="内容"：文本框里面的内容
      • size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
        注意size属性值的单位不是像素哦。
      • readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
        用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
      • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

      • checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。

        • 举例：

        	<form>		姓名：<input value="呵呵" >逗比<br>		昵称：<input value="哈哈" readonly=""><br>		名字：<input type="text" value="name" disabled=""><br>		密码：<input type="password" value="pwd" size="50"><br>		性别：<input type="radio" name="gender" value="male" checked="">男 			  <input type="radio" name="gender" value="female" >女<br>		爱好：<input type="checkbox" name="love" value="eat">吃饭			  <input type="checkbox" name="love" value="sleep">睡觉			  <input type="checkbox" name="love" value="bat">打豆豆	</form>

        效果：

        四种按钮的举例：

        	<form>		<input type="button" value="普通按钮"><br>		<input type="submit"  value="提交按钮"><br>		<input type="reset" value="重置按钮"><br>		<input type="image" value="图片按钮1"><br>		<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>		<input type="file" value="文件选择框">	</form>

        效果：

      • multiple：可以对下拉列表中的选项进行多选。没有属性值。
      • size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

      • selected：预选中。没有属性值。

        • 举例：

        	<form>		<select>			<option>小学</option>			<option>初中</option>			<option>高中</option>			<option>大学</option>			<option selected="">研究生</option>		</select>		<br><br><br>		<select size="3">			<option>小学</option>			<option>初中</option>			<option>高中</option>			<option>大学</option>			<option>研究生</option>		</select>		<br><br><br>		<select multiple="">			<option>小学</option>			<option>初中</option>			<option selected="">高中</option>			<option selected="">大学</option>			<option>研究生</option>		</select>		<br><br><br>	</form>

        效果：

        标签：多行文本输入框

        属性：

      • value：提交给服务器的值。
      • rows="4"：指定文本区域的行数。
      • cols="20"：指定文本区域的列数。
      • readonly：只读。

        • 举例：

        	<form>		<textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>	</form>

        效果：

        上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。


        表单的语义化

        比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
        举例：

        	<form>		<fieldset>		<legend>账号信息</legend>		姓名：<input value="呵呵" >逗比<br>		密码：<input type="password" value="pwd" size="50"><br>		</fieldset>		<fieldset>		<legend>其他信息</legend>		性别：<input type="radio" name="gender" value="male" checked="">男 			  <input type="radio" name="gender" value="female" >女<br>		爱好：<input type="checkbox" name="love" value="eat">吃饭			  <input type="checkbox" name="love" value="sleep">睡觉			  <input type="checkbox" name="love" value="bat">打豆豆		</fieldset>	</form>

        效果：

        标签：for属性配合id一起用形成标注。暂略。

        多媒体标签

        标签：播放背景音乐

        属性：

      • src="音乐文件的路径"
      • loop="-1"：属性值代表播放次数，-1代表循环播放。

        • 举例：

         <body>	<bgsound src="王菲 - 清风徐来.mp3"></bgsound> </body>

        运行效果：
        打开网页后，在IE 8中播放正常，播放时网页上显示一片空白。在google浏览器中无法播放。

        标签：播放多媒体文件（音频、视频等）

        备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。

        属性：

      • src="多媒体文件的路径"
      • loop="-1"：属性值代表播放次数，-1代表循环播放。
      • autostart="false"：打开网页时，禁止自动播放。默认值是true。
      • volume="100"：设置默认的音量大小，测试发现这个值好像不起作用哦。

        • 标签播放音频举例：

         <body>	<embed src="王菲 - 清风徐来.mp3"></embed> </body>

        IE 8中的运行效果：

        google浏览器中的运行效果：

        注：在HTML5中新增了

        ：移动标签

        如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。
        属性：

      • direction="right"：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。

      • behavior="slide"：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）、。
        alternate和scroll属性值都是循环移动，区别在于：假设在direction="right"的情况下，behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右···

      • scrollamount="30"：移动的速度
      • loop="3": 循环多少圈。负值表示无限循环

      • scrolldelay="1000"：移动一次休息多长时间。单位是毫秒。

        • 举例：

        	<marquee behavior="alternate" direction="down"  width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>

        效果：

        进行设置）
      • cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
        注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
      • cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
      • bgcolor="#99cc66"：表格的背景颜色。
      • background="路径src/..."：背景图片。
        背景图片的优先级大于背景颜色。
      • bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
      • bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色
        这两个属性的目的是为了设置3D的效果。
      • dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
        既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

        • 单元格带边框的效果：

        ：单元格

        属性：

      • align：内容的横向对齐方式。属性值可以填：left right center。
        如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
      • valign：内容的纵向对齐方式。属性值可以填：top middle bottom
      • width：绝对值或者相对值(%)
      • height：单元格的高度
      • bgcolor：设置这个单元格的背景色。
      • background：设置这个单元格的背景图片。


        • 单元格的合并

        如果要将两个单元格合并，那肯定就要删掉一个单元格。
        单元格的属性：

      • colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
      • rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
        效果举例：（横向合并）

        • 效果举例：（纵向合并）

        		：加粗的单元格。相当于 +
      • 属性同
        		• 标签。


        ：表格的标题。使用时和tr标签并列

    Statement
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Related Article
    The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

    The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

    HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

    The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

    The Future of HTML: Evolution and Trends in Web DesignThe Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

    The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

    HTML vs. CSS vs. JavaScript: A Comparative OverviewHTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

    The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

    HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

    HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

    HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

    HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

    From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

    HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

    Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

    WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Show More

    Hot Article

    Assassin's Creed Shadows: Seashell Riddle Solution
    3 weeks agoByDDD
    What's New in Windows 11 KB5054979 & How to Fix Update Issues
    2 weeks agoByDDD
    Where to find the Crane Control Keycard in Atomfall
    3 weeks agoByDDD
    Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation
    1 months agoByDDD
    Roblox: Dead Rails - How To Complete Every Challenge
    3 weeks agoByDDD
    Show More

    Hot Tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    mPDF

    mPDF

    mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

    Atom editor mac version download

    Atom editor mac version download

    The most popular open source editor

    VSCode Windows 64-bit Download

    VSCode Windows 64-bit Download

    A free and powerful IDE editor launched by Microsoft

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Show More

    Hot Topics

    Where is the login entrance for gmail email?
    7611
    15
    CakePHP Tutorial
    1387
    52
    What is the format of the account name of steam
    88
    11
    win11 activation key permanent
    68
    19
    nyt connections hints and answers
    29
    136
    Show More