Web前端学习笔记一

什么是 HTML?

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

主要作用:

  • 做数据展示

HTML标签:

  • HTML 标签通常是成对出现的,比如 <body> 和 </body>
  • 单标签则是单个出现  如:换行<br/>  , <meta/>
  • 双标签对中的第一个标签是开始标签,第二个标签是结束标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页
  •  

使用 sublime_text 软件写 html

  1. 选择文件保存路径
  2. 打开软件 --> 文件 --> 新建文件  、
  3. 保存并命令 : 命名格式: 文件名.html
  4. 写代码  --> 快捷方式: !+Tab (该快捷方式可以快速生成一些常用的代码,减轻工作量)

1.html 源码

<!DOCTYPE html>   
<html lang="en">      
<head>
	<meta charset="UTF-8">
	<title>我的第一个Html 标题</title>
</head>

<body>
	<div Align="center">
	<H1>登录</H1>
		<form ction = "2.html">
			<p>用户名:<input type = "text"/><br/></p>
			<p>密码:<input Password = "text"/><br/></p>
            <p><input type="submit" value="提交"><br/></p>
		</form>
	</div>

    <div Align="center">
	<H4>性别</H4>
		<form ction = "2.html">
			<p><input type="radio"  value="1">男<br/></p>
			<p><input type="radio"  value="2">女<br/></p>
			<p><input type="submit" value="提交"><br/></p>
		</form>
	</div>

</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<H1>跳转成功</H1>
	<a href="http://www.Baidu.com.cn/" target="_blank">Visit Baidu!</a>
</body>
</html>

源码详细介绍

<!DOCTYPE html>           /*DOCTYPE :  Document 与 Type 的简写 ,表示文件头: 页面的响应数据类型*/
<html lang="en">          /*lang : Language 语言的意思 ;   en表示英文;   zh-cn 或者 cn 表示中文*/
<head>                         /*Head 表示html的头的部分*/
    <meta charset="UTF-8">      /*Meta ---metadata  : 源数据     UTF-8 ----Unicode码 全世界的通用码*/
    <title>我的第一个Html 标题</title>    /*Title :表示文档的标题*/
</head>

<body>                           /*Body 表示html的正文的部分*/

<div Align="center">       /*div :分区标签   Align="center" :居中*/
    <H1>正文标题</H1>        /*HTML 正文标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。*/

    <form ction = "2.html">                      /* Form---表单     该标签一般不会单独使用 会和input标签联合使用/

            <p>用户名:<input type = "text"/><br/></p>     /*Text ----文本框 */
            <p>密码:<input Password = "text"/><br/></p>    /*Password ----密码框*/
            <p><input type="submit" value="提交"><br/></p>   /*Submit ----提交按钮*/
    </form>

</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_49472648/article/details/110244353