pink老师html标签学习笔记一

1、mac快捷键

基本
Command + C 复制(未选中文本的情况下,复制光标所在行)
Command + / 添加、移除行注释
Option + Shift + A 添加、移除块注释
Option + Z 自动换行、取消自动换行

多光标与选择
Option + 点击 插入多个光标(列式编程)
Command + I 选中当前行

查找替换
Command + F 查找
Command + Option + F 替换

进阶
Tab Emmet插件缩写补全
Option + Shift + F 格式化
Command + K Command + F 格式化选中内容

文件管理
Command + N 新建文件
Command + S 保存文件

显示
Command + Ctrl + F 全屏、退出全屏

调试
F9 设置 或 取消断点
F5 开始 或 继续
F11 进入
Shift + F11 跳出
F10 跳过
Command + K Command + I 显示悬停信息

2、基本结构标签

标签名 说明
<html></html> <html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体
<head></head> <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等
<title></title> 元素可定义文档的标题
<body></body> 元素定义文档的主体,元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

2.1、文档类型声明标签

  • <!DOCTYPE html>文档类型声明是告诉浏览器使用哪种html,这就话的意思是页面采用H5版本显示网页。
  • 注意:<!DOCTYPE>不是HTML标签,它的作用只是进行文档说明

2.2、<html>标签lang属性,作用告诉浏览器当前文档显示的语言

  • en定义为英文文档
  • zh-CN定义中文文档

2.3、字符集

  • <meta>标签定义和用法:
  • <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
  • <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

    在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使哪种字节编码。

 

    charset常用的值:GB2312、BIG5、GBK和UTF-8

3.5、盒子标签

  • <div></div>用法:

               <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

              可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

  • <span></span>用法:

             <span> 标签被用来组合文档中的行内元素

              可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

              可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用  于标识单独的唯一的元素。

 3.12、表格标签

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。(多行多列时使用tr>td*3一键生成)

 3.12.1表格属性

属性名 属性值 说明
border 像素值,语法border="value" 单元格边框宽度,默认无边框
cellpadding 像素值,语法cellpadding="value" 规定单元边沿与其内容之间的空白。(单元格与内容之间的内边距)
cellspacing 像素值,语法cellspacing="value" 规定单元格之间的空白。(单元格之间的外边距)
width 像素值,语法width="value" 设置表格的宽度。

3.12.2单元格<td></td>标签属性

属性名 属性值 说明 语法
align center/right/left/justify/char 规定单元格内容对齐方式 <td align="value"></td>
colspan 数字 属性规定单元格可横跨的列数 <td colspan="value"></td>
rowspan 数字 规定单元格可跨的行数 <td rowspan="value"></td>

 

 3.13列表标签

  • 无须列表:<ul>
  • 有序列表:<ol>
  • 自定义列表:<dl>

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下:

  • Coffee
  • Milk

 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下:

  1. Coffee
  2. Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下:

Coffee
Black hot drink
Milk
White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 3.14、表单标签

一个完整的表单通常由表单域表单控件提示信息3部分组成。

3.14.1、表单域

<form></form>是表单域标签,用于定义表单域,会把它所包围的表单元素信息提交给服务器

属性名 属性值 说明 用法
action url地址 定义了在提交表单时执行的动作,向服务器提交数据的通常做法是使用提交按钮 <form action="url地址">
method get/post method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST <form method="GET">(注意大写)
name 名称 如果要正确地被提交,每个输入字段必须设置一个 name 属性。以区别同一个页面中的不同表单域 <form name="名称">

3.14.2表单控件(表单元素)

  • <input></input>输入标签;
  • 标签中的type属性用来规定不同的控件类型

type属性值及描述

属性值 描述 使用方法
button 可定义点击按钮(大部分情况下,用于通过js启动脚本)  <input type="button">
radio 定义单选框(注意多个单选框中的name属性值必须相同)  <input type="radio" name="sex">
image 定义图片形式的提交按钮  <input type="image">
passwod 定义密码字段  <input type="password">
submit 定义提交按钮,提交按钮会把表单数据提交到服务器  <input type="submit">

value属性值及描述

属性值 描述 使用方法
char type=“button”、“reset”、"submit"用于定义按钮上的显示的文本 <input type="button" value="登陆">
char type=“text”、“password”、"hidden"用于定义输入字段的初始值 <input type="password" value="123456">
char type=“checkbox”、“radio”、"image"用于定义与输入相关联的值 <input type="radio" value="0">

其他类型属性

属性名 属性值 描述 使用方法
min 数字 min属性规定输入域所允许的最大值 min="number"
max 数字 max属性规定输入域所允许的最小值 min="number"
step 数字 step属性为输入域规定合法的数字间隔 min="number"
placeholder 字符 placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失 placeholder="请输入密码"
posted @ 2021-09-10 12:08  cueblog  阅读(201)  评论(0编辑  收藏  举报