20分钟教会你HTML

其他 2020-03-19 10:32:52 阅读次数: 0

HTML

第一节 HLML简介

HTML5—>CSS—>JS

  • Web开发是什么？Web开发 = 前端 + 后端
    （1）前端就是在客户端上的应用，通常值我们的浏览器。最常用的前端开发技术是：HTML+CSS+JavaScript。
    （2）后端开发就是编写那些运行在服务器上的代码，这部分的工作需要和数据库打交道，比如：读写文件、数据、实现业务逻辑。
  • 什么是HTML？
    （1）HTML是用来描述网页的一种语言
    （2）HTML是指超文本标记语言
    （3）HTML不是编程语言，只是一种标记语言
  • HTML5的新特性
    （1）用于绘画的canvas标签，可以通过它来绘制一些图形，和设计
    （2）用于媒介回放的video和audio元素，即：播放视频和音频
    （3）对本地离线储存的更好支持
    （4）新的特殊内容元素（如：article、footer、header、nav、section）
    （5）新的表单控件（如：calendar、date、time、email、url、search）
  • 开发工具：
    （1）常用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver（设计人员）、intellij IDEA
  • HTML5跨平台运行，硬件要求低
  • HTML5 = HTML+CSS+JavaScript。
    （1）HTML构成网页的框架
    （2）CSS设置网页样式，相当于给网页做美颜
    （3）JavaScript，加入交互。网页的灵魂。
  • 注释：
    （1）HTML：<!–注释内容–>
    （2）CSS：/*……*/
    （3）JavaScript：
    1. 单行注释：//
    2. 多行注释：/*……*/
  • 使用IDEA创建一个Web工程：
    1. Fiel–>New–>Project
    2. 选择静态Web。即：Static Web
    3. 输入工程名。注意工程保存位置，在路径后面再加一个工程名。
    4. 在工程名处左击。
      New–>HTML File，不用加.html的后缀，编译器会自动生成基础标签。
      New–>File，需要加.html的后缀，编译器不会帮我们做什么。（新手）
    5. 开始你的表演。
    6. 写完代码之后，将鼠标移至右上方，就会出现浏览器的头标，点击运行程序。

第二节 HTML基础语法

2.1 基础

  • 声明：<!DOCTYPE html>，是HTML5 的声明。表示当前使用的是HTML5。就是头文件。

概述：
HTML标签。
HTML元素
HTML属性
HTML格式化

  • HTML标签：标签就是<head>、<body>、<a>等被尖括号包起来的东西，大多数标签都是成对出现的。

  • HTML元素：
    （1）概念：元素是指从开始标签到结束标签之间的所有代码。
    （2）语法：

    1. 空元素在开始标签中关闭。 <br />
    2. 大多数HTML元素可以拥有属性。
    3. 大多数的HTML元素都是可以嵌套的。

  • HTML属性：
    （1）为HTML元素提供各种附加信息的就是HTML属性，而且属性总是在HTML元素的开始标签中进行定义。
    （2）它总是以"属性名=属性值"这种名值对的形式出现。
    如：<a href="http://www.jikexueyuan.com">学习</a>
    （3）常用标签属性：

    1. align，对齐方式
    2. bgcolor，背景颜色
    3. target，规定在何处打开链接。
      例：<a href="http://www.jikexueyuan.com" target="_blank">学习家园</a>。_blank是打开新的页面，不会覆盖原来的页面。_self是在当前页面打开，会覆盖掉当前页面。
    4. 多个属性，则以空格分隔。

    （4）通用属性：

    1. class：规定元素的类名。
    2. id：规定元素唯一ID。
    3. class和id是在CSS中当做用来定位的选择器使用。
    4. style：规定元素的样式。让页面更友好一点。

  • 所有的代码都包含在<html>和</html>之间。
    （1）<head>标签用来定义一个头部信息，比如：

    1. <meta>：单标签。例：编码格式（<meta charset="UTF-8">）
      1. 标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息
      2. <meta> 标签永远位于 <head> 标签内部。
      3. <meta>标签的信息不会显示在页面。有很多内容可以设置，比如关键字、页面自适应。
    2. 标题（<title>Title</title>）。定义页面的标题。
    3. 文字的显示形式，英文还是中文。<head lang="en">。en表示英文，zh表示中文。

  • HTML基础标签;

    1. HTML基础标签：head、body

    2. 在<body>标签中写主体部分。

    3. HTML标题：<h1>，h1~h6。<h1>标题1</h1>。

    4. HTML段落：<p>，定义段落。不同的段落会换行显示。

    5. HTML链接：<a>，定义链接。<a href="http://www.jikexueyuan.com">学习家园</a>。使用href执行一个链接，两个加括号之间写对这个链接的描述语言。

    6. HTML图像：<img>，定义图像。<img src="images/1.jpg">。src后面是照片的路径和名字。单标签。

      1. 标签有两个必需的属性：src 属性 和 alt 属性。alt是指定图像不能显示时的替代文本。src是指定显示图像的 URL。
      2. <img alt="这是一个图片" src="images/1.jpg" width="300px" height="300px">，px是像素

    7. <br />：空标签，可以用来换行，当然，效果和p标签不一样

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的第二个程序</title>
    <style type="text/css"></style>
</head>

<body>
<b>欢迎使用</b><br/>
<i>欢迎使用</i><br/>
<em>欢迎使用</em><br/>
<small>欢迎使用</small><br/>
<strong>欢迎使用</strong><br/>
大家好<sub>欢迎使用</sub>本程序<br/>
<ins>欢迎</ins><br/>
<del>使用</del><br/>

</body>
</html>

2.2 HTML格式

HTML5样式、链接、表格：

  • style标签：用于为 HTML 文档定义样式信息。
    （1）style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素

  • 使用<style>设置网页样式：

    1. <style>：样式定义。可以有多个<style>。成对出现。在<head>在标签中设置
    2. <style media="print">，可以通过media属性设置格式。
  <style type="text/css"><!--格式设置-->
        h1{color: aqua}
        h2{
            color: chartreuse;
            text-align: center;

        }
        h3{
            color: aliceblue;
            margin-left:60%;<!--左外边距 -->
        }
        a{
            color: blue;
        }
        body{
            background-image: url("images/3.jpg");<!--页面背景，不能和背景颜色同时设置 -->
        }
        p{
            text-indent: 32px;<!--文章缩进 -->
            font-size: 16px;<!--字体尺寸 -->
            line-height: 32px;<!--文章行高 -->
            color: azure;
        }
        img{
            position: absolute;
            left: 50%;
            width: 20%;
            height: 20%;
            margin-left: -181px;
        }
    </style>
    <style media="print"><!--这个格式只针对打印的格式-->
    p{
        color: black;
    }
    </style>

  • 链接外部样式表设置网页样式
    （1）除了在<style>元素中添加，我们还可以将css样式表保存外部文件，然后使用link元素将其链接进来。
    （2）当<style>很多时，可以使用css外部样式表。新建一个File，后缀是.css，里面放以前<style>标签中的元素。
    （3）使用 <link>进行样式资源引用。

    1. 属性： rel=“stylesheet”，外部样式表。
    2. 属性：href=“mystyle.css”，样式表的位置。

    （4）<link>也可以链接网址图标。ico格式（16x16或32x32）

    1. 例： <link rel="icon" type="image/x-icon" href="../images/2.ico">，（.）表示当前目录，（. .）表示当前目录的父目录。

  • <base> 标签用于设置相对 URL 的解析基准。只影响相对路径。
    （1）例：<base href="../img/" target="_blank">
    （2）可以一劳永逸，只设置一次target

  • <script>标签：<script> 标签用于在 HTML 文档中加入脚本（例如 JavaScript）
    （1）script 元素既可以直接定义内嵌脚本语句，也可以通过 src 属性引用外部脚本文件。
    （2）script 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 script 元素。
    （3）每定义或导入一段脚本，都需要使用一个 script 元素。
    （4）不能用同一个 script 元素既定义内嵌脚本，又引用外部脚本。
    （5）脚本延迟执行：defer属性可以使脚本延迟执行，这样就可以不必将<script>贴的到处都是。但是defer属性只对外部脚本起作用。
    （6）脚本异步执行：async属性。HTML解析和脚本获取是同时的。只能用于外部脚本。
    （7）对于不支持JavaScript的浏览器。可以使用<noscript> 标签。

    1. <noscript> 标签用来向不支持 JavaScript 的浏览器显示一些替代内容。
    2. <noscript> 标签内部不仅可以是文本，也可以是其他的元素。
    <noscript>
        <p>为什么不支持JavaScript！！！！！！</p>
        <img src="image/嫌弃.png" alt="laji">
    </noscript>

2.3 基本标签

  • 块级元素和行内元素：
    （1）块级元素：块级元素总是在新的行上开始，并尽可能的占据本行全部可用宽度。例：<p>等
    （2）行内元素：行内元素并不会另起一行，它也只占用必要的宽度。例：<a>，<span>（和p元素对应，只不过是行内元素）、<b>、<img>等
    （3）<br>元素，插入换行符。
    （4）<div>元素：也被称为块元素，其主要是组合HTML元素的容器。

  • HTML字符实体：HTML 中的预留字符必须被替换为字符实体。比如：小于号：&lt;

  • pre元素：用来定于预格式化，即：保留文本在源代码中的样式。

  • code元素：定义代码片段。（代码也可以用字符实体把尖括号进行替换，然后使用pre元素）。如果是一大段代码，可以先用pre，再使用code。

  • var、kbd、samp元素：
    （1）var：定义程序的变量。
    （2）kbd：定义用户的输入。
    （3）samp：定义程序的输出。

 <p>有一个变量<var>user_in</var>，用于接收用户输入</p>
 <p>如果用户输入的是<kbd>橘子</kbd>，那么程序将打印<samp>你最喜欢吃的水果是橘子</samp></p>
  • 引用：
    （1）短引用：q元素。定义比较短的引用。显示时会自动加引号。
    （2）长引用：blockquote元素。用缩进的方式来显示该段文本。
  • cite元素：定义作品的标题，比如：电影的名字。
  • abbr元素：定义简称或缩写。配合title使用。<P><abbr title="lu先森">lu</abbr>是一个小哥哥</P>。lu下面出现小点点，鼠标移动到上面会有提示，提示内容为title的内容。
  • dfn元素：定义术语。会产生斜体。
  • address元素：定义文章的作者的信息。斜体
  • ruby、rt、rp元素：
    （1）ruby：
    （2）rt：表示注音符号。
    （3）rp：当浏览器不支持ruby元素时显示的内容。如下例：如果不支持，就在字的后面显示一个括号。
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
  • bdo元素：可以修改文本显示方向。dir的属性。<bdo dir="rtl"></bdo>。
标签 描述
<b> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<ins> 定义上标字
<del> 定义定义删除字
  • strong元素和b元素：
    （1）strong：强调显示。有重要的语义。
    （2）b：只是粗体。
  • em、i元素：
    （1）em：表强调。斜体。
    （2）i：只斜体，没有强调的语义。
  • del、ins元素：
    （1）del：显示删除字
    （2）ins：显示有下换线的字。
  • s标签：也是删除线。不过，语义不同。s元素表示那些错误的内容。
  • u标签：下划线。定义拼写错误的单词和汉语中的专有名词。
  • mark标签：起到标记文本的作用。相当于荧光笔。
  • sup、sub标签：上标和下标，一般用来定义公式。
  • small标签：使指定文本变小。
  • 列表：
    （1）无序列表：ul元素。列表中的每个项使用li包裹起来。改变type属性的值，改变前面的点。
   <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>

（2）有序列表：ol元素。列表中的每个项使用li包裹起来。可以设置type属性，比如降序（只是数字倒过来），起始数字（start），数字类型。

  • 两个常用的CSS属性：
    （1）设置列表样式：list-style-type
    （2）设置列表标志：list-style-image

  • 列表嵌套：可以有多层列表。

  • 自定义列表：dl元素来实现。使用dt、dd元素来配合实现。dt是项目内容。dd是项目内容的描述。

  • 表格：
    （1）table：定义表格；
    （2）tr：定义表格中的行。
    （3）th：表头。加粗居中。
    （4）td：内容单元格。可以是文本，数据，图像，表格。头像可以使用width属性设置框的大小。
    （5）border-collapse: collapse;用来和并边框线。必须先单独设置，在上面。
    （6）caption：定义表格的标题。在table标签紧下面。居中。
    （7）padding：设置内边距，在style中设置。必须先单独设置，在上面。
    （8）thead、tbody：给细致的划分表格。设置格式，例：thead th{……}表示thead中的th。
    （9）表尾：tfoot设置表尾。colspan="4"使其跨4列显示。
    （10）colgroup、col：批量设置表格样式。
    （11）先使用table标签，再设置行，然后设置表头。再行，内容。

  • 表单：form标签。实现网页和用户的交互。表单是HTML中获取用户输入的手段。
    （1）form标签：包含整个表单。有很多属性。比如：action属性，指定由谁出来这个提交的信息。method属性是指定哪种方法发送到服务器，有post和get（会把信息显示在URL中）。
    （2） input标签：input是一个很强大的标签。（后面单独介绍）
    （3）button标签：按钮。type属性设置为submit，即：提交给服务器。
    <button type="submit">提交</button>
    （4）target属性：在哪打开页面：target="_blank"，在新页面打开。
    （5）fieldset标签：可以将表单内的相关元素进行分组。legend标签作为这个分组的说明信息。必须在第一个子标签。
    （6）select、option标签：实现下拉列表。option在select内部，设置选项。option中的属性value是指定发到服务器的选项值。
    （7）optgroup标签：对下拉列表的选项进行分组。把要分组的选项包裹起来。
    （8） output标签：输出计算结果
    （9）textarea标签：结束多行的文本输入。

    1. rows和cols属性设置行数和列数。单位是字符

  • input标签：input是一个很强大的标签。
    （1）input可以改变type的属性，从而改变它的功能。
    （2）input标签：在form内部。type属性设置为text（password），即：文本框。name属性。
    （3）设置为按钮。type属性设置为button，value就是按钮名。
    （4）radio属性：单选框。将type设置为radio<label><input type="radio" name="sex" value="male">男</label>。name属性必须一致。
    （5）search属性：搜索框。将input标签的type属性设置为search。
    （6）color属性：。颜色选择框。将input标签的type属性设置为color。
    （7）image属性：图像按钮。
    （8）checkbox属性：复选框。<input type="checkbox" name="联系方式[]">。name必须一样。
    （9）time、date、month、week、datetime-local（本地的日期和时间）：时间和日期。
    （10）autocomplete属性：自动填充。“on”，on为自动填充，off关闭自动填充。
    （11）设置默认值：value属性设置默认值。在相应的input标签内设置
    （12）autofocus属性：自动聚焦。在相应的input标签内设置
    （13）hidden属性：将input元素隐藏起来。
    （14）file属性：上传文件。必须将form标签内的method设置为"post"，而且必须设置enctype属性。

    1. enctype属性：规定了再发送到服务器之前，一个如何对表单数据进行编码，只有正确的编码，才能完整的传输给服务器。上传文件。enctype="multipart/form-data
    2. input标签中有一个accept属性，设置文件类型。比如：“video/*”、“image/*”。value属性设置上传文件大小。

    （15）限制用户输入的内容。将type设置为number。

    1. 限制number大小：min，max，step（调整幅度）。

    （16）range属性：数值滚动条，将type设置为range。同样有min、max等
    （17）邮箱、电话、网址：email、tel、url。
    （18）pattern属性：指定匹配模式。
    （19）placeholder属性：占位提示符。required属性，使得该框必须填写
    （20）size属性：输入框宽度
    （21）maxlength属性：最大输入字符数
    （22）list属性和datalist标签：数据列表，即：备选项。

    1. 在datalist标签内这是id，在datalist标签体内使用option标签设置选项，再在需要的框内使用list=id值，引用这个备选项。

  • 正则表达式：使用单个字符串来描述。匹配一系列匹配某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些匹配某个模式的文本。即：只要涉及到字符串的匹配操作，正则表达式就是最好的选择。

3.4 HTML新元素

  • 每个HTML元素都是由一个方框的形式呈现的。大框套小框。
  • <div>：（老）块级无语义元素。定义 HTML 文档中的一个分隔区块或者一个区域部分。

div元素虽然便利，但是容易被滥用，因为它没有语义。尽可能的少用

这里是引用

  • HTML新元素：
    （1）article标签：标签用于定义一篇文章，与页面其它部分无关。
    （2）details和summany标签：标签用于定义用户可见的或者隐藏的需求的补充细节。

    1. 与 <summary> 标签配合使用可以为 details 定义标题。
    2. 标题是可见的，用户点击标题时，会显示出 details。点框框会出现详细信息。
    3. details标签中加上一个open属性，就默认打开的。

    （3）<aside> 标签：定义侧边栏，通常是网页的说明、提示、引用、附加注释、相关链接、广告等内容。
    （4）<header> 标签：用于定义文档的页眉（介绍信息）
    （5）map和area标签：实现点击图片跳转页面。

    1. map：定义映射关系，搭配img使用。
    2. area：定义鼠标点击的范围。

    （6）picture和source标签：根据条件选择显示的图片。picture标签中嵌套source标签，在source标签中设置media属性。srcset属性执行对应的图片。
    （7）figure和figcaption标签：将图片定义为插图。

  • 在网页中嵌入视频：
    （1）video标签：定义浏览器的宽度，高度，和视频链接。<video> 支持三种视频格式：MP4、WebM、Ogg。
    （2）播放控件或自动播放：

    1. controls属性：播放控件，只写关键字就可以。
    2. autoplay属性：自动播放。
    3. muted属性：静音。
    4. 例：<video width="500px" height="550px" src="../images/121.mp4" controls>播放不了</video>

    （3）preload属性：视频预加载，即：视频在你打开网页的时候自动缓存，播放的时候不会卡。
    （4）poster属性：定制封面。使poster指向一个图片链接

  • WebVTT：

  • 在网页中嵌入音频：
    （1）audio标签：定义声音，比如音乐或其他音频。
    （2）track标签：添加字幕。后缀为vtt。

  • 在网页中嵌入另外一个网页：
    （1）iframe标签：<iframe src="https://blog.csdn.net/qq_44755403" width="500px" height="500px">抱歉，打不开网页</iframe>。
    （2）sandbox属性：会对iframe的网页进行限制。起到保护网页的作用。

  • progress标签：进度条。以图型的形式来标志。

【传送门】

HTML进阶

CSS3

编程之美，趋之若鹜
发布了59 篇原创文章 · 获赞 47 · 访问量 5492
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_44755403/article/details/104589115
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022