HTML

初识html

什么是html？

  • html是超文本标记语言（hyper text markup language）

html5的基本结构

<!DOCTYPE html>

<!--DOCTYPE 即文本类型，说明这是一个标准的HTML5文档-->

<!--<html></html>标签是文档的根标签-->

<!-- 标签有双标签和单标签 -->

<html>

    <head>

        <!-- head用于对网页的说明 ，不会显示在网页中-->

        <meta charset=utf-8 />   <!--告诉浏览器改网页的编码为utf-8的格式-->

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

        <title>document</title>

    </head>

    <body>

        <!--body中为页面的内容，是网页显示的部分-->

    </body>

</html>

html常用标签

标题标签(h1——h6)

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

段落标签(p)

<p>这是一段文章</p>

图片标签(img)

<img src="url" alt="鼠标悬浮显示的文字">

列表标签

无序列表(ul,li)

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

</ul>

有序列表(ol)

<ol>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

</ol>

有序与无序仅仅只是默认的css样式不通

链接标签(a)

<!--页面外跳转-->

<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度一下</a>

<!-- target=“_blank”设置从空白页打开 -->

<!--页面内跳转-->

<a href="#content"></a>

容器标签(div)

<div></div>

表单标签

<form action="" method="GET">

    <input type="password" name="password" id="">

    <input type="text" name="text" id="">

    <input type="submit" value="提交">

</form>

<form action="https://www.baidu.com/s" target="_blank"  method="GET">

    <input type="text" name="wd" placeholder="请输入内容">

    <input type="submit" value="提交">

</form>

编辑器技巧(vscode或hbuilderX)

<!-- div*3 -->

<div></div>

<div></div>

<div></div>

<!-- div{content$}*3 -->

<div>content1</div>

<div>content2</div>

<div>content3</div>

<!-- ul>li{list$}*3 -->

<ul>

    <li>list1</li>

    <li>list2</li>

    <li>list3</li>

</ul>

HTML学习笔记（一）——基础标签及常用编辑器技巧的更多相关文章

  1. 学习笔记—HTML基础标签

    HTML的概念 概念: HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 ( ...

  2. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  3. MAVEN学习笔记之基础（1）

    MAVEN学习笔记之基础(1) 0.0 maven文件结构 pom.xml src main java package resource test java package resource targ ...

  4. Quartz学习笔记：基础知识

    Quartz学习笔记:基础知识 引入Quartz 关于任务调度 关于任务调度,Java.util.Timer是最简单的一种实现任务调度的方法,简单的使用如下: import java.util.Tim ...

  5. Java后端高频知识点学习笔记1---Java基础

    Java后端高频知识点学习笔记1---Java基础 参考地址:牛_客_网 https://www.nowcoder.com/discuss/819297 1.重载和重写的区别 重载:同一类中多个同名方 ...

  6. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. java 基本语法（十四）Lambda （一）表达式

    1.Lambda表达式使用前后的对比:举例一: @Test public void test1(){ Runnable r1 = new Runnable() { @Override public v ...

  2. java 面向对象（三十九）：反射（三）了解ClassLoader

    1.类的加载过程----了解 2.类的加载器的作用 3.类的加载器的分类 4.Java类编译.运行的执行的流程 5.使用Classloader加载src目录下的配置文件 @Test public vo ...

  3. JS 判断是否为数字 数字型特殊值

    JS 数字型三个特殊值 Infinity ,代表无穷大,大于任何数值 -Infinity ,代表无穷小,小于任何数值 NaN ,Not a number,代表一个非数值  isNaN的使用: isNa ...

  4. MVC + EFCore 项目实战 - 数仓管理系统5 – 菜单配置及里程碑划分

    上次课程我们完成了需求的梳理. 我们根据梳理的需求把菜单配好,另外我们把项目里程碑也配置在系统中,开发和管理都在系统中,形成无文档化管理. 一.菜单配置 根据我们的归纳图,我们先将菜单配置好. 我们遵 ...

  5. ffplay源码编译

    ffplay是ffmpeg源码中一个自带的开源播放器组件,支持本地视频文件的播放以及在线流媒体播放,很多商业播放器都是基于ffplay定制而来的.ffplay中的代码充分利用了ffmpeg中的函数库, ...

  6. 如何理解Javascript中的函数(Function)

    Function类型 首先得知道,每个函数都是Function类型的实例,所以函数本身是对象. 示例1: function sum (num1, num2){ return sum1 + sum2; ...

  7. 索引中丢失 IN 或 OUT 参数:: 103，解决办法

    索引中丢失  IN 或 OUT 参数:: 103 这个原因是数据库中的字段类型与SQL语句中的类型不匹配造成的,103代表第103个字段参数错误.找到对应参数配置或者SQL中这个参数的类型是否与数据库 ...

  8. 状态模式（c++实现）

    状态模式 目录 状态模式 模式定义 模式动机 UML类图 源码实现 优点 缺点 模式定义 状态模式(state),当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 模式动机 状 ...

  9. vue : 无法加载文件 C:\Users\ui61895076\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

    说白了就是这个编辑器不能用罢了 执行以下代码 1.鼠标右击以管理员身份运行vscode; 2. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的; 3. 执行: ...

  10. 【面试题资源共享】一文总结最高频软件测试|sq|语句|思维发散|计算机基础|Linux|测试用例|接口测试|等技术面试题

    思维发散 1.一个球, -把尺子长度是球直径的2/3,怎样测出半径?2.四枚硬币,花面朝上,每次翻转三个,几次可以将四枚硬币变为字面朝上?3. U2合唱团在1 7分钟内赶到演唱会现场问题?4.小明一家 ...