HTML第一篇

最新推荐文章于 2021-06-07 12:19:51 发布
最新推荐文章于 2021-06-07 12:19:51 发布
阅读量293 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHao168888/article/details/81289856
版权

html 超文本标记语言

1.成对出现 
     <html>...</html>

2.自关闭标签  <img/>  <br/>

3.属性
   <img src="image/a.jpg" alt="图片"/>
   
4.基本结构
  <html>
     <head>
     </head>
     <body>
     </body>
  </html>

5.标签的分类
   块级标签    自带换行  
     标题
      <h1>....</h1>
      <h6>....</h6>
      对标题的赋值是在<body ></body>中

例

<html>
<head></head>
<body> 
<h1>一级标题</h1>
...                    //一级标题最大
<h6>六级标题</h6>
</body>
</html>


  段落
   <p></p>   


 列表
   1.有序列表
     <ol type="A" >
        <li>列表项的内容</li>
        <li>列表项的内容</li>
        <li>列表项的内容</li>
        <li>列表项的内容</li>
     </ol>

 2.无序列表
      <ul type=" ">
        <li>列表项的内容</li>
        <li>列表项的内容</li>
        <li>列表项的内容</li>
        <li>列表项的内容</li>
     </ul>

例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>HTML在线考试</h1>
	<ol >
		<li>HTML中，换行使用的标签是（）。</li>
		<ol type="A">
			<li> &lt; br/&gt;</li>    
			<li> &lt; p &gt;</li>
			<li> &lt; hr/ &gt;</li>
			<li> &lt; img/ &gt;</li>
		</ol>
		<li><img/>标签的（）属性用于制定图像的地址。</li>
		<ol type="A">
			<li>alt</li>
			<li>href</li>
			<li>src</li>
			<li>addr</li>
		</ol>
		<li>创建一个超级链接使用的是（）标签</li>
			<ol type="A">
			<li> &lt; a &gt;</li>
			<li> &lt; ol &gt;</li>
			<li> &lt; img/ &gt;</li>
			<li> &lt; hr/ &gt;</li>
		</ol >
		<li><img/>标签的（）属性用来设置图片与旁边内容的水平距离。</li>
			<ol type="A">
			<li> hspace</li>
			<li> vspace</li>
			<li> border</li>
			<li> alt</li>
		</ol >
		<li>下面HTML结构中，不属于列表结构的是（）。</li>
			<ol type="A">
			<li> ul-li</li>
			<li> ol-li</li>
			<li> dl-dt-dd</li>
			<li> p-br</li>
		</ol>
	</ol>
	</body>
</html>

需要注意的是 &lt 代表<      &gt代表>    br/ 代表换行，在输出结果中A选项中，要想输出A选项的样式，不能在HTML编写时用<br/>形式，需用&lt br/ &gt

 

3.自定义列表 描述标签
     <dl>
       <dt></dt>
       <dd></dd>
     </dl>


  表格
    <table>
       <tr>
          <td></td>
          <td></td>
       </tr>
       <tr>
         <td></td>
         <td></td>
       </tr>
    </table>
    例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="300" height="300" border="1">
			<!--第1行 -->
			<tr>
					<td rowspan="7">2</td>
					<td colspan="7">1</td>
			</tr>
		<!--第2行 -->
		<tr>
			<td rowspan="5">3</td>
			<td colspan="5">17</td>
			<td rowspan="7">8</td>
		</tr>
		<!--第3行 -->
		<tr>
			<td>4</td>
			<td colspan="2">5</td>
			<td>6</td>
			<td rowspan="5">7</td>
		</tr>
		<!--第4行    zhongdian  -->
		<tr>
			<td rowspan="2" colspan="2">9</td>
			<td colspan="2">10</td>
		</tr>
		<!--第5行 -->
		<tr>
			<td colspan="2">11</td>
		</tr>
		<!--第6行    -->
		<tr>
			<td>12</td>
			<td colspan="2">13</td>
			<td>14</td>
		</tr>
		<!--第7行 -->
		<tr>
			<td colspan="5">15</td>
		</tr>
		<!--第8行 -->
		<tr>
			<td colspan="7">16</td>
		</tr>
		</table>
	</body>
</html>

上图代码结果      从左到右的顺序

 

colspan表示跨列

rowspan表示跨行
  table 定义表格
    tr 定义行
    td 定义单元格
   行级标签 不带换行
 

持续更新...

CHao168888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web-作业1-1（html）
weixin_45875030的博客
06-20 452
1-1 李清照简介 人物简介 李清照(1084年3月13日~1151年5月12日) ,南宋女词人,号易安居士,婉约派代表，有“千古第一美女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词，留有诗集《易安居士文集》、《易安词》等。 ©2013&nb
HTML笔记1（2024.3.14）第一篇博客
最新发布
03-14
今天不仅是霍金逝世六周年的日子，也是作者发布个人第一篇博客的特殊时刻。在这个特殊的日子里，让我们一同回顾HTML的基础知识，并探索其在网页制作中的应用价值。 #### 二、HTML基础标签详解 ##### 1. 段落标签`...
HTML基础
Moliay的博客
03-03 680
笔记篇 1.html的操作思想：网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数 据据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化，只需要改变容器的属性值，就可 以实现容器内数据样式的变化。 一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式 的变化 2.文字标签...
HTML实战案例2：制作模拟考试试卷页面
海鱼专属博客
05-27 5591
实战案例2：制作模拟考试试卷页面 一、完整的页面效果图 二、文本素材 HTML在线考试试题 1.HTML中，换行使用的标签是（）。 A.<br /> B.<p> C.<hr /> D.<img /> 2.<img />标签的（）属性用于指定图像的地址。 A.alt B.href C.src D.addr 3.创建一个超级链接使用的是（）标签。 A.<a> B.<ol> C.<img /> D.&l...
上机2
qq_36074180的博客
10-11 301
在线考试试卷 HTML在线考试试卷 HTML中，换行使用的标签是（）。 标签的（）属性用于指定图像的地址。 创建一个超级链接使用的是（）标签。 标签的（）属性用来设置图片与旁边内容的水平距离。 下面HTML结构中，不属于列表结构的是（）。
题型排版
qq_36074056的博客
10-11 298
无序排列 橘子 苹果 菠萝 柠檬 榴莲 橘子 苹果 菠萝 柠檬 榴莲 橘子 苹果 菠萝 柠檬 榴莲 树形菜单 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 本地磁盘(D:) 我的游戏 我的资料 我的电影 所属院校 北大青鸟 所属专业 计算机软件工程 在线考试试卷 HTML在线考试试卷 在HTML中,换行使用
Html/Css(新手入门第一篇必看攻略)
09-28
本文是一篇面向初学者的HTML/CSS入门教程，旨在帮助新手理解并掌握基础的网页制作知识，包括Web标准的含义、CSS的使用和特性、样式的优先级规则、文本控制和伪类的使用等内容。下面详细展开知识点： 1. Web标准的...
我的第一篇博客文章
12-22
文章的元数据如标题、日期、置顶级别等，可以使用YAML头信息来定义，如在描述中看到的`title: 我的第一篇博客文章` 和 `top: 1`。 Markdown的简洁性和易读性使其成为撰写博客、文档和笔记的理想选择。通过掌握这些...
BootStrap入门学习第一篇
12-02
这篇“BootStrap入门学习第一篇”旨在引导初学者了解如何开始使用这个强大的工具。以下是主要的知识点： 1. **环境搭建**： - 首先，你需要从BootStrap的中文官方网站（http://www.bootcss.com）下载最新的...
img 标记的属性
热门推荐
无区新手的博客
03-14 1万+
属性 属性值 描述 src URL 图像的路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 数字 设置图像边框的宽度 vspace 像素 设置图像顶部和底部...
下列标记不属于html文档的基本结构是,在HTML中，下面（ ）不属于HTML文档的基本组成部分。...
weixin_28729331的博客
06-07 2786
A、 B、 C、 D、21、在HTML的区域的某处有一段代码，此为( )。 A、行内样式表 B、内嵌式样式表 C、外部式样式表 D、动态式样式表22、下列代码段是某页面的样式设置： .blue { color:blue } .red { color:red } 现要求将页面中的第一个h1标题设置为红色，第一个段落设置为蓝色。下列代码正确的是( )。A、...
HTML基础一 测试题
qq_37169559的博客
11-06 5825
HTML5 一、单选题（共30题，每题2分） 得分：2.0分 1. 下面关于外部样式表的说法错误的是 A 文件扩展名为 .cs B 外部样式表内容不需要使用<style>标签 C 使用<link>标签引入外部样式 D 使用外部样式表可以使网站更加简洁，风格保持统一 正确答案: A 解析: 文件扩展名为 .css 得分：2...
【Html】Html基本标记
点滴记忆
12-16 192
<!doctype html> <html> <head> <!--mata 元信息标记--> <meta charset="utf-8"> <!--<meta http-equiv="Refresh" content="20;url=http://www.baidu.com"> 这个是设置网...
HTML基本组成结构与标签的认识
weixin_34001430的博客
11-15 637
HTML基本组成结构与标签 其实组成结构用一张图来简单了解下如下 目前一般网站的结构是会如此不是很清晰简单 先来说说header头部 这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口，打个比方例如你去超市买酱油，超市的头顶上会挂着分类区域例如，生活用品、服装、厨具等 然后你就会通过分类去找你要买的物品归类在哪，到那你就只用找你想要买的酱油就可以了。这样是不是容易理解点...
HTML基础一——常用基本标签（段落p，标题h，超链接a，列表（ul/ol)）
qq_41798029的博客
06-06 1000
脚本语言： HTML：超文本标记语言（Hypertext Markup Language） 静态脚本：内容不会改变 ######################### Javascript/JQuert 动态脚本：页面有一些交互效果 ######################### JSP/Servlet: 使用Java语言和服务器语言进行交互 ######################### XML：可扩展的标记语言 ######################### HTML编写规范： 标签和属性
html:自定义列表(dl>dt+dd)的使用
mumu42的博客
07-28 9405
以前用的都有用无序列表ul>li比较多，看了授课老师的写的代码才又重新认识了自定义列表，例如以下布局用自定义列表标签就相当方便： 只需要定义四个dl标签，在dt标签内添加分别添加相应的图片，在dd标签内添加p标签或者span标签或者其他可以添加文字的标签，再给dt和dd添加浮动属性（float:left;）即可。不过值得注意的是dd标签内可以添加任意其他标签，但是dt标签
HTML基本结构
audvzqvsyy548605的博客
03-15 65
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>html标题</title> </head> <body>...
S1 HTML 第二章 上机1、2
qq_36074093的博客
10-12 884
上机1: 树形菜单 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 本地磁盘(D:) 我的游戏 我的资料 我的电影 上机2: 在线考试试卷 HTML在线考试试卷 HT
树形菜单
qq_36074096的博客
10-11 642
树形菜单 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 本地磁盘(D:) 我的游戏 我的资料 我的电影   打印试卷 在线考试试卷 HTML在线考试试题 HTML中，换行使用的标
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值