HTML操作思想，html新手入门应该怎么做？

最新推荐文章于 2024-08-31 10:29:18 发布

原创最新推荐文章于 2024-08-31 10:29:18 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5

HTML、CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML的基本概念，强调了良好的编码习惯和语义化的重要性，并通过一个实例展示了如何使用HTML和CSS构建网页。

什么是HTML？

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

写HTML需要注意什么原则？

HTML操作思想


我们必须按照这个操作思想来编写操作html代码(****************)
   网页html是用来显示数据的，既然是用来显示数据的，就需要设置相应的显示效果

   设置显示效果:
       1.将需要操作的数据使用html标签包裹起来
       2.通过设置标签的属性来达到标签的样式(效果)该表
       3.html标签理解为一个对象，那么标签的属性就是对象的成员变量，我们来改变成员变量的值来改变标签的效果
       4.尽量满足语义化原则有利于搜索引擎优化

刚入门编写html容易出现的问题有哪些？

html代码写的很乱，不规范
编写代码的时候总去想着马上要去做出样式
很多文本没有标签包裹
出现大面积不满足语义化原则的地方
写代码要养成写注释的习惯（真的很重要）

针对以上几个问题，我来说两点

1 编写html代码不要先总想着样式。

比如看见人家的一个导航条很好看，你非要一开始刚学html的时候就想去做出来...这真的会很不利于自己的学习。我就是这样子的，总想着去做出一个和别人一样漂亮的导航条，可是自己就连 div ul li a 这些标签的本质都还没有完全认清楚，当自己硬着头皮去写以后，遇到了非常多的难题。

一些边距问题，悬停问题，display的“行”与“块”转化的问题，还有float问题更是让你抓狂。你最后什么都没有学到，还浪费这么多时间，所以初学者还是需要一步一步来。先把div ul li a p等等标签的性质学好，之后再去学css样式。会发现一些样式还是很简单就能做出来。

2 什么是不满足语义化原则？

语义化？语义化？html的语义化是什么？

那就是“ 用最恰当的标签来标记内容”。比如一片文章的标题，你就需要用 <h1>我是最大的标题</h1> 标签包裹起来，然后段落你就用 <p>段落内容...</p> 包裹起来。

网页的头部可以用<header>头</header>

网页的中部可以用<section>主体</section>

网页的尾部可以用<footer>尾部</footer>

然后这里面可以用其他有语义的标签继续细分分块，也可以用无语义的div进行分块。

以下是我今天修改的html、css代码

主要是把内容分块给写清楚了，清楚了基本的 div容器的 float浮动问题。还有一点不太明白的需要再过几天就应该能清楚。

还有就是瞎写了一个导航条（我发誓：没有学清楚前我再也不写导航了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网易邮箱登录</title>
		<style type="text/css">
			ul{
				margin: 0px;
				padding: 0px;
			}
			li{
				list-style: none;
				width: 150px;
				height: 60px;
			}
			li a{
				display: block;
				background-color: lightpink;
				text-align: center;
				padding: 20px;
				text-decoration: none;
				font-size:16px;
				font-weight: bold;
				color: red;
			}
			a:hover{
				background-color: #D3D3D3;
			}
			hr{
				list-style: none;
				margin: 0px;
				padding: 0px;
				color: lightgrey;
			}
		</style>
	</head>
	<body>
		<!-- 头部部分 -->
		<header style="border: 1px solid orange; background-color: orange;">
			<a href="#"><img src="../img/163logo.gif" ></a>
			<div class="nav_dh">
				<a href="#">免费邮</a>
				<a href="#">企业邮</a>
				<a href="#">VIP邮</a>
				<a href="#">帮助</a>
				<p style="font-size: 28px;">我在header里面，我现在是p标签字号28px</p>
			</div>
		</header>
		<!-- 主体部分 -->
				<section style="background-color: salmon;">
				<!-- 主体left -->
					<div style="border: 1px solid #FF0000;background-color: #FF0000; float: left;">
						<img src="../img/imap.jpg" >
						<ul class="li_163">
							<li>163/126/yeah三大免费邮箱均默认开放</li>
							<li>全面支持iPhone/iPad及Android等系统</li>
							<li>客户端、手机与网页，实现发送、阅读邮件</li>
						</ul>
						<a href="#">立即同步普通登录手机号登录</a>
						<p style="font-size: 28px;">我在section>div里面</p>
					</div>
				<!-- 主体right -->
					<div class="main_right" style="float: right;">
						<ul>
							<li><a href="#">我是侧边栏</a></li><hr >
							<li><a href="#">互联网seo</a></li><hr >
							<li><a href="#">哔哩哔哩</a></li><hr >
							<li><a href="#">网络购物</a></li><hr >
							<li><a href="#">腾讯家族</a></li><hr >
							<li><a href="#">阿里巴巴</a></li><hr >
							<li><a href="#">客服帮助</a></li><hr >
							<li><a href="#">不会就百度</a></li><hr >
						</ul>
					</div>
				<!-- 主体中部区域 -->
					<div class="main_form" style="border: 1px solid cadetblue; background-color: cadetblue;">
						<form action="#" method="get">
								<label for="userName">用户名</label>
								<input type="text" id="userName" name="userName"/>
								<span>@163.com</span><br><br>
								<label for="paw">密码：</label>
								<input type="password" id="paw" name="psw"/><br><br>
								<label>版本：</label>
								<select name=""version id="">
									<option value="">默认</option>
									<option value="2018">2018</option>
									<option value="2017">2017</option>
									<option value="2016">2016</option>
									<option value="2015">2015</option>
								</select><br><br>
								<input type="checkbox" value="autoLogin"/>自动登录
								<input type="checkbox" value="ssl" checked/>SSL<br><br>
								<input type="submit" id="dl" name="" value="登录" />&nbsp;
								<input type="submit" id="zc" name="" value="注册" />
						</form>
					</div>
					<p style="font-size: 28px;">我在section里，我下面的空白区域也是section，section是html5的新的容器<br>
					内容有多大，我就把容器撑多大！</p>
				</section>
		<!-- 底部部分 -->
		<footer style="border: 1px solid dodgerblue; background-color: dodgerblue ;clear: left;">
			<img src="../img/netease_logo.gif" alt=""/>
			<a href="#">关于网易</a>
			<a href="#">免费邮 </a>
			<a href="#">官方博客</a>
			<a href="#">客户服务 </a>
			<a href="#">隐私政策</a>|
			<a href="#">网易公司版权所有  &copy; 2015-2018</a>
			<p style="font-size: 28px;">我在footer里面</p>
		</footer>
	</body>
</html>

下面是效果：