HTML

HTML简介

HTML(Hyper TextMarkupLanguage) 超文本标记语言。

超文本： 超越了文本仅仅展示信息的功能范畴，泛指：图片、有样式的文字、超链接。

标记： 标签。

语言： 工具。

HTML是由标签所组成的语言，能展示超文本的效果。

HTML的语言特征

HTML代码是由头和体组成。

HTML文件的扩展名为html或者htm。

HTML文件由浏览器直接执行解析，无需编译，直接由上到下依次解析执行。

HTML标签通常由开始便签和结束标签组成，例如：<font>内容体</font>。

<!DOCTYPE html><!--文档声明-->

<html>

    <head>

        <title>页面标题</title>

    </head>

    <body>

        需要想用户展示的信息

    </body>

</html>

注：推荐使用开发工具Notepad++、HBuilder。

字体标签及格式化标签

<font></font>标签

字体标签，用于展示效果中修饰文字样式。

<font 属性名="属性值">文字</font>

size：控制字体的大小，范围1~7，超过范围无效。

color：控制字体的颜色（例如：red,#ffff等）

face：控制字体的类型。只能设置系统字库中有的字体类型

    <!DOCTYPE html>

    <html>

        <head>

            <title>我的第一个示例</title>

        </head>

        <body>

            <font color="red" size="7" face="java体">美好一天，从学习开始</font>

        </body>

    </html>

<br\>标签

换行标签，用于展示效果中换行，浏览器解析时会自动忽略。
<p></p>标签

段落标签，用于展示效果中的划分段落，并且自动在段前和段后自动加空白行。

align:段落内容的对齐方式(left，right，center)，默认是left，内容居左。

<h1></h1>

标题标签，用于展示效果中划分标题，其中<h1></h1>最大，<h6></h6>最小。
&nbsp

空格符号，用于展示效果中显示一个空白的位置。
HTML注释

格式：

    <!DOCTYPE html>

    <html>

        <head>

            <title>我的第二个示例<title>

        </head>

        <body>

            <h1>静夜思标题</h1>

            <h2>静夜思标题</h2>

            <h3>静夜思标题</h3>

            <h4>静夜思标题</h4>

            <h5>静夜思标题</h5>

            <h6>静夜思标题</h6>>

            静夜思<br/>

            李白<br/><br/>

            床前明月光，

            <p>疑是地上霜。</p>

            <p>举头望明月，</p>

            <p>低头思故乡。</p>

            李&nbsp;&nbsp;白

            <!--你好，我是注释-->

        </body>

    </html>

图片标签

<img/>标签

用于页面效果中展示的一张图片。

src:指明图片的路径。（必有属性）

图片路径的写法：

绝对路径：文件在硬盘上的具体位置。（例如：C:\test.jpg）

相对路径：从引入者所在目录出发（例如：../img/test.jpg），../表示上一层目录，./表示当前目录。

互联网路径：必须在前面加上http://。（例如：http://www.baidu.com/test.jpg)

列表标签

<ul></ul>标签

无序列表标签：用于在效果中定义一个无序列表。
<li></li>标签

列表条目项标签，用于在效果中定义一个列表的条目。
<ol></ol>标签

有序列表标签，用于在效果中定义一个有序列表。

    <!DOCTYPE html>

    <html>

        <head>

            <title>列表示例</title>

        </head>

        <body>

            <ul>

                <li>手机</li>

                <li>电脑</li>

            </ul>

            <ol>

                <li>手机</li>

                <li>电脑</li>

            </ol>

        </body>

    </html>

超链接标签

<a></a>标签

超链接标签，用于在效果中定义一个可以点击跳转的链接。

href:超链接跳转路径。

本机路径：相对路径和绝对路径。

外网路径：http://地址。

本页：#。

    <!DOCTYPE html>

    <html>

        <head>

            <title>超链接示例</title>

        </head>

        <body>

            <!--点击链接跳转百度-->

            <a href="http://www.baidu.com">百度</a>

            <!--超链接不仅仅可以是文字，也可以是其他内容，例如图片-->

            <a href="demo.html">

                <img src="../img/test.jpg"/>

            </a>

            <!--超链接还可以链接到图片-->

            <a href="../img/test.jpg">链接到一张图片</a>

        </body>

    </html>

表格标签

<table></table>标签

表格标签，用于在效果中定义一个表格。

border：设置表格边框的粗细。

width：设置表格的宽度

<tr></tr>标签

表格的行标签，用于在效果中定义一个表格的行。
<td></td>标签

表格的单元格标签，用于在效果中定义一个表格行中的单元格。
<th></th>标签

表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格。
单元格合并

<td>或者<th>都有两个单元格合并属性。

colspan：跨列合并单元格。

rowspan：跨行合并单元格。

    <!DOCTYPE html>

    <html>

        <head>

            <title>表格示例</title>

        </head>

        <body>

            <table border="1" width="100%">

                <tr>

                    <th>1</th>

                    <th>2</th>

                    <th>3</th>

                </tr>

                <tr>

                    <td colspan="2">1</td>

                    <td>2</td>

                </tr>

                <tr>

                    <td rowspan="2">1</td>

                    <td>2</td>

                    <td>3</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>2</td>

                </tr>

            </table>

        </body>

    </html>

块标签

<span></span>标签

行级的块标签：用于在效果中一行上定义一个块，进行内容显示。

有多少内容，就会占用多大空间。<span></span>不会自动换行。

<div></div>标签

块级的块标签，用于在效果中定义一个块，默认占满一行，进行内容的显示。

    <!DOCTYPE html>

    <html>

        <head>

            <title><title>

        </head>

        <body>

            <span>我就占用这么大的空间<span>

            <div>我要占满一行</div>

        </body>

    </html>

表单标签

<form></form>标签

在效果中定义一个表单，用于提交用户填写数据。

action：将数据提交到何处。

method：将数据以何种方式提交。（提交可定义：get或者post，默认get）；

get和post提交方式的区别：

1.get提交的参数列表拼接到了地址栏的后面;post方式不会。

2.get方式提交的数据敏感，信息不安全；post方式提交的数据相对安全。

3.get方式提交的数据量有限；post方式从理论上提交的数据量无限大。

*尽量使用post方式提交表单。

输入项标签

<input/>标签

表单输入项标签之一，用户可以在该标签中通过填写和选择数据的输入。

type:设置该标签的种类

text：文本框。

password：密码框。

radio：单选框。

checkbox：复选框。

submit：提交按钮，用于控制表单提交数据。

reset：重置按钮。

file：附件框，用于文件上传。

hidden：隐藏域。一般用作提交服务器所需要的，但不需要用户看到的。

button：普通按钮。

name：单选框、复选框进行数据分组。/ 设置该标签对应的参数名。

value：设置该标签对应的参数值。

checked：设置单选框、复选框的默认选中状态。

readonly：设置该标签的参数值只读，用户无法手动更改，数据可以正常提交。

disabled：设置该标签不可用，参数无法更改，且参数值也无法提交。

选择框标签

<select></select>标签

定义一个选择框。

name：设置该标签对应的参数名。

multiple：设置该标签选择项全部显示，并且可以进行多选提交，默认为单选。

<option></option>标签

选项标签，用于为一个选择框添加一个选项。

value：设置需要提交的参数值。

selected：设置选项的默认选中状态。

注意事项：<option>的内容体一般是用来进行展示，参数值应该是option的value属性值。

文本域标签

<textarea></textarea>标签

表单输入项标签之一，用户可以在该标签上通过输入进行数据的输入。

name：设置该标签对应的参数名

文本域和文本框的区别

1.文本框不能换行，文本域可以。

2.文本框的参数值是value属性，文本域的参数值是标签的内容体。

    <form action="#" method="get">

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

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

        <input type="radio" name="sex" checked="checked">男

        <input type="radio" name="sex">女

        <select name="city">

            <option value="1">选择选项卡一</option>

            <option value="2">选择选项卡二</option>

        </select>

        描述：<textarea name="description">xxxxx</textarea>

        <input type="submit"/>

    </form>

URL编码的简述及使用理由

为什么使用URL编码?

为了保证表单数据传递时能更好的区分name和value。保证数据传递的准确性。

正常提交数据：

?password=123&username=zhangsan

非正常提交数据：

?password=123#ddd&ddd&username=zhangsan

URL编码解决方式：特殊符号，中文。

例如：& -> %26。

?password=123#ddd%26ddd%26username=zhangsan。

URL编码的表现形式和本质

例如：你好，用UTF-8编码，编码的字节数组为：

[-28,-67,-96,-27,-91,-67]

URL 编码后：

%E4%BD%A0%E5%A5%BD

1.你好，进行普通的编码，编码成字节数组。【使用的是页面规定的字符集，例如utf-8】。

2.字节数组中的每一个元素，都会从10进制，转换为16进制。

3.把已经转换为16进制的字节数组，以%进行拼接。拼接出的字符串就是URL编码后的结果。

JavaWeb第一天--HTML的更多相关文章

学习JAVAWEB第一天
第一天:单元测试(junit)黑盒测试:不需要写代码,给输入值,看程序能否给出期望值白盒测试:需要写代码,关注程序的具体执行流程junit使用步骤:步骤1:定义一个测试类建议类名,被测试类名后面加一个 ...
javaWeb第一天
//第一个JavaWeb项目package com.chy.action; import java.io.IOException; import javax.servlet.ServletExcept ...
JAVAWEB第一节课的课后思考
第一开发一个网站需要的一些技术至少熟悉一种建站程序.(html,javascript等等)对空间和域名的知识有一定的了解.有一些美工基础(例如ps设计等等).对编程有一些了解.HTML的代码知识基本 ...
巩固javaweb第一天
巩固内容: 实例解析 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元(me ...
Eclipse+Tomcat7.0+MySQL 连接池设置
http://blog.sina.com.cn/s/blog_85d71fb70101ab99.html 工程名:JavaWeb 第一步:配置server.xml 在Tomcat的server.xml ...
JavaDailyReports10_17
学习JavaWeb第一天输出我的第一个HelloWorld! 1 <%@ page language="java" import="java.util.*&quo ...
第一个远程javaweb项目测试全过程
2017-5-20,在这个奇特的日子,我不再满足于在本地测试javaweb,于是在上腾讯云买了第一个云服务器,由于是学生认证,所以一个月只要10块钱,还是要抢的,每天早上9点开抢打开后,发现其实是一 ...
从零开始写JavaWeb框架（第一章节）
买了本<从零开始写JavaWeb框架> 因为是第一次用IDEA,期间遇到很多问题,比如:怎么在IDEA中配置tomcat: 在IDEA界面的右上角点击: 点击+,选择Maven 到了如下界 ...
JavaWeb学习第一阶段结束
模仿狂神实现简单的用户增删改查,增加了前端登录时的密码验证 JavaWeb学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...

随机推荐

C#中Equals 与== 的区别
这个问题听说是大公司面试都会问的问题,以前不怎么了解,好奇心勾引我来研究一下首先从值类型分析,先写几句简单的代码供测试用,二行语句输出的都是true, 说明＝＝与Equals功能是相同的, 判断的都 ...
从websocket协议出发，了解应用层协议，传输层协议，网络的7层协议
其他关联连接 :TCP的三次握手(建立连接)和四次挥手(关闭连接) 1.websocket是全双工,不同于传统半双工通信传统的Web应用中,浏览器与服务器交互都是半双工通信(但并不完全是半双工通信, ...
ActiveMQ传输协议
ActiveMQ默认的传输协议是TCP 在activemq的配置文件 /conf/activemq.xml可对配置文件进行修改和查看
Angle Beats Gym - 102361A（计算几何）
Angle Beats \[ Time Limit: 4000 ms \quad Memory Limit: 1048576 kB \] 题意给出 \(n\) 个初始点以及 \(q\) 次询问,每次 ...
cube.js 最近的一些更新
cube.js 是一个和不错的数据分析框架,最近又有了一些新的功能支持,以下是一些简单的总结基于web socket 的预览支持 react hooks api 支持支持基于reecharts ...
FCB CCB FileObject
CCB ContextControlBlock 是存Private信息的,这个FO的特殊信息 FCB FileControlBlock 是存全局信息的 FO FileOb ...
c# winform richtextbox控制每行颜色 + 滚动条始终滚动到最底部
/// <summary> /// 输出 /// </summary> /// <param name="content"></param ...
日志篇随着win10更新...
随着win10更新到最新..我发现电脑出了点状况.. 一是电脑睡眠主机不关闭...然后用了 https://jingyan.baidu.com/article/cb5d6105d76343005c2 ...
一文带你了解 Flink 的基本组件栈
作为实时计算领域的佼佼者,Flink 的基本组件同样值得我们仔细研究. Flink 同样遵循着分层的架构设计理念,在降低系统耦合的同时,也为上层用户构建 Flink 应用提供了丰富且友好的接口. Fl ...
Javascript的闭包（上）
了解了预编译和作用域的相关知识以后我们来看一下开发中常见的工具——闭包.还是来看一个实例. function a(){ function b() { ; console.log(aa); } ; re ...

JavaWeb第一天--HTML

HTML

HTML简介

HTML的语言特征

字体标签及格式化标签

图片标签

列表标签

超链接标签

表格标签

块标签

表单标签

输入项标签

选择框标签

文本域标签

URL编码的简述及使用理由

JavaWeb第一天--HTML的更多相关文章

随机推荐

热门专题