HTML相关知识入门

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编码的结果
posted @ 2020-07-30 09:40  笔架山Code  阅读(112)  评论(0编辑  收藏  举报