HTML入门必看，最详细入门_html程序入门-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45183448/article/details/110097087

走进HTML
了解HTML概念及其基本结构
掌握网页基本标签
掌握图像标签及超链接标签

认识HTML
了解HTML是什么
HTML
Hyper Text Markup Language(超文本标记语言)
超文本包括：文字、图片、音频、视频、动画等

了解HTML能做什么
掌握HTML基本结构
	<html>
	<head>
		<title>我的第一个网页</title>
	<head>
	<body>
		我的第一个网页
	</body>	
	</html>
	注意：
		<body>、</body>等成对的标签，分别叫开放标签和闭合标签
		单独呈现的标签（空元素），如<hr/>;意为用/来关闭空元素

总结
HTML：超文本标记语言
HTML基本结构
网页头部
网页主体
标签

网业编辑工具
了解常用的网页编辑工具有哪些

正确安装VSCode及必须插件
尝试使用VSCode搭建HTML基本结构

网页基本标签
标题标签

…

段落标签
	<p>我和我的祖国，一刻也不能分割</p>
    <p>无论我走到哪里，都流出一首赞歌</p>
    <p>我歌唱每一座高山，我歌唱每一条河</p>
    <p>袅袅炊烟，小小村落</p>
    <p>路上一道辙</p>
	
换行标签
	<p>
        我和我的祖国，一刻也不能分割<br/>
        无论我走到哪里，都流出一首赞歌<br/>
        我歌唱每一座高山，我歌唱每一条河<br/>
        袅袅炊烟，小小村落<br/>
        路上一道辙<br/>
    </p>
	
水平线标签
	<hr/>
	
字体样式标签
	加粗：<Strong>...</strong>
	斜体：<em>...</em>
	
注释和特殊符号
	空格		&nbsp;
	大于号(>)	&gt
	小于号(<)	&lt
	引号(")		&quot
	版权符号@	&copy

练习

清平乐

年年雪里，常插梅花醉，尽梅花无好意，赢得满衣
清泪！

今年海角天涯，萧萧两鬓生华。

看取晚来风势，故应难看梅花

图像标签
常见的图像格式
JPG
GIF
PNG
BMP

语法
	<img src = "path" alt = "text" title="text" width="x" height="y"/>
	src：图像地址
	alt：图像的替代文字
	title：鼠标悬停提示文字
	width：图像宽度
	height：图像高度

<html>
	<head>
		<title>图像标签使用</title>
	</head>
	<body>
		<p>
			<img src="image/hetao.jpg" alt="薄皮大核桃"width ="200" height="200">
		</p>
		<p>
			楼兰密语 新疆野生<br/>
			无漂白薄皮核桃500克*2包<br/>
			￥48.8
		</p>
	</body>
</html>

链接标签
语法
链接文本或图像
href：链接路径 target：链接在哪个窗口打开常用值：_self、_blank
页面间链接
从一个页面链接到另外一个页面

图像标签使用

<a href=“detail.html”_target="_self">JavaScript权威指南

<a href=“detail.html”_target="_blank">

<br/> 图书详情页<br/>

	锚链接
		从A页面的甲位置跳转到本页中的乙位置
		从A页面的甲位置跳转到B页面中的乙位置
	创建步骤
		创建跳转标记
			<a name= "marker">乙位置</a>
		创建跳转链接
			<a href="#marker">甲位置</a>
	
	功能性链接
		电子邮件
		QQ
		MSN
	示例
		<a href="mailto:kWebmaster@kgc.cn">联系我们</a>

列表
列表的分类及使用
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条
理化，并以列表的样式显示出来，以便浏览者能更快捷的获得
相应的信息
列表的分类
无序列表

//声明无序列表
…
//声明列表项
…
…
…

无序列表特性
没有顺序，每个
标签独占一行
默认
标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有新闻的图文组和模块等
每项都是平级的，没有级别之分，相对简单的标题性质

		有序列表
			<ol>//声明有序列表
				<li>...</li>//声明列表项
				<li>...</li>
				<li>...</li>
				<li>...</li>
			<ol/>
			有序列表特性
				有顺序，每个<li>标签独占一行
				默认<li>标签项前面有顺序标记
				一般用于排序类型的列表，如试卷、问卷选项等
				显示带有顺序编号的特定场合
				
		定义列表
			<dl>声明定义列表
				<dt>...</dt>//声明列表项
				<dd>...</dd>//定义列表项内容
				<dd>...</dd>
				<dd>...</dd>
			</dl>
			定义列表特性
				没有顺序，每个<dt>标签，<dd>标签独占一行
				默认没有标记
				一般用于一个标题下有一个或多个列表项的情况
				标题和标题解释性内容的场合

表格
网页中的表格
为什么使用表格
简单通用
结构稳定
基本结构
单元格
行
列

	表格基本语法
		<table border="1" width="700">
			<tr>
				<th>1行1列的标题</th>
				<th>1行2列的标题</th>
				<th>1行3列的标题</th>
			</tr>
			<tr>
				<td>1行1列的单元格</td>
				<td>1行2列的单元格</td>
				<td>1行3列的单元格</td>      
			</tr>
			<tr>
				<td>2行1列的单元格</td>
				<td>2行2列的单元格</td>
				<td>2行3列的单元格</td>         
			</tr>
		</table>
	<table>表格标签
	<tr>行标签
	<th>标题标签
	<td>单元格标签

表单
网页中的表单如何使用

常用表单元素
	<input type="text" name= "fname" value="text"/>
	text：input元素类型
	fname：input元素名称
	text：input元素的值
	
input元素类型
	文本框-text
	密码框-password
	单选按钮-radio
	复选框-checkbox
	列表框-select、option
	按钮-reset、submit、button
	多行文本域-textarea
	文件域-file

表单高级应用
隐藏域

只读
	<input name="name" type="text" value="张三" readonly/>
	
禁用
	<input type="submit" disabled value="保存"/>
	
<html>
	<head>
		<title>表单的使用</title>
	</head>
	<body>
		<h2>
			用户注册表
		</h2>
		<form action="register.html" method="GET">
			<p>
				用户名：<input type="text" name="username" size="25" value="admir" readonly="readonly"/>
			</p>
			<p>
				密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" size="25" value="" maxlength="8" />
			</p>
			<p>
				性&nbsp;&nbsp;&nbsp;别：
				<input type="radio" name="sex" value="boy" checked/>男
				<input type="radio" name="sex" value="girl"/>女
			</p>
			<p>
				爱&nbsp;&nbsp;&nbsp;好：
				<input type="checkbox" name="aihao" value="swim"/>游泳
				<input type="checkbox" name="aihao" value="read"/>读书
				<input type="checkbox" name="aihao" value="climb"/>爬山
			</p>
			<p>
				出生日期：
				<input type="text" name="year" size="4"/>年
				<select name="month" id="">
					<option value="1">1</option>
					<option value="2" selected>2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
				月
			</p>
			<p>
				个人说明：
				<textarea name="info" cols="30" rows="10">
					爱国敬业诚信友善
				</textarea>
			</p>
			<p>
				<input type="file" name="files"/>
			</p>
			<p>
				<input type="button" name="btn" value="普通按钮" disabled/>
				<input type="submit" name="sbtn" value="注册"/>
				<input type="reset" name="rbtn" value="重填"/>
			</p>
			<p>
				<input type="hidden" name="myHiddenInfo" value="login">
			</p>
		</form>
	</body>
</html>

表单练习

京东注册页面

欢迎注册京东用户

电子邮箱：

设置密码：

真实姓名：

性别：
<input type=“radio” name=“sex” value="男"checked/>男
女

出生日期：

<option value="1997"selected>1997
1998
1999

年

1
2
3
4
5
6
7
8
9
10
<option value="11"selected>11
12

月

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<option value="21"2>1
22
23
24
25
26
27
28
29
30

日