JavaWeb-HTML - 技术栈

一、HTML&CSS&JavaSript的作用:

**1.**HTML主要用于网页为主体结构的搭建；

**2.**CSS主要用于页面元素的美化

**3.**JavaScript主要用于页面元素的动态处理;

二、HTML

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。

HTML5是HyperText Markup Language5的缩写，HTML5技术结合了 HTML4.01的相关标准并革新，符合现代网络发展要求，在 2008年正式发布。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012年已形成了稳定的版本。2014年10月28日，W3C发布了HTML5的最终版。

三、超文本:

HIML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义------本身是文本，但是呈现出来的最终效果超越了文本。

四、标记语言:

HTML由一系列标签组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

**双标签:**标签是通过一组尖括号+标签名的方式来定义的

html 复制代码

<p>HTML is a very popular fore-end technology.</p>

<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称为标签体。

单标签:

html 复制代码

<input type="text" name="username" />

属性:

html 复制代码

<a href = "http://www.xxx.com"> show detail </a>

href="网址" 就是属性，href是属性名，"网址"是属性值

五、HTML基础结构:

1.文档声明:

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本。

(1)HTML4版本的文档类型声明是:

html 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.81 Transitional//EN "http://www.w3.org/TR/html4/loose .dtd">

(2)HTML5版本的文档类型声明是(现在主要的技术选型):

html 复制代码

<!DOCTYPE html>

**2.根标签:<**html></html>标签(双标签)是整个文档的根标签，所有其他标签都必须放在html标签里面。

**3.头部元素:<**head></head>标签(双标签)用于定义文档的头部，其他头部元素都放在head标签里，头部元素包括<title></title>标签、script标签、style标签、link标、<meta/>标签;

**4.主体元素:<**body></body>标签(双标签)定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内

5.注释:

html 复制代码

<!-- 注释内容 -->

六、HTML概念词汇解释:

**1.标签(tag):**代码中的一个<>叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签

**2.属性(attribute):**一般在开始标签中,用于定义标签的一些特征

**3.文本(text):**双标签中间的文字,包含空格换行等结构

**4.元素(element):**经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素;

七、HTML语法细节:

**1.**根标签有且只能有一个

**2.**无论是双标签还是单标签都需要正确关闭

**3.**标签可以嵌套但不能交叉嵌套

**4.**注释语法为,注意不能嵌套

**5.**属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值

**6.**HTML中不严格区分字符串使用单双引号

**7.**HTML标签不严格区分大小写,但是不能大小写混用

**8.**HTML中不允许自定义标签名,强行自定义则无效

八、HTML常见标签:

1.标题标签:

标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题;标题级别数目越大，标签字号越小

html 复制代码

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

2.段落标签:

html 复制代码

<p>
    第一段文字内容
</p>
<p>
    第二段文字内容
</p>

3.换行标签:

html 复制代码

第一行内容
<hr>
第二行内容
<hr>
<hr>
第三行内容
<br>
<br>
<br>
第四行内容

4.列表标签:

**(1)有序列表:**分条列项展示数据的标签,其每一项前面的符号带有顺序特征

列表标签:<ol></ol>

列表项标签:<li></li>

html 复制代码

<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</o1>

**(2)无序列表:**分条列项展示数据的标签,其每一项前面的符号不带有顺序特征

列表标签:<ul></ul>

列表项标签:<li></li>

html 复制代码

<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</1i>
</ul>

**(3)嵌套列表:**列表和列表之前可以嵌套,实现某一项内容详细展示

html 复制代码

<ol>
    <li>
    JAVA
    <ul>
        <li>JAVASE</li>
        <li>JAVAEE</li>
        <li>数据库</l1>
    </u1>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>

5.超链接标签:

<a></a>标签为超链接标签，是点击后带有链接跳转的标签,也叫作a标签

(1)href属性用于定义连接:

**a.**href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点寻找目标资源

**b.**href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点。相对路径可以以"./"或"../"表示，"./"表示当前资源所在的路径，可以省略不写；"../"表示当前资源所在上层资源所在的路径，必须写

**c.**href中也可以定义完整的URL

(2)target用于定义打开的方式:

a._blank表示在新窗口中打开目标资源

b._self在当前窗口中打开目标资源

html 复制代码

<body>
    <a href = "01html的基本结构.html" target = "_blank">相对路径本地资源链接</a>
    <a href = "/day01-html/01html的基本结构.html" target = "_self">绝对路径本地资源链接</a>
    <a href = "http://www.baidu.com" target = "_blank">外部链接</a>
</body>

6.多媒体标签:

(1)图片标签:

<img/>是图片标签,用于在页面上引入图片

**src属性:**用于定义图片的连接

**title属性:**用于定义鼠标悬停时显示的文字

**alt属性:**用于定义图片加载失败时显示的提示文字

html 复制代码

<img src="img/logo.png" title="尚硅谷"alt="尚硅谷logo" />

(2)表格标签:

**<table></table>标签:**代表表格

**<thead></thead>标签:**代表表头,可以省略不写

**<tbody></tbody>标签:**代表表体,可以省略不写

**<tfoot></tfoot>标签:**代表表尾,可以省略不写

**<tr></tr>标签:**代表一行

**<td></td>标签:**代表行内的一格

**<th></th>标签:**自带加粗和居中效果的td

html 复制代码

<table border="1px" style="width: 40px; margin: px auto;">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张小明</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李小东</td></td>
        <td>99</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王小虎</td>
        <td>98</td>
    </tr>
</table>

**单元格跨行:**通过<td></td>标签的colspan属性实现，属性的值为"该单元格所需占用的行数"

**单元格跨列:**通过<td></td>标签的rowspan属性实现，属性的值为"该单元格所需占用的列数"

7.表单标签:

表单标签可以实现让用户在界面上输入各种信息并提交的一种标签,是向服务端发送数据主要的方式之一

**(1)<form></form>标签:**表单标签,其内部用于定义可以让用户输入信息的表单项标签

**(a).action:**form标签的属性之一,用于定义信息提交的服务器的地址

**(b).method:**form标签的属性之一,用于定义信息的提交方式

**(b.1).get:**使用get方式时数据会将表单项提交的内容以键值对的形式缀到url后,以?作为参数开始的标识,多个参数用&隔开;数据直接暴露在地址栏上，相对来说不是安全的;地址栏的长度是有限制的，所以提交的数据量是不大的；地址栏上只能是字符，不能提交文件;

**(b.2).post:**使用post方式时表单项提交的数据会通过请求体发送,默认情况下不会缀到url后;数据不会直接暴露在地址栏上，相对来说是较安全的；数据是单独打包通过请求体发送；提交的数据量比较大；请求体中可以是字符或字节数据，可以提交文件；

8.表单项标签:

表单项标签一定要定义name属性，用于明确提交时的参数名;还需要定义value属性，该属性用于明确提交时的实参

**(1)<input/>标签:**主要的表单项标签,可以用于定义表单项

**(a).name:**input标签的属性之一,用于定义提交的参数名

**(b).type:**input标签的属性之一,用于定义表单项类型

**(b.1).text:**文本框

**(b.2).password:**密码框

**(b.3).submit:**提交按钮

**(b.4).reset:**重置按钮

**(b.5).radio:**单选框按钮，多个选项选其一。多个单选框使用相同的name属性值便会存在互斥现象；可以设置value属性，表示提交的具体值；可以设置checked属性，表示默认勾选；

**(b.6).checkbox:**复选框，可以选择多个选项，当多个复选框使用相同的name属性时不存在互斥现象；可以提交多个值，具体提交的值通过标签的value属性确定，可以设置checked属性，表示默认勾选

(b.7).hidden: 隐藏域，通常使用于当希望用户提交一些特定的信息考虑安全问题或不希望提交的数据发送改变。
**(b.8).file:**上传文件表单项

**(2)<textarea></textarea>标签:**文本域，多行文本框;可以指定name属性

**(3)<select></select>标签:**下拉框标签，其中具体的下拉框内容由子标签<option></option>确定。name属性应该给<select></select>标签设置，而value属性应该给子标签<option></option>设置；还可以给子标签<option></option>设置"selected"属性，表示该选项被默认选择;

html 复制代码

<form action="http://www.atguigu.com" method="get">
    用户名<input type="text" name="username" /> <br>
    密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br>
    <input type="submit" value="登录"/>
    <input type="reset" value="重置"/>
</form>

9.布局相关标签:

**(1)<div></div>标签:**俗称"块",主要用于划分页面结构,做页面布局.自己独占一行的元素，CSS样式的高和宽等等往往都是生效的

**(2)<span></span>标签:**俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰；CSS样式的高和宽等等往往都是不生效的；不会独占一行的元素。

CSS设置样式时通过元素的style属性进行设置:style = "样式名:样式值;样式名:样式值;...."

html 复制代码

<div style="width: 500px; height: 400px;background-color: cadetblue;">
    <div style="width: 408px; height: 180px;background-color: beige;margin: 1px auto;">
        <span style="color:blueviolet;">页面开头部分</span>
    </div>
    <div style="width: 480px; height: 10px;background-color: blanchedalmond;margin: 1apx auto;">
        <span style="color:blueviolet;">页面中间部分</span>
    </div>
    <div style="width: 480px; height: 188px;background-color: burlywood;margin: 18px auto;">
        <span style="color:blueviolet;">页面结尾部分</span>
    </div>
</div>

八、特殊字符

对于某些html代码来说，某些符号是有特殊含义的，对于有特殊含义的字符需要通过转义字符来表示。这些特殊字符也成为字符实体。字符实体有三部分：一个和号 '&' 和一个实体名称(或者一个 '#' 和一个实体编号)，以及一个分号';'。

HTML中有用的字符实体 HTML 符号实体参考手册_w3cschool

|------|-----|-----------|---------|
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| | 空格 |   |   |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' | ' |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |