Web前端--从入门到自闭

 

标签的快捷键：单词 + tab键 +单词

h5初始代码：!+Tab 快速创建符合规范的html

<!DOCTYPE html> <!-- 文档声明 : 告诉浏览器这是一个html文件 -->
<html lang="en"> <!--  html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站 -->

<head>
    <meta charset="UTF-8"> <!-- 元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况 -->
    <title>Document</title> <!-- 设置网页的标题 -->
</head>

<body>
   <!--  显示网页内容的区域 -->
</body>

</html>

注释

html的注释：<!-- 注释的内容 -->  

css的注释： /* 注释的内容 */

vscode快捷键是：ctrl + /  和 shift + alt + a    

标题h和段落p

<h1> - <h6> 标签可定义标题。

<h1> 定义最大的标题。(尤为重要，一个html文件最好只出现1次

<h6> 定义最小的标题。

【亲自试一试】

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。

【亲自试一试】

文本修饰

 <strong></strong>

<em></em>

  • 写法和展示效果是有区别的，一个加粗、一个斜体
  •  strong的强调性更强，em的强调性稍弱。

下标 : <sub></sub>
上标 : <sup></sup>

删除文本 : <del></del>
插入文本 : <ins></ins>

  •  一般情况下，删除文本都是和插入文本配合使用的。 

图片img

元素向网页中嵌入一幅图像。用于展示

  • src : 引入图片的地址。
  • alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
  • 前两个是是必须属性
  • title : 提示信息
  • width、height : 图片的大小

【亲自试一试】

【如何正确地使用图像】

路径

绝对路径：指向一个完整的url（类似收快递的地址）

相对路径：指目标相对于当前文件的路径（指快递地址相对于写代码的文件的路径）墙裂推荐使用

/ ：代表文件所在的根目录（就是内部的收快递的地址）

./ ：代表文件所在的目录（可以省略不写）

../ ：代表文件所在的父级目录

../../ ：代表文件所在的父级目录的父级目录

 

路径描述
<img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中

【详解】

 

超链接a

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

属性：

  • href：url（跳转到的链接地址）必须属性
  • target：（在何处打开文档）
值　　　　　 功能
_blank 在新窗口中打开
_self 默认。在当前窗口打开
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。

 

【W3C详解】

锚点name和id

可以做目录

  • <a>标签的name属性；    
  •     <ul>
        <li><a href="#C1">第一章</a></li>
        <li><a href="#C2">第二章</a></li>
        <li><a href="#C3">第三章</a></li>
    </ul>

    <h2><a name="C1">第一章</a></h2>
    <p>本章讲解的内容是 ... ...</p>

    <h2><a name="C2">第二章</a></h2>
    <p>本章讲解的内容是 ... ...</p>

    <h2><a name="C3">第三章</a></h2>
    <p>本章讲解的内容是 ... ...</p>
  • 直接设置 id 属性；（id比name兼容性好） 
    <a id="#C1">第一章</a>
<a id="#C2">第二章</a>
<a id="#C3">第三章</a>
<a id="#C3">第四章</a>
  • 直接在标题中设置 id 属性： 
    <h2 id="#C1">第一章</h2>
<h2 id="#C2">第二章</h2>
<h2 id="#C3">第三章</h2>
<h2 id="#C3">第四章</h2>
...
  •  触发js事件（暂无）

 特殊字符/转义字符

 常用

&nbsp; 空格
&lt; 左尖括号
&gt; 右尖括号

 

 

 

【HTML特殊字符编码对照表】

列表

列表间可以相互嵌套

  • 无序列表ul 
        <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>

 

 

  •  有序列表ol 
        <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>

 

  •  定义列表 
        <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>
    　　

 　　

 

 

 【详解】

表格table

<table> 标签定义 HTML 表格

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

属性：

  • border：边框宽度
  • cellpadding：格子内部空白
  • cellspacing：格子之间的空白

注意点：

  • 有嵌套关系的，要符合嵌套规范。
  • 语义化标签：thead、tbody、tfoot 
  • 在一个table中，tbody是可以出现多次的，但是thead、tfoot 只能出现一次。

 【详细】

 表单form

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

【详细】

 

 

 

 

 

posted @ 2020-03-24 11:45  Dalala  阅读(143)  评论(0)    收藏  举报