1.概述

2.骨架

3.标签

3.1常用标签1

3.2常用标签2

3.3常用标签3

4.表单

4.1表单概述

4.2表单举例

1.概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2.骨架

下面我们创建一个html文件，并且对它里面的内容做以解释:

<!--这是工具生成的一个标准的html网页模板-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

：是html中的注释语法。

<!DOCTYPE html>：html5 版本声明。

<html></html>：根标签，所有的内容都写在根标签内。

<head></head>：网页头部，里面可以设置网页的元信息。

<body></body>：网页身体。

<meta charset="utf-8" />：设置浏览器解析网页时，使用的字符集。

<title></title>：标签可定义网页的标题。

<link rel="icon" href=""/>：可在标题处添加图标。

网页的基本语法:网页是由标签构成的。

1.<开始标签> 标签体 </结束标签> ：称为闭合标签双标签
2. <标签名 /> ：称为自闭合标签通过属性来进行一个设置

标签中可以拥有属性，通过属性进一步修饰标签特性，属性必须写在开始的标签中，一个标签可以有多个属性，格式属性名="属性值"。例如：


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>百度一下，你就知道</title><link rel="icon" href="img/baidu.ico"/></head><body text="red">网页的内容都写在body中1<br/>网页的内容都写在body中2</body>
</html>

运行到浏览器中.........

3.标签

HTML常用标签
<h1></h1>	标题标签
<p></p>	段落标签
<br/>	换行标签
<ul> <li>列表项内容</li> </ul>	无序列表
<ol type=""> <li>列表项内容</li> </ol>	有序列表
<a href="" target=""></a>	超链接
<img src="" >	图片
<hr/>	标尺线
<b></b>	加粗
<table> <tr> <td><td> </tr> </table>	表格
<form action="" method=""> </form>	表单(重点)

下面，我们还是直接HTML中演示这些标签（用注释来讲解这些标签的用法）:

3.1常用标签1

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 标题标签 align属性可以设置文本内容，在标签行内的水平对齐方式  默认时left--><h1 align="right">一级标题</h1><h2 align="center">二级标题</h2><h3>三级标题</h3><!--p 段落标签  表示一个段落 段落与段落之间有间隔--><p align="center"></p><!-- 无序列表 前面有一个图标 没有序号--><ul><li>列表项内容</li><li>列表项内容</li><li>列表项内容</li></ul><!-- 有序列表  前面有一个序号 通过type属性改变序号规则 1，A，a，I，i--><ol type="I"><li>列表项内容</li><li>列表项内容</li><li>列表项内容</li></ol></body>
</html>

运行到浏览器中看效果..........

3.2常用标签2

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>
<!-- 超链接  href="链接地址"  target="_self 在当前窗口打开  target="_blank 在新窗口打开图片   src="图片的引用地址"
--><a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.baidu.com" target="_blank">百度</a><a href="http://www.taobao.com"><img src="img/1.png" ></a></body>
</html>

运行到浏览器中看效果..........

-------------页面就会直接跳转

3.3常用标签3

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- hr 标尺线空格: &nbsp  <    : &lt>    : &gt--><hr color="red" width="800" size="10"/><!-- 在标记语言中，需要对语言中的一些特殊符号进行转义 --><b>&lt;b&gt;标签的功能是加粗文字</b><!-- border 设置边框  cellspacing 单元格之间的间距  cellpadding 单元格内内容与单元格的内距  --><table border="1" cellspacing="2" cellpadding="2"><tr><th>姓名</th><th>性别</th></tr><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>男</td></tr></table></body>
</html>

运行到浏览器中看效果..........

4.表单

4.1表单概述

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

4.2表单举例

组件类型
text	文本框
password	密码框
radio	单选框
checkbox	多选框
submit	提交按钮
file	文件上传
rest	重置按钮
button	普通按钮
textarea	多行文本框
select	下拉选择框

action我们先不用管，method默认先选get。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单标签学习</title></head><body><!-- readonly="readonly" 只读 可以提交内容disabled = "disabled" 禁用组件，不能再提交内容placeholder="" 提示内容，不是实际的内容value 设置文本框中值(开始默认值)为多少，当提交时 name和value构成键值对(value 可以不写但是存在)单选框必须通过name来进行分组，name相同为一组，就可以互斥(保证只能选一个).选择性组件必须给予默认值   还可以使用checked属性默认选中    checked="checked"type = "checkbox" 复选框 --也可以使用checked属性默认选中   checked="checked"<select name="">  --使用selected属性默认选中    selected="selected" <option  value="">北京</option><option selected="selected" value="">上海</option></select><textarea name="mark" rows="5" cols="30"></textarea> 多行文本框  可以显示5行30列的数据<input type="reset" value="重置" /> 将表单还原到默认状态--><form action="" method="get">Username:<input type="text"  name="username" placeholder="请输入用户名" value="1111"  /><br />Password:<input type="password" name="password" /><br /><input type="radio" name = "gender" value="男" checked="checked"/>男<input type="radio" name = "gender" value="女" />女<br /><input type="checkbox" name="course" value="java" checked="checked"/>java<input type="checkbox" name="course" value="c++"/>c++<input type="checkbox" name="course" value="c语言"/>C语言<br /><select name="province"><option value="110">北京</option><option selected="selected" value="111">上海</option></select><br /><input type="file" /><br /><textarea name="mark" rows="5" cols="30"></textarea><br /><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body>
</html>

运行到浏览器.............

下章我们将开启CSS.............

CSS点我直接走~~~

想要了解javaScript跟我来~~~

前端三剑客之——HTML相关推荐

前段第44天------前端、前端三剑客、HTML
一.前端定义:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页. 前端技术:前端设计:一般可以理解为网站的视觉设计前端开发:网站的前台代码实现,包括基本的HTML和CSS以及 ...
【前端三剑客二】CSS手术刀剖析第二篇
文章目录一.CSS常用元素属性 1.字体属性 1.1.设置字体 1.2.字体大小 1.3.字体粗细 1.4.文字样式 2.文本属性 2.1.文本颜色 2.2.文本对齐 2.3.文本装饰 2.4.文本 ...
前端三剑客 HTML、CSS、JavaScript 入门到上手
前端三剑客 1. HTML基础使用 1.1 HTML 入门实例 1.2 HTML 常见标签 ① 注释标签 ② 标题标签 ③ 段落标签 ④ 换行标签 HTML转义字符 ⑤ 格式化标签 ⑥ 图片标签 ⑦ ...
前端 - 前端三剑客绘制一幅《圣诞节快乐》交互祝福效果
一.前言 2022年圣诞节到来啦,很高兴这次我们又能一起度过~ 这个想法也是之前一直想制作一个有交互性的圣诞快乐祝福网页,一直没有时间去实现,正好趁着这次活动来满足下自己的小小的愿望哈~ 利用前端三剑 ...
前端三剑客入门学习笔记之HTML
前言前端三剑客即指HTML.CSS.JavaScript. 它们之间搭配使用可以得到多种效果. HTML:决定网页结构和内容,相当于人的身体. CSS:决定网页呈现给用户的模样,相当于给人 ...
前端三剑客 - HTML
前言接下来的时间将会给大家带来前端的相关知识,主要是做到扫盲的效果,在后面我们自己做网页时会用到前端三剑客HTML,CSS,JavaScript对网页进行布局,美化.
总结前端三剑客之一（HTML基础）
今天我们来学习前端三剑客之一(HTML),在讲解HTML之前,我们需要先了解前端三剑客是什么,分别又有什么作用呢? 前端三剑客指的是HTML.CSS.JavaScript,这三门语言.目前大多数网站的 ...
前端三剑客之HTML
前端三剑客之HTML 1. 前言 2. HTML超文本标记语言 2.1 背景 2.2 常用编辑工具 2.3 来写第一个HelloWorld吧 2.4 必备标签.属性 2.5 常用标签 2.5.1 标题 ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...
前端三剑客_HTML
前端三剑客一.软件的架构 1.C/S(客户端/服务器端) 一般我们使用的软件都是C/S架构: 比如系统中的QQ.360--: C表示客户端,通过客户端来使用软件: S表示服务器,服务器负责处理软件的 ...

前端三剑客之——HTML

1.概述

2.骨架

3.标签

3.1常用标签1

3.2常用标签2

3.3常用标签3

4.表单

4.1表单概述

4.2表单举例

前端三剑客之——HTML相关推荐

最新文章

热门文章