HTML

注意点

  1. html是不区分大小写的
  2. 建议包括嵌套,不要交叉嵌套
  3. 文件后缀名可以是.html.htm

格式

<!------类似于java中类的大括号-------->
<html>
<head>
<!---head里写一些解释说明文字----->
<title>标题</title>
</head>
<body>
<!------需要给用户展示的内容------->
</body>
</html>

标签

  1. <h1></h1>标题
  2. <p></p>段落标签
  3. <a href = ""></a>超链接标签
    • target属性

      • self:在当前窗口打开链接
      • blank:在新窗口打开链接
  4. 没有内容体的标签是空标签:<br/>,自关闭

路径

  1. 相对路径:相对于某个资源的地址

    • ./:当前路径·
    • ../:上一级目录
    • ../../:上一级再上一级目录
  2. 绝对路径:
    • 本地绝对路径

      • 指某个资源在某个盘符下的全路径
    • WEB绝对路径
      • 指某个资源在WEB应用的根地址下的全路径

图片标签

<img src = "" />u
属性:src,width,height
src指明图片路径写法:
内网路径:
绝对路径:文件在硬盘上的具体位置(不建议使用)
相对路径:从引入者所在目录出发(建议使用)
互联网路径:
必须在网址前面加上http
例如:http://www.baidu.com/xxx.jpg

列表标签

  1. 定义列表

  2. 有序列表

    <ol type = "">
    <li>第一</li>
    <li>第二</li>
    </ol>
  3. 无序列表

    <ul type = "">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    </ul>

文字修饰标签

<b>粗体字</b>
<i>斜体字</i>
<em>着重字</em>
<strong>加强语气</strong>

转义字符

&lt : 表示`<`
&gt : 表示`>`

字体标签

<font 属性名 = “属性值”>字体标签示例</font>

格式化标签

换行:<br/>

段落标签:<p align = "left"></p>
用于划分段落,自动在段前和段后自动加空白行
属性:align
默认是left,内容居左
right 右
center 居中 标题标签:<h1></h1>
用于展示效果中划分标题,1-6级 &nbsp 空格符号,用于展示效果中显示一个空白位置 html注释:<!-----注释内容------>

超链接标签

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

属性href:
内网本机路径:相对路径和绝对路径
互联网路径:http://地址
本页:默认跳转到本页 注意:
1.标签体内容不仅可以是文字,也可以是其他内容,如图片
2.href属性不仅可以链接到HTML上,也可以链接到其他文件上

表格标签

<!--定义一个表格-->
<table border = "" width = "">
<tr>
<!---定义表格的一行--->
<td colspan = "">
<!---colspan是跨列合并单元格--->
<!---rowspan是跨行合并单元格--->
<!---定义表格的单元格--->
</td>
<th>
<!---定义表格的表头单元格--->
<!---内容居中加粗--->
</th>
</tr>
</table> 合并单元格步骤:
1.确定合并那几个单元格,是跨行还是跨列
2.在第一个出现的单元格上书写合并单元格属性
3.合并几个单元格,属性值就写多少
4.被合并的单元格必须删掉

块标签

<!-----适用于大量信息展示------->
<!-----会自动换行,默认占满一行------->
<div>内容体</div> <!-----适用于少量信息展示------->
<!----有多少内容占多少空间,不会自动换行----->
<span>内容体</span>

表单标签

表单的作用:用来提交用户输入的数据,提交给服务器的程序

<!--1.定义一个表单-->
<form action = "" method = "">
<!--2.在表单中定义对应的表单输入项-->
<!--type属性确定输入框类型-->
<input type = ""/>
<!--下拉列表-->
<select>
<option></option>
</select>
</form> action属性:表单提交地址,默认提交到本页 method属性:设置表单的提交方式
method常见设置:get(默认方式)/post get方式特点:
把数据拼接到地址栏上
敏感信息不安全
提交数据量有限
post方式特点:
不会拼接到地址栏上
相对安全
理论上提交数据量无限 推荐使用post方式 <input/>标签:
type属性:
text:默认,文本输入框
password:密码框,内容非明文
radio:单选框
checkbox:复选框
submit:提交按钮
reset:重置按钮
file:附件框,用于文件上传
hidden:隐藏域,提交服务器需要,但不需给用户看到
button:普通按钮。需要和JS事件联用 name属性:用来分组,以及用来获取参数 value属性:设置该标签对应的数值 readonly属性:设置该标签参数只读,用户无法修改,但可提交 disabled属性:设置该标签参数不可用,不能修改也不能提交 下拉列表标签:
<select name="" multiple="multiple">
<option value="" selected="selected">选项一</option>
</select> name属性:设置该标签对应的参数名
multiple属性:可以多选提交 value属性:设置需要提交的参数值
selected属性:默认选中 文本域标签:
<textarea name=""></textarea> name属性:设置该标签对应的参数名

URL编码

URL编码解决方式:特殊符号,中文

目的是为了保证表单数据传递时能更好分出name和value,保证数据的完整性

URL编码的本质:

  1. 先进行普通的编码,编码成字节数组
  2. 字节数组中的每一个元素都会从10进制转为16进制
  3. 把已经转为16进制的字节数组,以%进行拼接,拼接出来的字符串就是URL编码的结果

HTML相关知识入门的更多相关文章

  1. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  2. Linux入门之安装及相关知识。

    一.VMware虚拟机安装与使用 1.1.VMware 简介 VMware是一个虚拟PC的软件,可以在现有的操 作系统上虚拟出一个新的硬件环境,相当于模拟 出一台新的PC.以此来实现在一台机器上真正 ...

  3. 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  4. Oracle 基础知识入门

    前记: 近来项目用到Oracle数据库,大学学了点,后面基本忘记得差不多了,虽然基本语法跟sql 差不多,但是oracle知识是非常多的. 这里简单说点基础知识,希望后面补上更多的关于ORacle知识 ...

  5. web跨域及cookie相关知识总结

    原文:web跨域及cookie相关知识总结   之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要 ...

  6. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  7. listener监听器的相关知识

    从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...

  8. UIViewController相关知识

    title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...

  9. 【转】java NIO 相关知识

    原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...

随机推荐

  1. Java中的循环结构(二)

    循环结构(二) 学习本章有道的单词: rate:速度,比率 young:年轻的,年少 schedule:时间表,调度 neggtive:消极的;否定 customer:顾客,观众 birthday:生 ...

  2. redis实例cpu占用率过高问题优化

    目录 一.简介 一.简介 前情提要: 最近接了大数据项目的postgresql运维,刚接过来他们的报表系统就出现高峰期访问不了的问题,报表涉及实时数据和离线数据,离线读pg,实时读redis.然后自然 ...

  3. CF977C Less or Equal 题解

    Content 给定一个 \(n\) 个数的数列 \(a_1,a_2,a_3,...,a_n\) 和一个数 \(k\),试找出这样的一个数 \(x\),使得数列中有 \(k\) 个数小于等于 \(x\ ...

  4. java 、abstract修饰的【抽象类】【比如几何图形类】

    现实中问题引入 现实中一类具有共同特征的类,但是无法具体实现.,比如我们定义了一个几何类,叫做Shape,我们有一个方法要计算周长,直接在每个子类实现虽然可以,但是无法通过Shape定义的实例来访问到 ...

  5. libevent源码学习(9):事件event

    目录在event之前需要知道的event_baseevent结构体创建/注册一个event向event_base中添加一个event设置event的优先级激活一个event删除一个event获取指定e ...

  6. 【LeetCode】463. Island Perimeter 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 减去相交部分 参考资料 日期 题目地址:https: ...

  7. 【LeetCode】913. Cat and Mouse 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 参考资料 日期 题目地址:https://leetc ...

  8. 【LeetCode】676. Implement Magic Dictionary 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 汉明间距 日期 题目地址:https://le ...

  9. [LeetCode] 448. Find All Numbers Disappeared in an Array 找到数组中消失的数字

    题目描述 给定n个数字的数组,里面的值都是1-n,但是有的出现了两遍,因此有的没有出现,求没有出现值这个数组中的值有哪些. 要求不能用额外的空间(除了返回列表之外),时间复杂度n 思路 因为不能用额外 ...

  10. Spring Boot 使用 Filter

    Filter 是 JavaEE 中 Servlet 规范的一个组件,位于包javax.servlet 中,它可以在 HTTP 请求到达 Servlet 之前,被一个或多个Filter处理. 1. 编写 ...