【HTML】:入门篇

目录

HTML

结构介绍

常见的文本标签

图片标签

超链接标签

列表标签

无序列表

有序列表

定义列表

列表嵌套

分区标签

表单

表格

子标签

属性

具体可参考:


HTML

主要负责搭建页面结构和内容

主要学习的就是HTML内部有哪些标签,标签有哪些属性,标签和标签的嵌套关系

结构介绍

<!DOCTYPE html><!-- 以h5的标准,解析页面 -->

		<html><!-- 根标签 -->

			<head><!-- 头标签:里面的内容是给浏览器看的 -->

				<meta charset="UTF-8">

				<title>页面标题</title>

			</head>

			<body><!-- 体标签:里面的内容是给用户看的 --></body>

		</html>

常见的文本标签

1. 内容标题: h1-h6

独占一行,字体加粗,自带上下间距

2. 段落标签: p

独占一行,自带上下间距

3. 加粗和斜体

<b> <i>

图片标签

- src 路径

1. 相对路径: 访问站内资源时使用

a. 同目录: 直接写图片名

b. 上级目录: ../图片名

c. 下级目录: 文件夹名/图片名

2. 绝对路径: 访问站外资源时使用(图片盗链)

以http开头, 好处:节省本站资源 坏处: 可能找不到图片

- alt: 当图片不能正常显示时显示的文本

- title: 鼠标悬停时显示的文本

- width/height: 1. 像素 2. 百分比

超链接标签

href: 路径(可以指向站内,也可以指向站外) , 可以指向页面资源和文件资源(浏览器支持浏览则浏览不支持则下载)

- 图片超链接: 用a标签把img标签包裹后 就是图片超链接<a href="xxxx"><img src="xxxx"></a>

列表标签

无序列表

<ul type="square"><!-- unordered list  无序列表 -->

			<li>刘备</li><!-- list item 列表项 -->

			<li>孙尚香</li>

			<li>妲己</li>

			<li>刘禅</li>

			<li>韩信</li>

		</ul>	

有序列表

<ol type="1" start="10" reversed="reversed"><!-- ordered list 有序列表 -->

			<li>打开冰箱门</li>
			<li>大象装进去</li>
			<li>关上冰箱门</li>
			<li>关上冰箱门</li>
			<li>关上冰箱门</li>
			<li>关上冰箱门</li>

		</ol>

定义列表

<dl><!-- 定义列表 -->

			<dt>凉菜</dt>  <!-- 定义术语(标题) -->

			<dd>拍黄瓜</dd> <!-- 定义描述 -->

			<dd>芥末鸭掌</dd>

			<dd>花毛一体</dd>

			<dt>热菜</dt>

			<dd>宫保鸡丁</dd>

			<dd>水煮鱼</dd>

			<dd>酱烧排骨</dd>

		</dl>

列表嵌套

有序和无序 可以任意无限嵌套 
		<ul>
			<li>河北
				<ol>
					<li>aaa
						<ul>
							<li>111</li>
							<li>222</li>
							<li>333</li>
						</ul>
					</li>
					<li>bbb</li>
					<li>ccc</li>
				</ol>
			</li>
			<li>河南</li>
			<li>山东</li>
		</ul>

分区标签

标签自身没有任何显示效果

- 用于将多个相关的标签进行统一管理

- div默认独占一行

- 一个页面至少分为三大区 头 体 尾(脚)

<div>头</div>

<div>体</div>

<div>尾(脚)</div>

- 为了提高代码的可读性,html5中 新增了几个分区标签,作用和div一样

1. header 头

2. footer 脚

3. article 文章/正文

4. section 块/区域

5. nav 导航

<header>头</header>
	<article>体</article>或<section>体</section>
<footer>脚</footer>

表单

主要学习的就是表单中有哪些控件:文本框/密码框/单选/多选/下拉选/日期选择器/文件选择器等

作用:用于获取用户输入的各种信息,并且信息提交到服务器.

<!-- 所有控件 必须有一个name属性 

		不然用户写的信息不会提交 -->

		<form action="http://www.tmooc.cn">

			<!-- value设置默认值 

			placeholder 占位文本 -->

			用户名:<input type="text" name="username" 

			value="hehe" placeholder="请输入用户名"><br>

			密码:<input type="password" name="pw"

			placeholder="请输入密码"><br>

			<!-- 单选中的value控制提交内容

			checked默认选中 -->

			性别:<input type="radio" name="gender"

			 value="m">男

			<input type="radio" name="gender"

			 value="w" checked="checked">女<br>

			爱好:<input type="checkbox" name="hobby" value="cy">抽烟

			<input type="checkbox" name="hobby" value="hj">喝酒

			<input type="checkbox" checked="checked" 

			name="hobby" value="tt">烫头<br>

			生日:<input type="date" name="birthday"><br>

		 	<input type="submit" value="注册"> 

		</form>

表格

子标签

  1. tr(table row 表格的行)
  2. td(table data 表格的列)
  3. th(table head表头,加粗并居中)
  4. caption表格标题

属性

border边框

cellspacing单元格之间的间距

rowspan跨行

colspan跨列

具体可参考:

菜鸟教程 - 学的不仅是技术,更是梦想!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值