01-HTML学习笔记


一.HTML简介

  HTML 是用来描述网页的一种语言。

    •   HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    •   HTML 不是一种编程语言,而是一种标记语言 (markup language)
    •   标记语言是一套标记标签 (markup tag)
    •   HTML 使用标记标签来描述网页(HTML所有的操作都是通过标记实现的,标记即标签)

  HTML规范:

    •   开始标签和结束标签...
    •   头标签和正文标签:设置相关头文件信息,页面正文内容
    •   html代码不区分大小写
    •   部分标签没有结束标签:
      ,
      ...... 

  HTML的操作思想:

  使用标签把要操作的数据包起来(封装),通过修改标签的属性值实现标签内数据样式的变化。

  一个标签相当于一个容器,想要修改容器内数据的样式,只需要修改容器的属性值,就可以实现样式的变化。

  HTML文档 =  网页,Web浏览器的作用就是用来读取HTML文档,并以网页的形式显示出他们。

二.HTML常用标签

  1.标题标签

    标题(Heading)是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

  2.水平线标签

    


标签在 HTML 页面中创建水平线,主要用于分隔内容。

  3.注释标签

    

  4.段落标签

    段落是通过

标签定义的。

  5.换行标签

    
元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

  6.样式标签

    定义字体,定义删除线,定义粗体,定义下划线,定义斜体,上标字,下标字,着重文字,插入字

    

原样输出,定义计算机代码,定义计算机变量,定义缩写,定义文字方向,定义短的引用语

    常用属性:align对齐方式,background设置背景颜色

  7.链接标签

    Link text,target属性定义新页面打开的方式(blank新开页面,self当前页面打开)

  8.图像标签

     是空标签,意思是说,它只包含属性,并且没有闭合标签。

    alt 属性用来为图像定义一串预备的可替换的文本,即当鼠标放在图片上时,悬停显示的内容。

  9.表格标签

    表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 表格页眉,表格页脚,表格主体,跨行合并,跨列合并。

<table border="1">
<tr>
 <td>row 1, cell 1td>
 <td>row 1, cell 2td>
tr>
<tr>
 <td>row 2, cell 1td>
 <td>row 2, cell 2td>
tr>
table>

  10.列表标签

    无序列表始于

    标签,每个列表项始于
  • 。此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

        有序列表始于

      标签,每个列表项始于
    1. 标签。

          自定义列表以

      标签开始,每个自定义列表项以
      开始,每个自定义列表项的定义以
      开始。

        11.块元素标签

          

      元素是块级元素,常见的用途是文档布局,它取代了使用
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。

    

表格标题,
表格定义布局的老式方法。

     元素是内联元素,可用作文本的容器,为部分文本设置样式属性。

  12.头标签

     元素是所有头部元素的容器。 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
    容器包含以下标签:

     标签定义文档的标题。</p> <p style="margin-left: 30px">    <base> 标签为页面上的所有链接规定默认地址或默认目标(target)</p> <p style="margin-left: 30px">    <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。(meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。)</p> <p style="margin-left: 30px">    <style> 标签用于为 HTML 文档定义样式信息。</p> <p style="margin-left: 30px">    <script> 标签用于定义客户端脚本。</p> <p><span style="font-size: 16px"><strong>三.表单标签</strong></span></p> <p>    HTML 表单用于搜集不同类型的用户输入,表单标签是最重要的标签,所以单独列出来。</p> <p>    <form> 定义 HTML 表单,其中包含的部分称作表单元素,表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。</p> <p>    1.表单元素。</p> <ul> <li style="list-style-type: none"> <ul> <li style="list-style-type: none"> <ul> <li> <input> 元素是最重要的表单元素。</li> </ul> </li> </ul> </li> </ul> <p>            <input> 元素根据不同的 type 属性,可以变化为多种形态,type属性:text,password,radio,checkbox,file,submit,reset,button,image,number等等。<br>            text(普通文本输入项),password(密码输入项),radio(单选输入项),checkbox(多选输入项),file(文件上传输入项),submit(提交按钮),reset(重置按钮).<br>            输入限制:disabled,max,min,maxlength,pattern,readonly,required,size,step,value。<br>            输入类型:date,color,range,month,week,time,datetime,datetime-local,email,search,tel,url.</p> <ul> <li style="list-style-type: none"> <ul> <li style="list-style-type: none"> <ul> <li> <select>元素<br>       下拉列表元素,<option>定义下拉列表中待选择的选项。</li> <li> <textarea>元素<br>        定义多行输入字段(文本域)。</li> <li>    <button>元素<br>        定义可点击的按钮。    </li> </ul> </li> </ul> </li> </ul> <p>    2.表单属性。</p> <ul> <li style="list-style-type: none"> <ul> <li style="list-style-type: none"> <ul> <li> Action属性<br>  定义提交表单时要执行的操作,默认提交到当前的页面,也可以指定页面。</li> <li> Target属性<br>  规定提交表单后在何处显示响应,默认在当前窗口打开。</li> <li> Method属性<br>  指定提交表单数据时要使用的 HTTP 方法(get会以名称/值对的形式显示所有参数在URL地址中,post不显示),默认为get。<br>  get安全级别低,且请求数据大小有限制,post安全级别高且没有大小限制。</li> <li> Autocomplete属性<br>       规定表单是否应打开自动完成功能。(根据之前的输入内容自动填写)</li> <li> Novalidate属性<br>  是一个布尔属性,它规定提交时不应验证表单数据。</li> <li> Enctype属性<br>  规定将表单数据提交到服务器时应如何编码。</li> </ul> </li> </ul> </li> </ul> <p><span style="font-size: 16px"><strong>四.框架标签</strong></span></p> <p>    通过使用框架,你可以在同一个浏览器窗口中显示不只一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。</p> <p>    <frameset>标签定义如何将窗口分割为框架,每个<frameset>定义了一系列行和列,而rows/columns 的值规定了每行或每列占据屏幕的面积。</p> <p>    <frame>标签则定义了放置在每个框架中的 HTML 文档,即具体显示的页面。</p> <pre><span style="color: rgba(0, 0, 255, 1)"><!--按行划分,第一行高度占80,其余是给剩下的行--><br><<span style="color: rgba(153, 51, 0, 1)">frameset</span> <span style="color: rgba(255, 153, 0, 1)">rows</span>="80,*"><br>  <<span style="color: rgba(153, 51, 0, 1)">frame</span> <span style="color: rgba(255, 153, 0, 1)">src</span>="frame_a.html"><br>  <<span style="color: rgba(153, 51, 0, 1)">frame</span> <span style="color: rgba(255, 153, 0, 1)">src</span>="frame_b.html"><br></<span style="color: rgba(153, 51, 0, 1)">frameset</span>><br><!--按列划分,左边的列占据了浏览器25%的宽度,右边的列占据剩余的75%宽度--><br><</span><span style="color: rgba(128, 0, 0, 1)">frameset </span><span style="color: rgba(255, 0, 0, 1)">cols</span><span style="color: rgba(0, 0, 255, 1)">="25%,75%"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">frame </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="frame_c.html"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">frame </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="frame_d.html"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">frameset</span><span style="color: rgba(0, 0, 255, 1)">><br></span></pre> <p>    注:</p> <p>      1.有些框架有可见边框,并可以拖动边框来改变大小,如果要避免这种情况发生,可在<framese>标签中加入:noresize="noresize"。</p> <p>      2.为不支持框架的浏览器添加<noframes> 标签。</p> <p>      3.不能将<body></body>标签与<frameset></frameset>标签同时使用。</p> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid1015-0.html' class='tagbtn' target='_blank'>JavaWeb</a><a href='/t/etagid263-0.html' class='tagbtn' target='_blank'>html</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566535.html">html标签</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566066.html">JavaWeb的三大作用域</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561490.html">HTML表单</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-558169.html">HTML5新增</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557384.html">Jmeter+ant实现自动生成基于HTML报告及自动发送邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555707.html">Python 发送HTML格式的邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555700.html">shell 拼接html table 发送邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555084.html">html入门-狂神学java</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552454.html">SAP导出报表格式XXl、XML、XLSX、MHTML选择</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-549821.html">HTML5手机APP开发入门(2)</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-548983.html">https://m.php.cn/vuejs/464077.html</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>