【HTML】：入门篇

追yi个小太阳

已于 2022-05-02 21:17:59 修改

阅读量143

点赞数

分类专栏：【前端】文章标签： html css web

于 2020-04-22 14:33:49 首次发布

【前端】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

表格

子标签

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

属性

border边框

cellspacing单元格之间的间距

rowspan跨行

colspan跨列

具体可参考：

菜鸟教程 - 学的不仅是技术，更是梦想！

追yi个小太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】：入门篇

HTML主要负责搭建页面结构和内容主要学习的就是HTML内部有哪些标签，标签有哪些属性，标签和标签的嵌套关系结构介绍<!DOCTYPE html> <html> <head>...
复制链接

扫一扫

专栏目录