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注释

    格式：<!--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的更多相关文章

  1. 学习JAVAWEB第一天

    第一天:单元测试(junit)黑盒测试:不需要写代码,给输入值,看程序能否给出期望值白盒测试:需要写代码,关注程序的具体执行流程junit使用步骤:步骤1:定义一个测试类建议类名,被测试类名后面加一个 ...

  2. javaWeb第一天

    //第一个JavaWeb项目package com.chy.action; import java.io.IOException; import javax.servlet.ServletExcept ...

  3. JAVAWEB第一节课的课后思考

    第一开发一个网站需要的一些技术 至少熟悉一种建站程序.(html,javascript等等)对空间和域名的知识有一定的了解.有一些美工基础(例如ps设计等等).对编程有一些了解.HTML的代码知识基本 ...

  4. 巩固javaweb第一天

    巩固内容: 实例解析 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元(me ...

  5. Eclipse+Tomcat7.0+MySQL 连接池设置

    http://blog.sina.com.cn/s/blog_85d71fb70101ab99.html 工程名:JavaWeb 第一步:配置server.xml 在Tomcat的server.xml ...

  6. JavaDailyReports10_17

    学习JavaWeb第一天 输出我的第一个HelloWorld! 1 <%@ page language="java" import="java.util.*&quo ...

  7. 第一个远程javaweb项目测试全过程

    2017-5-20,在这个奇特的日子,我不再满足于在本地测试javaweb,于是在上腾讯云买了第一个云服务器,由于是学生认证,所以一个月只要10块钱,还是要抢的,每天早上9点开抢 打开后,发现其实是一 ...

  8. 从零开始写JavaWeb框架（第一章节）

    买了本<从零开始写JavaWeb框架> 因为是第一次用IDEA,期间遇到很多问题,比如:怎么在IDEA中配置tomcat: 在IDEA界面的右上角点击: 点击+,选择Maven 到了如下界 ...

  9. JavaWeb学习第一阶段结束

    模仿狂神实现简单的用户增删改查,增加了前端登录时的密码验证 JavaWeb学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...

随机推荐

  1. 201671010402-陈靖 实验十四 团队项目评审&课程学习总结

    项目 内容 任课教师博客主页链接 https://www.cnblogs.com/nwnu-daizh/ 作业要求链接地址 https://www.cnblogs.com/nwnu-daizh/p/1 ...

  2. webpack 的安装与使用

    这里使用webpack4.41.2 为例 一.安装webpack 1.本地安装,安装最新版本或特定版本 npm install --save-dev webpack npm install --sav ...

  3. mysql数据库锁的机制-及事务事件

    事务隔离级别,脏读.不可重复读.幻读,乐观锁.悲观锁(共享锁.排它锁) 数据库事务具有四个特征,分别是原子性(Atomicity).一致性(Consistency).隔离性(Isoation).持久性 ...

  4. Layui 表单赋值 编辑页面赋初值

    原文:https://blog.csdn.net/yulongxue/article/details/97924591 //编辑 if (id > 0) { $.post("/Hand ...

  5. 五一DAY1数论学习笔记

    by ruanxingzhi 整除性 如果a能把b除尽,也就是没有余数,则我们称a整除b,亦称b被a整除.(不是除以,是整除!!) 记作:\(a|b\) |这个竖杠就是整除符号 整除的性质 自反性 对 ...

  6. django数据请求

    目录 数据请求: 静态文件加载 form表单 : 数据请求: request方法: 数据请求: 静态文件加载 静态文件加载: 1.默认情况下所有的html文件都是放在templates文件夹内 静态文 ...

  7. Android Studio 之 GridView

    1. 数据源 ArrayList Cursor 2. 适配器 Adapter ArrayAdapter SmipleAdapter SmipleCursorAdapter BaseAdapter

  8. js追加html元素

    jquery追加html代码,添加元素 .append() //新增仲裁申请人 $("."+inputName).append("<div class=\" ...

  9. c++primer（第五版） 阅读笔记_第1章

    一.结构图: 二.代码及练习题 1.1节 编写一个简单的C++程序 1.1节练习 练习1.1: 查阅使用的编译器的文档:我使用的是vs2013,其文档为https://docs.microsoft.c ...

  10. C# Process.Start()函数打开url被360拦截问题

    使用Process.Start(new ProcessStartInfo(url))来打开某一网址的时候,往往会被360提示 类似这样的 信息: “威胁:修改此注册表项将更改IE连接设置.少数软件会修 ...