学习周记1

一些基础元素

HTML 元素要以开始标签起始,以结束标签终止

常用元素标签
标题< h >< /h >
段落< p >< /p>
链接< a href=“链接内容”>名称< /a >
图像< img src=“选择图片” width=“调整大小” height=“调整大小” />

根据以上的基础标签,做一个简单的人物简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>人物简介</h1>
		<p>姓名:哪吒</p>
		<p>性别:男</p>
		<p>登场作品:《哪吒之魔童降世》</p>
		<p>人物照片:</p>
		<img src="../image/nezha.jpg"width="200">
		<p>相关链接</p>
		<a href="https://baike.baidu.com/item/%E5%93%AA%E5%90%92/35250?fr=aladdin">哪吒(中国古代人物)百度百科</a>
	</body>
</html>

      < html > 元素定义了整个 HTML 文档。
      < body > 元素定义了 HTML 文档的主体。
      < title >描述了元素的额外信息 (作为工具条使用)

浏览器运行结果
浏览器运行结果

表格、列表、区块

1.表格

< table > 标签定义表格
< th > 标签定义表格的表头
 < tr > 标签定义表格分成的每行
 < td > 标签定义每行分成的单元格
 字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.列表

无序列表使用 < ul > 标签
有序列表始于 < o l> 标签
每个列表项始于 < li > 标签
自定义列表以 < dl > 标签开始,每个自定义列表项以 < dt > 开始,每个自定义列表项的定义以 < dd > 开始

3.区块

html区块元素: 大多数html元素为块级元素或内联元素
块级元素: 通常在浏览器显示时会以新行开始(和结束)
例如: < ul > < p > < h1 > < table >等
< div > 元素定义了文档的区域,块级元素
内联元素: 在显示时不会以新的一行开始
例如: < a > < img > < td >等
< span > 元素用来组合文档中的行内元素, 内联元素

简单的表格、列表应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h>表格、列表、区块</h>
		<p>1.表格</p>
		<table border="1">
		    <tr>
		        <th>标签</th>
		        <th>描述</th>
		    </tr>
		    <tr>
		        <td>br</td>
		        <td>定义简单的折行。</td>
		    </tr>
		    <tr>
		        <td>hr</td>
		        <td>定义水平线。</td>
		    </tr>
		</table>
		<p>2.列表</p>
		<p>无序列表</p>
		<ul>
		<li>HTML颜色</li>
		<li>HTML布局</li>
		</ul>
		<p>有序列表</p>
		<ol>
		<li>HTML颜色</li>
		<li>HTML布局</li>
		</ol>
		<p>自定义列表</p>
		<dl>
		<dt>Coffee</dt>
		<dd>- black hot drink</dd>
		<dt>Milk</dt>
		<dd>- white cold drink</dd>
		</dl>
	</body>
</html>

浏览器运行结果

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值