HTML学习之路DAY01

最新推荐文章于 2024-05-18 20:57:08 发布

晨曦之园

最新推荐文章于 2024-05-18 20:57:08 发布

阅读量168

点赞数

分类专栏： HTML+CSS+JS

本文链接：https://blog.csdn.net/ChinaGir/article/details/97891056

版权

HTML+CSS+JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

界面层：某种类型的应用程序
DOS界面的（控制台显示）、
桌面应用程序（独立安装，独立运行）
Web类型的应用程序(浏览器，输入一个URL地址)

业务层

数据存储层

.Web 类型的应用程序：程序位于服务器，用户只需要通过
浏览器访问和交互
-----网站、程序（OA、CRM等）

.Web 类型应用程序的课程：
- 客户端：页面的创建
（HTML）搭建、美化(CSS)、动态的显示效果(JavaScript JS) --Ajax&Jqery
- 服务器端：页面和数据库的交互
JSP&Servlet (Java) /PHP (只能实现web类型的)/ASP.NET

.web基础相关的技术：html+css+js
是构建web类型最基本的技术

一、HTML 网页编程基础

（一）、html 概述

什么是HTML
.HTML(HyperText Markup Language):超文本标记语言，一种纯文本类型的语言
.用来设计网页的标记语言
.用该语言编写的文件，以.html或者.htm为后缀
.由浏览器解释执行
.HTML是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段，
如：VBScript JavaScript

总结：什么是HTML：HTML是一种超文本标记语言，构建网页文件，即以.html/.htm为后缀的文件，
由浏览器解释执行，可以使用CSS定义样式，嵌入JS代码实现动态效果

Web浏览器
.主要功能
- 代理访问者提交请求
- 作为HTML解释器和内嵌脚本程序执行器
- 用图形化的方式显示HTML文档
.主要Web浏览器产品
- IE
- Firefox
- Chrome
- Opera
- Safari (手持设备上的浏览器)

HTML相关术语
.标记
- 用尖括号<> 包围的单词
- 标记大都成对：开始标记和结束标记
. 元素
- 每一对尖括号包围的部分，
如<body> </body>包围的部分就叫做body元素
. 属性
- 用来修饰元素
- 每个属性都有值
- 属性放在开始标记中

总结：
标记语法：
封闭类型：双标记，如<p></p>
非封闭类型：单标记或者空标记，如<br/>
<br/>---标准
<br>----早期版本

元素和属性，如：
<p align="center">段落文本</p>

（二）、html 每个内容

1、html文档的标准结构：
.版本信息
.html页面
- 文件头：<head> </head>
- 文档主体部分：<body> </body>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">版本信息
<html> html页面
<head> 文件头
<title> </title>
</head>
<body> 文件主体
</body>
</html>

2、版本信息
. 在文档的起始用DOCTYPE声明制定版本和风格
. 让浏览器清楚文档的版本、类型和风格
. 严格型、过渡型（常用类型）、框架型
- Strict DTD
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
- Transitional DTD
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
- Frameset DTD
<!DOCTYPE html PUBLIC"-//W3C/DTD XHTML 1.0 Frameset//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>

3、<head> 头元素：定义整个文档相关的信息，常包含如下子元素
（1）头元素 - <title>
.标题元素的内容出现在浏览器顶部
.没有属性
.必须出现在<head>元素中
.一个文档只能有一个标题元素

<head>
<title>我的第一个HTML页面</title>
</head>

（2）头元素 - <meta>
.元数据元素<meta> 用于定义网页的基本信息（编码格式或刷新频率）
.为空标记
.常用属性有：content、http-equiv

<head>
<title>我的第一个HTML页面</title>
<meta http-equiv="refresh" content="10"/>
实时更新每隔10秒刷新：如留言
<meta http-equiv="content-type"
content="text/html;charset=utf-8"/>
</head>

示例：
创建HTML文档并创建头元素
1.创建标准结构的HTML文档
2.为文档添加头元素<head>
3.为页面设置标题、编码格式以及刷新频率

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
   
   <head>
       <title>第一个网页</title>
       <meta http-equiv="refresh" content="3" />
       <meta hhtp-equiv="content-type" content="text/html;charset=utf-8"/>
   </head>
   
   <body>
   </body>
</html>

4、<body> 元素：文档的主体，包含所有要显示的内容

二、文本标记

1.文本标记的作用
.文本是网页上的基本成分
.直接书写的文本会用浏览器默认的样式显示
.包含在标记中的文本则会被显示为标记所拥有的样式
- 特殊字符
- 注释
- 标题元素
- 段落元素
- 换行元素
- 分区元素

2.文本与特殊字符
.空格折叠
- 多个空格或制表符压缩成单个字符，即只显示一个空格
. 特殊字符（如空格），可以用转义字符，也称为字符实体

  空格
< <
> >

the <p> element.  
© 2011 by tarena.

3.文本标记
(1) 标题元素 <h1> - <h6>
(2) 段落：<p> </p> :p中的内容会独占一行，会有一些段落
(3) 换行： <br /> ：回车，间距较小
(4) 分区元素：对某些元素进行一些统一的设置
   <span>文本</span> : 不会影响布局，常用于同一行中
   <div>文本或其他</div> : 独占一行，常用于多行的情况下
(5)块级元素(block)和行内元素(inline)
块：那些独占一行的元素，前后会自动换行，比如div、p、h
   行：和其他元素同占一行，如：span
示例：

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
   
   <head>
       <title>第一个网页</title>
       <meta http-equiv="refresh" content="60" />
       <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
   </head>
   
   <body>
       aa   aa
       b<bb>bb
   <div style="color:blue;">
       <h1>h1 text</h1>bbb
       <h2>h2 text</h2>bbb
       aaaa
   </div>
       <p style="color:red;">p text <span style="color:green">计算机</span>学院</p>aaaaa
   aaaa<br/>p text<br/>aaaaa
   </body>
</html>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>第一个 HTML 文档</title>
       <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
   </head>
   <body>
       <h1 align="center">
           Java 语言基础<span style="color:red;"><Day03></span>
       </h1>
       <h2>1 个人所得税计算器</h2>
       <h3>1.1 问题</h3>
       <p>快速健康福建省福建的时间</p>
       <h3>1.2 方案</h3>
       <p>快速健康福建省福建的时间</p>
       <h3>1.3 实现</h3>
       <p>快速健康福建省福建的时间</p>
       public class IncomeTax<br />
       {<br/><br/><br/>
       }
   </body>
</html>

三、图像和链接

1、<img src="图片路径" width="100" />
eg：<img src="images/a.jpg" /> --相对路径
<img src="http://tts.tarena.com.cn/a.jpg">--绝对路径

2、超级链接：点击、去往其他资源
<a href="路径" target="">被单击的内容，文件或者图片</a>
target的取值：
_self:默认值，替换
_blank:打开新的空白页面，显示页面

.元素可以嵌套使用，要想图片也可以点击
<a href="点去哪儿的路径">
<img src="图片路径">
</a>

示例：
<a href="https://www.baidu.com/">
<img src="a.jpg" width="100"/>
</a>

3、锚点：当前页面的不同位置之间跳转
   第一步：使用a在目标位置定义一个锚点
       <a name="link1"></a>
   第二步：使用链接a，href指向 link1
   <a href="#link1">to link1</a>

4、直接回到页面的顶端：非常常用
早些版本里，先定义锚点，再定义链接
简化：<a href="#"> text </a> ---返回页面的顶端

四、列表

1、什么是列表：列表是指将具有相似特性或者具有先后顺序的几行
文字进行对齐排列
2、所有的列表都是由列表类型和列表项组成
- 列表类型：有序列表<ol>和无序列表<ul>
- 列表项：<li>，用于指示具体的列表内容
<ul>
   <li>list item</li>
   <li>jerry</li>
   <li>john</li>
   </ul>
.ul、ol和li
定义一个列表，必须使用ol/ul
列表项：列表的每个内容，使用一个li

3、嵌套的列表
可以将整个列表放在某个li里，层次结构
<ul>
<li>
书籍
<ul>
<li>童话</li>
<li>小说</li>
<li>文学</li>
</ul>
</li>
<li>家电</li>
<li>文具</li>
</ul>

五、表格

表格：显示网格数据，常用于实现页面的布局
1、创建表格：表格的基本结构
--table/tr/td(difination) 元素
2、常用属性
（1）表格的属性：border(表格的外边框)/width/height/align
/cellpadding(单元格内容和单元格边框之间的距离)
   /cellspacing(单元格之间的距离)
（2）单元格的属性: width/height/align/valign

3、表格的标题
<caption></caption>:位于<table>，作为第一个子元素存在

4、行分组：将多个行作为一组，进行统一设置的时候，使用专门的对
表格实现分组的元素
行分组元素只能出现在table里，只能包含tr元素
thead: 只能出现一次 <thead></thead>
tbody：多次
tfoot：一次

5、不规则表格：td元素而言，有colspan、rowspan属性设置单元格
跨行或者跨列
colspan:单元格跨列，横着
rowspan:单元格跨行，竖着

6、表格的嵌套：将<table>放到<td>里

六、表单

表单：交互---页面上录入数据并且提交服务器端

1、表单元素 <form>--用于承载其他交互的元素，以表单为单位提交

<form action="login.jsp" method="post">
地址信息：
包含文本框、密码框等录入数据的元素
包含一个提交按钮
</form>

2、表单上可以承载的元素

a)input元素，依靠其type属性的取值决定
文本框 type="text"
密码框 type="password"
单选按钮 type="radio"--互斥选择 name属性分组
多选按钮 type="checkbox"
提交按钮 type="submit"--提交，页面刷新
重置按钮 type="reset"--恢复到初始情况
普通按钮 type="button"--为其设置onclick,才会有功能

文件选择框 type="file"
隐藏域 type="hidden" --不会显示,常用于在页面上记载那些不希望被用户看到的东西
......

value属性的作用，取决于元素的类型，
用作初始值（文本框）、提交值（单选多选按钮）、按钮上的文本

name属性：单选或者多选按钮的分组

b)其他元素
1.lable元素:用来包含文本，使用for属性关联其他元素--单击文本时，
就像单击关联的元素一样。

<input type="checkbox" name="role" value="0" id="r1"/>
<label for="r1">超级管理员</br></label>

2.选择框：多个选项列出来，供用户选择--下拉选择、列表选择
<select>
<option value=""></option>
</select>
由size属性区分是下拉、列表框

3.分组：表单元素特有的分组
<fieldset>
<legend>组的标题</legend>
</fieldset>

4.多行文本框
<textarea></textarea>