Html5 总结快捷键方式

来源：互联网发布：mac iphone 蓝牙网络编辑：程序博客网时间：2024/06/06 00:31

快捷键与各个标签的总结

1）添加Html注释的快捷键：ctrl+shfit+/ 形式：

2) 在文件主体中只打出a再按tab键就会出现<a href=""></a>

3) 在文件主题中只打出li*4再按tab键就会出现一下样式：

<p></p>

在同一的段落文字按着ait键同时进行编写

<p>zheshiduanluo</p>
<p>zheshiduanluo</p>
<p>zheshiduanluo</p>

<li></li>ctrl+D：复制当前（duplicat/复制）

4）Html中标题的大小

<h1>最大字体 <h6>最小字体

只需要用户把内容放进标签里然后由浏览器负责显示！

5）<p>这是段落（paragraph）标签页面的一个段落，自动换行</p>

6) <a>标签的作用是跳转包括页见跳转，页内跳转例子如下：

href属性指定链接的目标

target属性指定打开目标页面的方式，其取值包括

_self:在当前页面中打开，默认；

_blank:在新的页面中打开；

_parent:父子关系，嵌套关系；

_top:

7）页内跳转

在目标标签处指定id="……"，在链接处指定href="#……"

id属性是页面元素的唯一标识

“锚点”：anchor

8）图片标签<img>

src属性：source，图片资源的URL地址，可以是本地的，也可以是远程的。

<imgsrc="月河街.jpg">

<imgsrc="https://youimg1.c-ctrip.com/target/100m090000003n6a32DF4.jpg">

alt属性：alternative（可替代的），即当资源不存在时，替代显示的文字内容。

9）路径：

相对路径：

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利，且实验证明相对路径在搜索引擎中表现良好。

绝对路径：

在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径。所谓“绝对路径”就是从根目录开始一直到该目录的全程的路径，举个例子："c:\apache\htdocs\cgi-bin\test.cgi"就是文件test.cgi的绝对路径。

".."表示上一级目录

"."表示当前目录

在同一级目录：

<imgsrc="p1.jpg">

在上一级目录：

<imgsrc="../p1.jpg">

在下一级目录：

<imgsrc="pic/p1.jpg">

10）杂项总结

<span>：可以将部分文本独立出来

<br>：强制换行

<hr>：绘制一条横线

<base>：设置页面的基准地址，从而简化地址的书写

<basehref="http://www.runoob.com/images/logo.png">

</head>
<body>
<imgsrc="logo.png">
<imgsrc="logo.png">

11）无序列表

<ul>:unorderedlist 定义一个无序列表

<li>:listitem 定义一个列表项

type 用来指定无序列列表的符号，取值有:

disc：实心的圆点，默认值

circle:空心的圆圈；

square：实心的正方形；


<ul type="disc">
<li>浙江</li>
<li>鹤壁</li>
<li>河南</li>
<li>东北</li>

12）有序列表

<ol>ordered list.有序列表，即表列带的序号

type：属性指定序号的类型其取值：

1：序号为1.2.3.4默认值

A：序号为A。B。C；

a：序号为a。b。c；

l：序号为I II III IV；

i：序号为i ii iii iv；

type：指定类型

start：属性指定从第几个开始；当取值为0或负数，依旧按照数值进行执行！

13）自定义列表

<dl>defined list 定义一个自定义列表

<dt>defined title 列表项标题

<dd>defined description 列表项的描述

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>自定义类表的使用</title>
</head>
<body>
<dl>
  <h1>河南鹤壁简介</h1>
  <dt>河南</dt>
  <dd>麻雀虽小，五张俱全！</dd>
  <dt>鹤壁</dt>
  <dd>具有母亲河自称！</dd>
  <dt>新区</dt>
  <dd>樱花大道，华夏南路之美号！</dd>
</dl>

14）表单

什么是表单？收集用户填写的信息，并将其提交到后台服务器。

<form>

<action>属性：指定提交的地址

<method>属性：指定提交的方式，get/post；

1. Get和post的区别get

1）长度的限制get限制为2kb以内；

2）安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获。

post传送的数据量较大，一般被默认为不受限制。get安全性非常低，post安全性较高。

15）文本框

<inputtype="text">

Maxlength：指示文本能接收的最大字符个数；

Size：指示文本框的大小（宽度）

Value：指定默认初始值

16）密码框

密码框和文本框是一样的，文本框的属性同样适用于密码框，唯一不同的是密码框是掩码的形式显示内容，保证安全。

4.4 label的作用

1）可以单独对其应用相应的样式

2）for可以使之某个<input>关联，即当单击文本激活相应的<input>。

17）单选按钮

<input type="radio"name="role"> 老大
<input type="radio"name="role">老二
<input type="radio"name="role"checked> 老三

如果需要将若干个单选按钮编为一组（一组最多只有一个被选中）需要设置相同属性的name属性

如果需要默认选中某个选项，需要加上checked属性。

标签的属性表示形式：

1）键值对：属性名=属性值

Type=“text” maxlength=“6”

2)一些取值为布尔类型的属性直接使用属性名

Checked readonly

18）多选按钮

<inputtype="checkbox"checked>音乐
<input type="checkbox" checked>舞蹈
<input type="checkbox">唱歌
<input type="checkbox">绘画
<input type="checkbox">聊天

19）提交按钮

<inputtype="submit">

1）点击按钮之后跳转到form表单指定的位置Action

2）Value属性：value上的值对应的就是显示按钮上的文字。

3）点击按钮：将form表单中的input的name属性的值（键）和用户输入值组成的键值对（或input 标签value 属性对应的值）。并凭借到form表单Action属性值后面。

http://localhost:63342/untitled/chapter4/result.html?name=123344&password=&sex=1

http://localhost:63342/untitled/chapter4/result.html?name=&password=

20）重置按钮

<inputtype="reset"value="刷新">

1) 点击按钮，重置表单内部form输入框（单选按钮）

2) Value属性：value对应的值就是按钮上显示的文字。

21）普通按钮

<inputtype="button"value="校验">

1）点击按钮，没有任何反应

2）Value属性：value对应的值就是按钮上显示的文字。

22）图片按钮

<inputtype="image"src="胖迪.jpg.jpg"alt="爱你呦！">

3）作用和submit按钮一样

4）需要设置src属性的值；如果src对应的路径没有找到图片；并且没有设置alt属性，按纽显示默认值“提交”，如果设置了alt属性则显示alt的值。（类似img标签）

23）<button>标签

1）内容可以是任意资源（eg/图片/段落/视频....）。

2）当button标签放置在form内部，作用和submit一样；

格式化快捷键：ctrl+Alt+L

关于button按钮的见解

知道：button是定义一个按钮，但是在表单中也有一个可以定义按钮，
我们知道当<inputtype="button">的时候也是在网页上创建了一个按钮,
现在要说的是这个button这个标签和input里面的标签有怎样的区别。当然
这个标签为我们提供了更为强大的功能，我们可以设置button，设置button上
面的文字，甚至可以加载图像等等多媒体
在HTML5中button标签有增加了一些属性，比如说autofocus，disabled
form，formation，formenctype，formmethod，fornovalidate，formtarget
name，type，value下面我们做一几个小小的案例来说明这个标签:-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">这是一个按钮</button>
<hr/>
<br/>

<button type="button">
<img src="https://www.baidu.com/img/bd_logo1.png"width="100" height="50">
</button>

<hr/>
<button type="button"autofocus="autofocus">已经获得焦点</button>


<hr/>
<button type="button"disabled="disabled">失效</button>

<formaction="http://www.w3school.com.cn/example/html/form_action.asp"
method="get">
请选择你喜爱的项目:
<button name="subject" type="submit"value="HTML">HTML</button>
<button name="subject" type="subject"value="CSS">CSS</button>
</form>


</body>
</html>

阅读全文

3 0