html基础

最新推荐文章于 2023-07-28 17:44:43 发布
转载 最新推荐文章于 2023-07-28 17:44:43 发布 · 88 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/liangdong/p/10230611.html

HTML 是什么？

htyper text markup language  即超文本标记语言

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言.

 

网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

 

html文档树形结构图

 

什么是标签:

  • 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
  • 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
  • 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

 

标签的属性:

  • 通常是以键值对形式出现的. 例如 name="alex"
  • 属性只能出现在开始标签 或 自闭和标签中.
  • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

 


<!DOCTYPE html>标签

 

head标签：

 

  • <meta>meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页 功能。

1 name属性主要用于描述网页，与之对应的属性值为content，content中的内容 主要是便于搜索引擎机器人查找信息和分类信息用的。

     <meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">

     <meta name="description"content="老男孩培训机构是由一个老的男孩创建的">

2 http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有 用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content      中的内容其实就是各个参数的变量值。

    <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

    <meta http-equiv="content-Type"content="text/html;charset=UTF8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

   

 

  • <title>老男孩</title>
  • <link rel="icon" href="http://www.jd.com/favicon.ico">

 

 

body标签：

 一 基本标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

 <div><span>

块级标签和内联标签

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素

inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下 
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

 

特殊字符：

      &lt; &gt；&quot；&copy;&reg;

 

 

二 图形标签: <img> :

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

三 超链接标签(锚标签)<a>:

href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : #书签名称.

四 列表标签：

<ul>: 无序列表

<ol>:有序列表

         <li>:列表中的每一项.

<dl> 定义列表

         <dt> 列表标题

         <dd> 列表项

 

转载于:https://www.cnblogs.com/liangdong/p/10230611.html

HTML基础模板
qq_61690596的博客
07-18 2316
HTML基本模板，每个基础元素的内容和作用
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2890
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
PHP:编写标准体重计算器
ITarmi的分享
05-05 2211
1.简单的标准体重计算器 <meta http-equiv="Content-type" Content="text/html;charset=UTF-8;" /> <html> <head> <title>PHP交互页面演示</title> </head> <body> <form meth...
使用JavaScript写一个计算器。（附源码）
qq_39597371的博客
09-26 3078
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; /*9.编写一个计算器，实现加，减，乘，除，归0，计算功能。*/
HTML基础
weixin_45502025的博客
08-14 127
1:HTML HTML:Hyper Text Markup Language 超文本标记语言 **超：**不仅仅可以放文字，还可以插入图片，插入链接，视频，音频 .html **标记：**就是浏览器可以识别的文字和符号 你常用的浏览器有哪些？ 浏览器：外壳+内核（分为渲染引擎html+css和js引擎；作用是解析html+css+js） 1、Chrome 内核： Webkit B...
HTML基础知识点总结
weixin_64704029的博客
07-28 2444
html知识点
HTML基础练习题
热门推荐
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 5058
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
Web前端入门必看！20道非常有代表性的HTML基础测试题
xiaoxijing的博客
08-05 2437
近两年，Web前端发展的越来越快，Web前端开发工程师也变得异常吃香，即使是到了今年的毕业季，Web前端开发的市场依然辽阔。Web前端开发工程师的薪资福利也水涨船高。因此，想加入Web前端行业的人越来越多。 那么，怎么才算入门Web前端呢？想要从事Web前端开发行业，需要了解哪些相关的面试技巧呢？接下来分享20道HTML基础题自测一下，你可要仔细看哦！ 1、HTML 指的是？（） A.超文本标记语言（Hyper Text Markup Language） B.家庭工具标记语言（Home Tool Marku
HTML基础（新手入门教程）
华夏天骄
05-17 5292
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
PHP 实验01-02 HTML基础与PHP开发环境
xmingy254的博客
06-06 693
PHP 实验01-02 HTML基础与PHP开发环境 实验目的 (1)掌握HTML常用标记的使用方法； (2)掌握PHP配置文件的配置方法； 实验准备 (1)了解HTML标记的主要属性和作用； (2)了解在PHP开发环境的组成和编程语言； 实验内容 一、用PHP编写一个标准体重计算器，在当前页面显示结果(文件名命名为SY2_1.php) 标准体重计算公式：标准体重=(身高cm－100)×0.9(kg) //SY2_1.php <?php header("content-type:text/h
PHP-HTML基础与PHP开发环境
快乐的小小程序猿
07-13 829
HTML基础与PHP开发环境 一、用PHP编写一个标准体重计算器，在当前页面显示结果(文件名命名为SY2_1.php) 标准体重计算公式：标准体重=(身高cm－100)×0.9(kg) （运行WampServer，在浏览器中输入localhost/SY2_1.php） 代码：（SY2_1.php） <!DOCTYPE html> <html> <head&g...
用javascript实现一个简单计算器
哈佛凌晨
02-20 3532
js-10-php-计算器实现 js简易计算器 1.布局 2.获取用户输入内容 3.用户输入内容进行计算 4.把计算结果显示在文本框中 --> //获取输入的内容 var clearFlag=false;//是否清楚清楚文本框中计算的结果 function getNum(num){          //首先获取文本框中的对象     var obj
基于QT的调色板
08-15
【基于QT的调色板】是一个使用Qt框架开发的色彩选择工具，类似于Windows操作系统中常见的颜色选取器。Qt是一个跨平台的应用程序开发框架，广泛应用于桌面、移动和嵌入式设备，支持C++和QML语言。这个调色板功能提供了横竖两种渐变模式，用户可以方便地选取所需的颜色值。 在Qt中，调色板（QPalette）是一个关键的类，用于管理应用程序的视觉样式。QPalette包含了一系列的颜色角色，如背景色、前景色、文本色、高亮色等，这些颜色可以根据用户的系统设置或应用程序的需求进行定制。通过自定义QPalette，开发者可以创建具有独特视觉风格的应用程序。 该调色板功能可能使用了QColorDialog，这是一个标准的Qt对话框，允许用户选择颜色。QColorDialog提供了一种简单的方式来获取用户的颜色选择，通常包括一个调色板界面，用户可以通过滑动或点击来选择RGB、HSV或其他色彩模型中的颜色。 横渐变取色可能通过QGradient实现，QGradient允许开发者创建线性或径向的色彩渐变。线性渐变（QLinearGradient）沿直线从一个点到另一个点过渡颜色，而径向渐变（QRadialGradient）则以圆心为中心向外扩散颜色。在调色板中，用户可能可以通过滑动条或鼠标拖动来改变渐变的位置，从而选取不同位置的颜色。 竖渐变取色则可能是通过调整QGradient的方向来实现的，将原本水平的渐变方向改为垂直。这种设计可以提供另一种方式来探索颜色空间，使得选取颜色更为直观和便捷。 在【colorpanelhsb】这个文件名中，我们可以推测这是与HSB（色相、饱和度、亮度）色彩模型相关的代码或资源。HSB模型是另一种常见且直观的颜色表示方式，与RGB或CMYK模型不同，它以人的感知为基础，更容易理解。在这个调色板中，用户可能可以通过调整H、S、B三个参数来选取所需的颜色。 基于QT的调色板是一个利用Qt框架和其提供的色彩管理工具，如QPalette、QColorDialog、QGradient等，构建的交互式颜色选择组件。它不仅提供了横竖渐变的色彩选取方式，还可能支持HSB色彩模型，使得用户在开发图形用户界面时能更加灵活和精准地控制色彩。
基于springboot二手物品交易网站系统【附万字论文+PPT+包部署+录制讲解视频】.zip
最新发布
08-15
标题基于Spring Boot的二手物品交易网站系统研究AI更换标题第1章引言阐述基于Spring Boot开发二手物品交易网站的研究背景、意义、现状及本文方法与创新点。1.1研究背景与意义介绍二手物品交易的市场需求和Spring Boot技术的适用性。1.2国内外研究现状概述当前二手物品交易网站的发展现状和趋势。1.3论文方法与创新点说明本文采用的研究方法和在系统设计中的创新之处。第2章相关理论与技术介绍开发二手物品交易网站所涉及的相关理论和关键技术。2.1Spring Boot框架解释Spring Boot的核心概念和主要特性。2.2数据库技术讨论适用的数据库技术及其在系统中的角色。2.3前端技术阐述与后端配合的前端技术及其在系统中的应用。第3章系统需求分析详细分析二手物品交易网站系统的功能需求和性能需求。3.1功能需求列举系统应实现的主要功能模块。3.2性能需求明确系统应满足的性能指标和安全性要求。第4章系统设计与实现具体描述基于Spring Boot的二手物品交易网站系统的设计和实现过程。4.1系统架构设计给出系统的整体架构设计和各模块间的交互方式。4.2数据库设计详细阐述数据库的结构设计和数据操作流程。4.3界面设计与实现介绍系统的界面设计和用户交互的实现细节。第5章系统测试与优化说明对系统进行测试的方法和性能优化的措施。5.1测试方法与步骤测试环境的搭建、测试数据的准备及测试流程。5.2测试结果分析对测试结果进行详细分析，验证系统是否满足需求。5.3性能优化措施提出针对系统性能瓶颈的优化建议和实施方案。第6章结论与展望总结研究成果，并展望未来可能的研究方向和改进空间。6.1研究结论概括本文基于Spring Boot开发二手物品交易网站的主要发现和成果。6.2展望与改进讨论未来可能的系统改进方向和新的功能拓展。
基于Python的学生宿舍管理系统的设计与实现+数据库文档
08-15
1. 用户与权限管理模块 角色管理： 学生：查看个人住宿信息、提交报修申请、查看卫生检查结果、请假外出登记 宿管人员：分配宿舍床位、处理报修申请、记录卫生检查结果、登记晚归情况 管理员：维护楼栋与房间信息、管理用户账号、统计住宿数据、发布宿舍通知 用户操作： 登录认证：对接学校统一身份认证（模拟实现，用学号 / 工号作为账号），支持密码重置 信息管理：学生完善个人信息（院系、专业、联系电话），管理员维护所有用户信息 权限控制：不同角色仅可见对应功能（如学生无法修改床位分配信息） 2. 宿舍信息管理模块 楼栋与房间管理： 楼栋信息：名称（如 "1 号宿舍楼"）、层数、性别限制（男 / 女 / 混合）、管理员（宿管） 房间信息：房间号（如 "101"）、户型（4 人间 / 6 人间）、床位数量、已住人数、可用状态 设施信息：记录房间内设施（如空调、热水器、桌椅）的配置与完好状态 床位管理： 床位编号：为每个床位设置唯一编号（如 "101-1" 表示 101 房间 1 号床） 状态标记：标记床位为 "空闲 / 已分配 / 维修中"，支持批量查询空闲床位 历史记录：保存床位的分配变更记录（如从学生 A 调换到学生 B 的时间与原因） 3. 住宿分配与调整模块 住宿分配： 新生分配：管理员导入新生名单后，宿管可按专业集中、性别匹配等规则批量分配床位 手动分配：针对转专业、复学学生，宿管手动指定空闲床位并记录分配时间 分配结果公示：学生登录后可查看自己的宿舍信息（楼栋、房间号、床位号、室友列表） 调整管理： 调宿申请：学生提交调宿原因（如室友矛盾、身体原因），选择意向宿舍（需有空位） 审批流程：宿管审核申请，通过后执行床位调换，更新双方住宿信息 换宿记录：保存调宿历史（申请人、原床位、新床位、审批人、时间） 4. 报修与安全管理模块 报修管理： 报修提交：学生选择宿舍、设施类型（如 "
深入学习循环神经网络（RNN）的方法与技巧
08-15
资源下载链接为： https://pan.quark.cn/s/8a7ca10dbd74 深入学习循环神经网络（RNN）的方法与技巧（最新、最全版本！打开链接下载即可用！）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值