HTML入门必看，最详细入门

最新推荐文章于 2024-04-13 20:05:34 发布

勤勤恳恳程序熊

最新推荐文章于 2024-04-13 20:05:34 发布

阅读量139

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/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

日

我现在是：

医生
教师

（非常重要）

验证码
看不清换一张？

验证码：

块元素和行内元素
什么是块元素及行内元素
块元素
无论内容内容多少，该元素独占一行（p、h1-h6、li…）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em…）

总结
HTML：超文本标记语言
网页基本标签
标题、段落、换行、水平线、字体样式、注释和特殊符号
图像标签及超链接标签
、三种超链接
列表、表格及表单
三种类型列表：无序、有序、定义列表
表格：

表单及表单元素
行内元素和块元素

勤勤恳恳程序熊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门必看，最详细入门

走进HTML了解HTML概念及其基本结构掌握网页基本标签掌握图像标签及超链接标签认识HTML了解HTML是什么HTMLHyper Text Markup Language(超文本标记语言)超文本包括：文字、图片、音频、视频、动画等了解HTML能做什么掌握HTML基本结构 <html> <head> <title>我的第一个网页</title> <head> <body> 我的第一个网页 </b
复制链接

扫一扫