一、html简介

它是一门描述网页的语言，HyperText MarkUp Language,超文本标记语言。

* 超文本：超出文本的范畴，指的在网页上面可以描述文本、图片、视频等内容

* 标记：标签，在标签里面书写内容。

* 语言：html就是用户和浏览器交互的工具，简单来讲，浏览器会解析html的标记，以特定的效果给展示出来

二、 html的主要组成部分：

*文档的声明<!DOCTYPE>: 声明了html的类型和版本号

*html的根标记<html> </html>:标识html的开始和结束

*html的头部标记<head> </head>:设置与页面相关的信息

*html的主体标记<body> </body>：在页面展示内容。

三、html的书写规范：

1.html的文件后缀名可以是“.html”或者“.htm”.

2.html文件的格式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 4.01 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>insert title here</title></head><body>这是我的第一个html</body>
</html>

3.html文件必须以<html>开始，以</html>结束

4.html语法不区分大小写

5.html有结束标记，比如<font>内容</font>,

html的标记如果没有结束标记，自己结束。比如<hr />

html作用：它用来编写网页，在网页通过html标记来描述文本、图片、视频等内容

四、单标记和双标记

1.单标记：空标记，就是没有结束标记的称之为单标记。

语法：<hr /> ,<br />

2.双标记：体标记，就是这个标记有开始和结束。

语法：<font>内容</font>

五、文本控制和文本样式标记

1.段落标记<p></p>和换行标记<br />

段落标记：段落与段落之间会自动换行。

2.文本样式标记<font>内容</font>

常用的属性：

face 用来描述字体的样式

size 用来描述字体的大小，最大取值为7

color 用来描述字体的颜色，取值三种形式：

* 用英文单词表示：red, green,blue

* 用16进制的数据表示：#ff0000

* 用rgb三原色表示：rgb(255,255,0)

3.其它标记：

标题标记：<h1></h1>,<h2></h2>-------<h6></h6>

字体样式标记：<b></b>,<i></i>,<u></u>

六、图像标记：

1.图像标记：在网页上引入图片

语法：<img src="图像的url" />

常用的属性：src 用来引入图片

width 描述图片的宽度

height 用来描述图片的高度

border 用来描述图片的边框

注意：图片的路径分为绝对路径和相对路径（同级目录，上级目录，下级目录）

七、注释标记：

，注释标记的内容不会显示在网页上面。

**** html描述网页的语言，并不是很严谨的语言，html标记通过被浏览器解析，展示特定的效果。

八、表格标记：

1.表格的作用：将数据更加有条理的显示出来，用来规划网页。

2.语法：

<table>

<tr>

<td>单元格的内容</td>

</tr>

</table>

tr:表示行(常用的属性 align 描述表格内的内容显示位置)

td:表示单元格，合并行：rowspan,合并单元格：colspan

th:表头，大多数浏览器会把表头显示为粗体居中的文本。

常用的属性：

border:给表格添加边框。

width: 描述表格的宽度

align:描述表格的位置

cellspacing:描述边框的厚度

cellpadding：描述文字与边框的距离

合并操作：

1.要确定表格有多少行和多少列

2.要确定合并的是行，还是列。

九、表单标记：

表单简介：把用户输入的数据提交到服务器端，简单来说，表单用来让用户输入数据，表单把数据封装起来，提交到指定的位置。

表单组成：

>>> 表单控件：用户输入数据，比如说输入用户名，输入密码。

>>> 提示信息：告诉用户输入框要输入什么值。

>>> 表单域：标识表单的开始和结束，语法<form> 提示信息：表单控件</form>

1.创建表单

比如：<form action="htmlDemo01.html" method="post" name="登录表单">

用户名：<input type="text" name="username" /><br/>

密码：<input type="password" name="psw" /><br/>

</form>

常用的属性：action 表示表单要提交的位置、

method:表单提交的方式，常用的有get提交和post提交，默认提交方式是get

get和post区别：

1、get提交：数据会显示在浏览器的地址栏，不安全，提交的数据大小是有限制。

2、post提交：数据不会显示在地址栏，是安全的，提交的数据大小没有限制。

2.表单控件：<input />

输入框控件的属性type:

文本框：text

密码框：password

单选按钮：radio

复选按钮：checkbox

上传按钮：file

提交按钮：submit

重置按钮：reset

注意：表单想要把数据提交到指定的位置，输入框必须要有name属性。

3.文本域标记:<textarea rows="文本域的行数" cols="文本域每行输入的字符数"></textarea>

比如：

评论：<br/>

<textarea rows="5" cols="50" name="pinglun">输入评论，请注意文明用语！</textarea><br/>

</form>

十、列表标记和超链接标记

1.列表标记：有序列表标记、无序列表标记、自定义列表标记

无序列表：<ul>

<li>列表项内容1</li>

<li>列表项内容2</li>

<li>列表项内容3</li>

----

</ul>

属性：type 默认值disc ,square,circle

2.超链接标记：可以实现跳转的效果

语法：<a href="跳转的url" target="目标窗口的弹出方式">文本或者图片</a>

target:_self 在原有的窗口打开网页

_blank 打开一个新的窗口，来显示网页

比如：

<a href="htmlDemo01.html" target="_self">自己站内跳转到htmlDemo1之self的效果</a><br/>

<a href="htmlDemo01.html" target="_blank">自己站内跳转到htmlDemo1之blank的效果</a><br/>

href属性：跳转的url 1.站内跳转 2.站外跳转

十一、<div>标记

div通常是用来实现网页布局。

1-1-Html技术相关推荐

收集的计算机编程电子书目录，仅供日后查阅方便
本人有收集电子书的癖好.每日在网上收集经典的电子书籍,尤其喜欢原版的,看起来舒服.不过总是心血来潮,当时下载后瞅几眼,之后就束之高阁,再也不问津了.很为此苦恼,过后找某本书时也总是不知道在哪,为了查找 ...
Java实现lucene搜索功能
直接上代码: package com.sand.mpa.sousuo;//--------------------- Change Logs---------------------- //<p ...
如何判断飞机的年限_技术流带你鉴定前风挡玻璃更换，不再使用日期判断！
这又是一篇关于前风挡玻璃鉴定的文章,我记得在二手车鉴定微信公众号里面已经发布好几篇这样的文章了,当然每篇文章的住重点不同,今天这一篇应该是完结篇,它们在一起能组成一套玻璃更换系列专题课程: 我们回 ...
【置顶】利用 NLP 技术做简单数据可视化分析教程（实战）
置顶本人决定将过去一段时间在公司以及日常生活中关于自然语言处理的相关技术积累,将在gitbook做一个简单分享,内容应该会很丰富,希望对你有所帮助,欢迎大家支持. 内容介绍如下你是否曾经在租房时因 ...
HTTP服务器端常用推送技术
服务器端推送技术描述不论是传统的HTTP请求-响应式的通信模式, 还是异步的AJAX式请求, 服务器端始终处于被动的应答状态, 只有在客户端发出请求的情况下, 服务器端才会返回响应. 这种通信模式被 ...
程序员如何讲清楚技术方案
最近在评审技术方案,和代码review的时候,遇到刚入行的同学们,很多都讲不清楚技术方案. 具体表现是: – 上来不说需求,直接说算法实现.台下一头雾水,根本不知道设计方案是否合理. – 描述完需求后 ...
Electron、QT和JAVA PC桌面开发技术比较
近几年PC桌面开发越来越多的被Electron,QT和Java技术占领.下面简单比较一下它们的优劣. Electron,势是开发用时快,社区轮子多,整合一下就能用.缺点是打包大,js计算弱. Java ...
低代码技术与市场（Mendix与 OutSystems）
低代码技术与市场(Mendix与 OutSystems) 本文主要参考文章参考链接 https://mp.weixin.qq.com/s/OXCBORheAx99o3fS-ZfUdg https:/ ...
GPU、AI芯片技术市场分析
GPU.AI芯片技术市场分析市场将高速增长,GPU曙光初现,预计到2024年,国内人工智能技术市场规模将达到172亿美元:全球占比将从2020年12.5%上升到15.6%,是全球市场增长的主要驱动力 ...
激光雷达与汽车技术路线
激光雷达与汽车技术路线对于现在的汽车来说,智能驾驶即体现在代客泊车.不同等级辅助驾驶等具体的智能使用场景,核心代表能力就是自动驾驶. 想要让汽车变得智能,就必须为其构架起具备"感知.决策. ...

1-1-Html技术

一、html简介

二、 html的主要组成部分：

三、html的书写规范：

四、单标记和双标记

五、文本控制和文本样式标记

六、图像标记：

七、注释标记：

八、表格标记：

九、表单标记：

十、列表标记和超链接标记

十一、<div>标记

1-1-Html技术相关推荐

最新文章

热门文章

1-1-Html技术

一、html简介

二、 html的主要组成部分：

三、html的书写规范：

四、单标记 和 双标记

五、文本控制和文本样式标记

六、 图像标记：

七、注释标记：

八、 表格标记：

九、 表单标记：

十、 列表标记和超链接标记

十一、<div>标记

1-1-Html技术相关推荐

最新文章

热门文章

四、单标记和双标记

六、图像标记：

八、表格标记：

九、表单标记：

十、列表标记和超链接标记