HTML快速入门笔记

一、HTML快速入门

说明:所有加*号内容代表不常用,了解即可。

  1. HTML概述
    超文本:Web是一个超文本的集合;超文本是web的基本组成单元,也成为网页或HTML文档,Web页等,通常以.html或.htm为后缀的文件;文件通过超链接组织在一起。
    HTML: 超文本标记语言

  2. HTML基础语法
    标记语法:HTML用于描述功能的符号称为“标记”,比如<p>标记在使用时必须用尖括号括起来,有封闭和非封闭标记(空标记)。
    元素:即标记,每一对尖括号包围的部分,元素可以包含文本内容和其他元素。
    属性和值:属性用来修饰元素,属性声明必须位于开始标记里,用空格隔开,不分先后顺序;每个属性都有值。如<p align="center"></p>
    标准属性:或通用属性。id、title、class、style
    注释:1、<!--注释部分-->注释之间的任何内容不会显示在浏览器中 2、注释不可以嵌套在其他注释中;3、注释不可以嵌在<>中。
    HTML和XHTML:1999年12月,W3C推荐标准HTML4.01;XHTML于2000年1月成为W3C标准,是更严格更纯净的HTML版本。比如双标记必须关闭。
    HTML5:目标是更简洁的HTML代码,如<input type="text" readonly="readonly"/>,等于后的相同部分可以去掉。并保证兼容性。
    3、HTML文档结构
    文档类型声明+hmtl页面(文件头+文件主体)
    1、文档类型声明:

    HTML5 <!DOCTYPE HTML>
    
     2、文档结构:
    
    <!DOCTYPE HTML><html><head></head><body></body></html>
    

二、HTML内容

1、文本1、特殊字符:空格、制表符、换行会被压缩成一个空格转义字符: &lt;< , &gt;> , &nbsp; 空格, &copy;版权符号 。2、文本样式:对文本的修饰【一般不太建议使用这些元素来定制文档的外观,而建议使用CSS样式来实现外观的定义】-<b>..</b>加粗-<i>..</i>倾斜-<u>..</u>下划线-<s>..</s>删除线-<sup>..</sup>上标-<sub>..</sub>下标3、标题元素<h1>-<h6>4、换行元素<br/>5、分割线元素<hr>:常用属性:size、width、align、color6、预格式化元素:<pre>..</pre>,保留原文档格式7、段落元素(块级元素)<p></p><p>元素提供了结构化文本的一种方式。之间的文本会用单独的段落显示,-与前后文本换行分开,-添加一段额外的垂直空白距离,作为段间距,-常用属性-align。8、分区元素<span>和<div>:分区元素用户为元素分组,常用与页面布局-块级分区元素:<div></div>-行内分区元素:<span></span>,设置同一行文字内的不同风格如:<p>一周畅销<span>榜</span></p>9、行内元素与块级元素-块级元素:默认情况下,块级元素会独占一行,即元素前后自动换行,如:<p>,<div>,<hn>-行内元素:不会换行,可以和其他行内元素位于同一行,如:<span>,<b>,<i>,<u>2、图像和链接1、<img/> 必须元素:src,常用 width height2、<a href="#" target="" name="">文本</a>  href:链接url  target:目标 可取_blank,_self等 name:描点名称锚点:文档中某行的一个记号,用于连接到文档的某个位置1、定义锚点:<a name="here">锚点一</a>2、链接到锚点:在锚点前加#。<a href="#here">链接到锚点一</a>或<a href="页面url#here">链接到锚点一</a>3、链接类型:普通超链接:<a href="" target="">文本</a>下载链接:<a href="DAY02.zip">下载</a>电子邮件链接,用于链接到 email:<a href="mailto:tarena@tarena.com.cn">联系我们</a>空链接,用于返回页面顶部:<a href="#">...</a>链接到JavaScript,以实现特定的代码功能:<a href="javascript : ⋯">JS 功能</a>3、表格作用:用来组织结构化的信息。元素及常用属性:<table> : width height align border cellspacing cellpadding  bgcolor<tr>:align valign<td>:colspan rowspan<caption>:定义标题,居中显示,紧跟table之后,只能有一个表头:<thead> 表主体<tbody> 表尾<tfoot>表格可跨行、跨咧、嵌套。
4、结构标记经常使用<div>设计页面大致布局。HTML5提供了结构标记:<header>页头 <nav>导航 <section>主体 <footer>页脚 <aside>边栏 <article>其他
5、列表作用:将具有相似特征或先后顺序的几行文字进行对齐排列,所有的列表都由列表类型和列表项组成。-列表类型:<ol>有序列表,<ul>无序列表。-列表项:<li>	具体的列表内容列表可以嵌套<ol type="列表类型:1,a,A,i,I" start="起始编号"><li></li></ol><ul type="列表类型:disc圆心 circle空心圆 squren 实心矩形"><li></li></ul>定义列表<dl>:<dl><dt>术语名称</dt><dd>对术语的解释</dd>					</dl>-其他说明:ul里只能嵌套ul和li,不能嵌套<span>等其他东西。可以嵌套在li里。6、表单作用:用于显示收集信息,并提交的服务器。表单元素<form>:用<form></form>标记主要属性:-action:定义表单被提交时的动作,通常包含服务方脚本的url-method:表单数据提交方式,get/post-enctype:表单数据编码方式-name:表单名称表单控件:表单可以包含很多表单控件,是包含在表单中具有可视化外观的HTML元素,用于访问者输入信息。-input:文本输入控件、按钮、单选和复选按钮、选型框、文本选择框和隐藏控件等。-textarea:-select和option元素-<label></label>1、<input/>元素主要属性:-type控件类型,-value控件的数据,-name控件名称-disabled禁用控件【name和vaule:提交时需要名称和值,键值对,值也可能是内容】type类型:1、文本和密码框:type="text/password",主要属性:name:名称,vaule访问者输入的文本,maxlenght最大长度,readonly只读2、单选框和复选框:type="radio/checkbox",主要属性:name:设置名称并用于分组,一组单选或复选框的名称必须相同value:文本,提交时如果选择了该按钮,value会被发送到服务器端checked:默认被选中3、按钮:type="submit/button/reset"主要属性:name:名称 value:按钮的文本4、隐藏和文件:type="hidden/file"2、<label>元素主要属性:for:表示与该元素相联系的id值,作用:将文本与控件联系在一起,单击文本就如同单机控件一样。或者用label标记阔住input例:<input type="checkbox" name="n" id="id"/><label for="id">呵呵呵</label>3、<select>元素主要属性:-name:选择框名称-size:大于1,则为滚动列表-multiple:设置多选<option>-value:选中的值-selected:被选中4、<textarea>多行文本输入框:-name:名称-cols:文本框列数-rows:文本框行数-readonly:只读为控件分组:<fieldset>:为控件分组<legend>只定分组标题例:<fieldset><legend>我是分组标题</legend><input/></fieldset>其他常用标记:1、浮动框架<iframe>:可以在窗口中同时显示多个页面文档。通过设置iframe的src属性指向其他页面url;例:<iframe src="url">浏览器不支持iframe时,显示我</iframe>2、摘要与细节<details>:目前只有chrome支持例:<details><summary>点击我显示div中的详细信息</summary><div>我是隐藏的详情</div></details>3、度量元素<meter>用户投票比例、磁盘使用比例、统计等。例:<meter value="20"  min="0" max="100" title="20%"></meter>*4、时间元素:<time>例:<time datetime="2015-05-02">二零一五年五月二日</time>5、高亮显示:<mark>例:<p>高亮<mark>显示<mark>文本</p>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache SeaTunnel 初识

文章目录 Apache SeaTunnel 初识为什么我们需要SeaTunnel使用场景特点解决的问题工作流连接器输入插件过滤插件输出插件引擎spark 和 flink 引擎SeaTunnel 引擎集群管理核心功能Apach

力扣1----10(更新)

1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按…

计算机网络:现代通信的基石

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

「Linux系列」Linux网络通讯/系统管理/系统设置/备份压缩/设备管理命令

文章目录 一、Linux网络通讯命令二、Linux系统管理命令三、Linux系统设置命令四、Linux备份压缩命令五、Linux设备管理命令六、相关链接 一、Linux网络通讯命令 Linux网络通讯命令是Linux系统中用于管理和调试网络功能的一系列工具。这些命令可以帮助用户查看网络状态、测试网…

SNMP学习笔记SNMPWALK命令

SNMPWALK是SNMP的一个工具&#xff0c;它使用SNMP的GETNEXT请求查询指定OID入口的所有OID树信息&#xff0c;并显示给用户。 IT监控系统常用snmpwalk获取支持SNMP的网络设备信息&#xff0c;使用snmpwalk收集交换机、路由器的CPU、内存、端口流量等信息。 使用snmpwalk需要安装…

Matlab实现序贯变分模态分解(SVMD)

大家好&#xff0c;我是带我去滑雪&#xff01; 序贯变分模态分解(SVMD) 是一种信号处理和数据分析方法。它可以将复杂信号分解为一系列模态函数&#xff0c;每个模态函数代表信号中的特定频率分量。 SVMD 的主要目标是提取信号中的不同频率分量并将其重构为原始信号。SVMD的基…

异地两台电脑如何共享文件?

在当前数字化时代&#xff0c;人们对于数据的使用和管理变得越来越便捷。由于工作和生活的需要&#xff0c;我们常常需要在异地的电脑间共享文件。这给我们的工作和生活带来了一定程度的不便。有没有一种便捷的方法可以让异地的电脑实现文件的共享呢&#xff1f;答案是肯定的。…

flutter 父组件调用子组件方法

标题在Flutter中&#xff0c;父组件可以通过GlobalKey来引用子组件&#xff0c;并调用子组件的方法。以下是一个简单的例子&#xff1a; 在这个例子中&#xff0c;ParentComponent 有一个GlobalKey&#xff0c;它被传递给了ChildComponent。当按钮被点击时&#xff0c;通过chi…

06 mybatis </sql>

文章目录 products.sqlpom.xmlmybatis-config.xmlProductsMapper.xmlProductsMapperImpl.javaProducts.javaDButil.javaProductsMapperImplTest.javaMapperTest.java products.sql create table products (product_id int auto_increment comment 产品IDprimary key,prod…

知识图谱-图数据库-neo4j (1)踩坑记录

1、neo4j 安装 材料 &#xff1a; openjdk11 (neo4j 最低jdk版本要求) neo4j-community-4.4.30 CentOS 7.8 Release Date: 25 January 2024 Neo4j 4.4.30 is a maintenance release with many important improvements and fixes. Neo4j Deployment Center - Graph Database…

vuex状态管理的使用

一、创建store,单个store的使用 1、 /*** 该文件用于创建vuex中最核心的store*///引入Vuex import Vuex from vuex; import Vue from "vue";//使用vuex来集中管理状态,必要 //new store的前提是必须要使用Vuex插件 Vue.use(Vuex);//创建actions(本质就是对象) 用于…

【前端面试3+1】01闭包、跨域

一、对闭包的理解 定义&#xff1a; 闭包是指在一个函数内部定义的函数&#xff0c;并且该内部函数可以访问外部函数的变量。闭包使得函数内部的变量在函数执行完后仍然可以被访问和操作。 特点&#xff1a; 闭包可以访问外部函数的变量&#xff0c;即使外部函数已经执行完毕。…

vue项目中使用vue-pdf或pdf.Js,实现在页面上预览pdf内容

一。vue-pdf 1. 安装vue-pdf npm install --save vue-pdf2.页面引入 js部分 import pdf from "vue-pdf";data(){return {pdfUrl: "",pageTotal: 0,} }mounted(){this.pdfUrl pdf.createLoadingTask(pdf文件路径url);// 获取页码this.pdfUrl.promise…

Linux 搭建jenkins docker

jekin docker gitee docker 安装 jenkins docker run -d --restartalways \ --name jenkins -uroot -p 10340:8080 \ -p 10341:50000 \ -v /home/docker/jenkins:/var/jenkins_home \ -v /var/run/docker.sock:/var/run/docker.sock \ -v /usr/bin/docker:/usr/bin/docker je…

QT数据类型和容器用法

Qt库提供了基于通用模板的容器类, 这些类可用于存储指定类型的数据项&#xff0c;Qt中这些容器类的设计比STL容器更轻&#xff0c;更安全且更易于使用。容器类也都是隐式共的&#xff0c;它们是可重入的&#xff0c;并且已针对速度/低内存消耗和最小的内联代码扩展进行了优化&a…

【解析几何】 【多源路径】 【贪心】1520 最多的不重叠子字符串

作者推荐 视频算法专题 本身涉及知识点 解析几何 图论 多源路径 贪心 LeetCode1520. 最多的不重叠子字符串 给你一个只包含小写字母的字符串 s &#xff0c;你需要找到 s 中最多数目的非空子字符串&#xff0c;满足如下条件&#xff1a; 这些字符串之间互不重叠&#xff0…

简单讲讲spring事务的传播机制

事务传播机制就像是一个指挥家&#xff0c;控制着程序中的各种操作&#xff08;比如修改数据库&#xff09;何时开始、何时结束&#xff0c;以及如何处理错误。 保证数据一致性&#xff1a;想象一下你在网上购物&#xff0c;你需要先从银行账户扣款&#xff0c;然后再把商品加入…

Wireshark使用实训---分析IP包

1.Wireshark简介和作用 Wireshark是一个开源的网络分析工具&#xff0c;用于捕捉和分析网络数据包。它可以帮助网络管理员和安全专家监控和解决网络问题&#xff0c;同时也可以用于学习和教学网络通信原理。 Wireshark可以在网络中捕获和分析传输的数据包&#xff0c;包括协议…

【Java初阶(五)】类和对象

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; 目录 1. 前言2.面向对象的认识3.类的认识4. 类的实例化4.1什么是实例化4.2类和对象的说明 5.this引用6.对象初始化6.1 构造方法 7.static关键字8.代码块8.1 …

探索Python中的集成方法:Stacking

在机器学习领域&#xff0c;Stacking是一种高级的集成学习方法&#xff0c;它通过将多个基本模型的预测结果作为新的特征输入到一个元模型中&#xff0c;从而提高整体模型的性能和鲁棒性。本文将深入介绍Stacking的原理、实现方式以及如何在Python中应用。 什么是Stacking&…