HTML快捷键

最新推荐文章于 2024-09-01 15:20:57 发布

是知左呀~

最新推荐文章于 2024-09-01 15:20:57 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/qq_45044146/article/details/108576063

版权

快捷键与各个标签的总结

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

在文件主体中只打出a再按tab键就会出现
在文件主题中只打出li*4再按tab键就会出现一下样式：
在同一的段落文字按着ait键同时进行编写

zheshiduanluo

zheshiduanluo

zheshiduanluo
ctrl+D：复制当前（duplicat/复制）

4）Html中标题的大小

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

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

5）

这是段落（paragraph）标签页面的一个段落，自动换行

标签的作用是跳转包括页见跳转，页内跳转例子如下：

<a href=“http://www.runoob.com"target=”_blank"title=“我真的很菜！”>菜鸟网

  href属性指定链接的目标


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


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


  _blank:在新的页面中打开；


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


  _top:

7）页内跳转

    在目标标签处指定id="……"，在链接处指定href="#……"
    id属性是页面元素的唯一标识


   “锚点”：anchor

8）图片标签

 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）杂项总结
：可以将部分文本独立出来

  <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）表单

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

属性：指定提交的地址

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

Get和post的区别get

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

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

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

15）文本框

<inputtype=“text”>

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

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

Value：指定默认初始值

16）密码框

密码

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

4.4 label的作用

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

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

<form action="#"method="post">

<label>用户:</label>

<input type="text"maxlength="10"size="15"value="liangliang">

<br>

<label for="password">密码:</label>

<input id="password"type="password"maxlength="10"size="15">

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>音乐
舞蹈
唱歌
绘画
聊天

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）标签
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下面我们做一几个小小的案例来说明这个标签:–>

<meta charset="utf-8">

这是一个按钮

<hr/>

<button type="button"autofocus=“autofocus”>已经获得焦点

<button type="button"disabled=“disabled”>失效

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

    <!--在这个地方用到form和button进行结合使用，其实form提供的是

    一个来链接，button的属性是提交submit，而且method方法是得到

    应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的

    内容是不同的，有的 是value的值，有的 是button之间的内容  -->