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. pipeline parameters指令

    目录 一.简介 二.类型 参数类型 多参数 一.简介 参数化pipeline是指通过传参来决定pipeline的行为.参数化让写pipeline就像写函数,而函数意味着可重用.更抽象.所以,通常使用参 ...

  2. vue3 到底哪里好?看这一篇就够了

    之前写的关于 vue3 的文章,好多人吐槽:这些API每次使用都要引入一遍,感觉有点麻烦. 今天我们就来看看 vue3 相比 vue2 的优点有些啥? 为啥有些人说:自从写了 ts vue3 再也回不 ...

  3. 高可靠性——TSN 802.1Qci协议介绍

    TSN协议族根据实现功能可以分为:定时与同步.延时.可靠性和资源管理四个类别,往期的时间同步--TSN协议802.1AS介绍一文向大家介绍了定时与同步功能的核心--802.1AS协议,而在基于TSN工 ...

  4. 20个ios登陆界面

    原文:http://favbulous.com/post/1001/24-unique-ios-login-screen-showcase Eeve Evernote Food Recood Hips ...

  5. Linux_ShellCode总结

    在寄存器都是非理想值情况下(shellcode可根据环境具体触发时寄存器的值做长度调整),我本着最优通用的原则,整理了Linux下32位和64位最短通用shellcode的编写. 32位 有" ...

  6. CF34A Reconnaissance 2 题解

    Content 有 \(n\) 士兵站成一个环,第 \(i\) 个士兵的身高为 \(h_i\),试求两个士兵身高差最小的两个人的编号,如果有多组解,输出任意一组即可. 数据范围:\(2\leqslan ...

  7. Python3 面向对象之-----元类

    元类 1. 类也是对象 在大多数编程语言中,类就是一组用来描述如何生成一个对象的代码段.在Python中这一点仍然成立: >>> class ObjectCreator(object ...

  8. Android 控件使用教程(三)—— NineGridImageView 九宫格展示图片

    引子 上文降到RecyclerView的使用,确实非常方便易用,而且样式多样,很灵活.但在图像展示时,经常有朋友圈和微博等9张图以内的图片展示需求,这时候,不是一个可以无限下滑的RecyclerVew ...

  9. 【LeetCode】469. Convex Polygon 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 计算向量夹角 日期 题目地址:https://leet ...

  10. 【九度OJ】题目1201:二叉排序树 解题报告

    [九度OJ]题目1201:二叉排序树 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1201 题目描述: 输入一系列整数,建立二叉排序 ...