찾다
집웹 프론트엔드HTML 튜토리얼HTML标签图文详解（二）_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标签并列

    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    관련 기사
    텍스트에서 웹 사이트로 : HTML의 힘텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

    HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

    HTML, CSS 및 JavaScript 이해 : 초보자 안내서HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

    WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

    HTML의 역할 : 웹 컨텐츠 구조HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

    HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

    HTML 및 코드 : 용어를 자세히 살펴 봅니다HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

    "Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

    HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

    HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

    HTML, CSS 및 JavaScript의 역할 : 핵심 책임HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

    HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

    HTML은 초보자를 위해 쉽게 배우나요?HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

    HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

    HTML의 시작 태그의 예는 무엇입니까?HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

    anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    더보기

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
    2 몇 주 전ByDDD
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
    4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    더보기

    뜨거운 도구

    WebStorm Mac 버전

    WebStorm Mac 버전

    유용한 JavaScript 개발 도구

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    Dreamweaver Mac版

    Dreamweaver Mac版

    시각적 웹 개발 도구

    mPDF

    mPDF

    mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

    Atom Editor Mac 버전 다운로드

    Atom Editor Mac 버전 다운로드

    가장 인기 있는 오픈 소스 편집기

    더보기

    뜨거운 주제

    Gmail 이메일의 로그인 입구는 어디에 있나요?
    7478
    15
    Cakephp 튜토리얼
    1377
    52
    Steam의 계정 이름 형식은 무엇입니까?
    77
    11
    Win11 활성화 키 영구
    50
    19
    NYT 연결 힌트와 답변
    19
    33
    더보기