草庐IT

01-HTML基础

OnlyOnYourself-lzw 2023-03-28 原文

HTML基础

1、HTML的概念和作用

  • 概念
    • HTML（Hyper Text Markup Language）：超文本标记语言
      • 超文本：不仅包含普通文本，还可以包含图片、视频、音频、超链接、表格等内容
      • 标记语言：由标签构成的语言
  • HTML的作用
    • 编写网页

2、W3C标准

  • 网页主要由三部分组成
    • HTML：用于制作网页基础内容和基本结构
    • CSS：用于网页样式美化效果
    • JavaScript：用来制作数据验证、交互行为效果，可以动态 操作网页的元素增删改查

3、HTML的组成

  • 标签
    • 标签可以用于设置文本样式、图片样式、超链接样式等等。用<>表示
    • 例如：<h1>标签，代表一级标签。我们可以使用开始标签和结束标签包围文字，这些文字就以标题形式显示
  • 属性
    • 标签中还可以拥有属性，属性可以位标签提供更多的信息
    • 属性只能添加到开始标签中。格式为：属性名=属性值
    • 例如：align属性，表示对齐方式。我们可以在开始标签中添加该属性，就能让内容显示在不同位置
    • eg

4、初始HTML页面属性说明

  • <!DOCTYPE.html>：HTML的文档声明
  • <html lang="en">: 根标签，一个文件中只能有一个根标签，lang属性表示网页使用的语言，默认是en，可以修改成zh
  • <head>：头部标签
  • <meta charset="UTF-8">：设置字符集，建议使用UTF-8
  • <title>：文档标题，显示在浏览器标签上
  • <body>：身体标签，包含所有的文档内容

5、HTML基础语法

5.1、文本标签

  • h1~h6
    • 用于文章标题，一共有6级
    • 1级最大，6级最小
    • 这是块级标签，自带换行的功能
    • 常用属性
      • align：标签对齐的方式
      • center居中、right右对齐、left左对齐
  • hr
    • 水平线，即可在此画一条水平线
    • <hr width="400" color="red" size="5">
    • 常用属性
      • width：设置水平线的宽度（长度）
      • size：大小（粗细）
      • color：线的颜色
  • font
    • 设置字体、颜色、字号等
    • PS
      • 在HTML5中已经不推荐使用
    • 内联标签，没有换行功能
    • 常用属性
      • color：字体颜色
      • size：字体大小
      • face：字体，如：宋体
  • b
    • bold加粗，与strong功能一样
  • i
    • italic斜体
  • br
    • 换行
  • p
    • 每个p标签代表一个自然段
    • paragraph，前后有一定间隔，首行没有缩进
    • 常用属性
      • title：用于鼠标移上去显示提示文字信息

5.2、有序列表和无序列表

  • ol-li（有序列表）
    • type属性
      • 1：数字列表，默认值
      • a，A：字母列表，包含大小写
      • i，I：罗马数字编号
  • ul-li（无序列表）
    • type属性
      • disc：黑心圆，默认样式
      • circle：空白圆
      • square：黑色正方体

5.3、特殊字符

  • 什么是特殊字符
    • 在HTML中，像<> “ ’ 空格 & 都是特殊字符，它们是语法本身的一部分。
  • 常用特殊字符
  • 特殊字符格式
    • 以&开头，以分号结尾，如&nbsp;表示空格

5.4、div和span

  • 标签 作用 特点
    span 容器，可以包裹其他内容 是内联标签，不带换行功能，用于小范围的内容划分
    div 容器，可以包裹其他内容 是块标签，不带换行功能，用于小范围的内容的划分，通常网页布局使用div将网页分成不同块

5.5、HTML案例-公司介绍

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司简介</title>
</head>
<body>
<!--
    需求分析：
    - 1.将文本素材内容放入其中
    - 2.使用<h1>标签设置标题，修饰“公司介绍”
    - 3.使用<hr>标签加入水平线
    - 4.使用4个<p>标签加入水平线
    - 5.使用&nbsp;设置第一个段落首行文本缩进6个空格
    - 6.使用<font>标签，设置第一段“黑马程序员”字体颜色为红色
    - 7.使用<i> <b>标签，设置第一段“传智教育“斜体与加粗
    - 8.使用<span>标签，设置其他段”黑马程序员“字体颜色为红色
    - 9.价格部分使用无序列表：ul-li
    - 10.使用<br>标签实现换行，在最后一段公司与版权中间实现
    - 11.设置最后一段样式：文本居中，字体大小14px，颜色gray
    - 12.使用版权特殊字符实现©显示
-->
<div>
    <h1>公司介绍</h1>
    <hr color="red" size="5"/>
    <p>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <font color="red">黑马程序员</font>
        是<i><b>传智教育旗</b></i>
        下的高端IT教育品牌，现已开设JavaEE、产品经理、HTML&JS+前端、C/C++、
        新媒体+短视频直播运营、Python+人工智能、大数据、UI/UE设计、软件测试、Linux云计算+运维开发、
        拍摄剪辑+短视频制作、智能机器人软件开发、电商视觉运营设计等培训学科，直营分校遍布北京、
        上海、广州、深圳、武汉、郑州、西安、长沙、济南、重庆、南京、杭州、成都、石家庄、合肥、
        太原、厦门、沈阳、天津等城市。
    </p>

    <p>
        <span style="color: red">黑马程序员</span>
        是传智教育旗下高端IT教育品牌，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。我们的价值观:
        <ul>
            <li>责任，对教学质量精益求精全心全意教授好每一位学生。</li>
            <li>务实，诚信待人，高效做事，不弄虚作假脚踏实地做好本职工作。</li>
            <li>创新，勇于创新，在工作中不断突破，为学生提供更优质的教学资源与服务。</li>
            <li>育人，在传授学生知识和技能的同时，言传身教，正面引导学生实现人生应有的价值追求。</li>
        </ul>
    </p>

    <p><span style="color: red">黑马程序员</span>
        不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，
        确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
    </p>
    <hr/>
    <center><font size="2" color="gray">江苏传智播客教育科技股份有限公司版权所有Copyright&copy;2006-至今, All Rights
        Reserved 苏ICP备16007882
    </font></center>
</div>
</body>
</html>

5.6、图像标签

  • img标签的作用

    • 在网页中显示图片

  • img标签格式

    • <img src="图片文件路径"/>

  • 常用属性

    • img标签显示图片 作用
      src 图片地址
      width 宽度，如果只指定宽度，高度会按等比例缩放
      height 高度
      alt 如果图片丢失，出现的替代文字

    • PS：src不能写绝对路径

    • audio：定义音频。（MP3、WAV、OGG）

      • src：规定音频的URL
      • controls：显示播放控件

    • video：定义音频格式：如MP4、WebM、OGG

      • src：规定视频的URL
      • controls：显示播放控件

5.7、链接标签

  • 链接标签的作用

    • 跳转到其他页面

  • 链接标签的格式

    • <a href="跳转的目的地">内容</a>
  • 标签名 作用 备注
    a 超链接跳转页面功能 1.href属性，表示超链接跳转指向的url地址；2.target属性，页面打开方式，_self表示当前页，_blank表示新标签页

  • 小结

    • 超链接标签跳转页面的功能
      • <a href="跳转页面地址">...</a>
    • 超链接属性target的含义
      • 表示设置跳转页面的打开方式
      • target="_self"表示在当前页面跳转
      • target="_blank"表示在新建标签页跳转

5.8、表格标签

  • 表格标签的作用

    • 用来显示多条数据
    • 用于一些页面的布局，后期会使用div布局

  • 表格布局其他标签与属性

    • 标签名 作用
      table 表格容器，包含其他元素
      tr 表示一行， table row
      th 列标题，加粗，居中，table head
      td 普通单元格
      caption 表格的标题
      thead 在逻辑上将表格层分为三个部分：表格头部
      tbody 在逻辑上将表格层分为三个部分：表格的主题（PS：如果没有写tbody，浏览器运行时会自动加上tbody）
      tfoot 在逻辑上将表格层分为三个部分：表格尾部
    • 属性名 作用
      width 表格宽度
      border 外边框的粗细
      align 对齐方式：用在table标签上是表示整个表格在父容器标签中居中；用在tr标签上表示表格这一行内容居中；用在td标签上表示这个单元格内容居中
      rowspan 跨几行（将某几行融合为一行）
      colspan 跨几列（将某几列融合为一列）
      cellspacing 单元格之间的间距
      cellpadding 单元格边框与内容之间的间距

5.9、表单标签

  • 表单的作用

    • 接收用户输入数据，并提交数据给服务器

  • form表单格式

    • <form method="提交数据的方式" action="数据提交的目的地">
  手机数据标签
</form>

  • 常用属性

    • form常用属性 作用
      action 提交给服务器的地址
      method 提交的方式

  • 提交方法

    • 提交方法 特点
      GET 默认值，参数在地址栏显示
      POST 参数不会显示，更加安全

  • 注意事项

    • action
      • 规定当提交表单的时候向何处发送表单数据， URL
    • method：规定用于发送表单数据的方式
      • GET：浏览器会将数据直接附在表单的action URL 之后。大小有限制
      • POST：浏览器会将数据放到http请求消息体中，大小没有限制。
    • 表单数据要想提交必须满足两个要求
      • 1.必须使用form标签将表单项标签包起来
      • 2.表单项标签必须要有name属性

6、用户注册案例

  • 用户注册案例显示效果
  • 实现细节
HTML01litext-aligncenterHTML5

有关01-HTML基础的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  7. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  10. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

随机推荐