HTML笔记1

最新推荐文章于 2021-06-26 01:14:03 发布
最新推荐文章于 2021-06-26 01:14:03 发布
阅读量327 收藏 6
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51525719/article/details/109309117
版权

HTML

——用来描述网页的一种语言

1.网页的基本结构框架

<!DOCTYPE html>
<html>
<head lang="en"> //网页的语言  en  英文   ch中文
    <meta charset="UTF-8">//浏览器的编码格式是utf-8
    <title></title>//插入网页标题名称
</head>
<body>

</body>
</html>

2.标签元素
——元素的内容是开始标签与结束标签之间的内容
——标签元素大体被分为三种不同的类型：
块状元素，行内元素（内联元素），行内块状元素
这三者是可以互相转换的，使用display属性能够将三者任意转换
1）display：inline；转换为行内元素
2）display：block；转换为块状元素
3）display：inline-block；转换为行内块状元素

  • 块状元素
    代表性的就是div,元素特征：
    ①能够识别宽高
    ②margin和padding的上下左右均对其有效
    ③可以自动换行，每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行)
    ④多个块状元素标签写在一起，默认排列方式从上至下
    ⑤元素宽度在不设置的情况下，占它本身父容器的100%
    在这里插入图片描述

  • 行内元素
    最常使用的就是span，元素特征：
    ①设置宽高无效
    ②对margin仅设置左右方向有效，上下无效；
    对padding设置上下左右都有效，即会撑大空间
    ③不会自动进行换行

  • 行内块状元素
    综合了行内元素和块状元素的特性，各有取舍。元素特征：
    ①不自动换行
    ②能够识别宽高
    ③默认排列方式从左到右

3.标签

  • [ 1 ] 标题标签：h标签1~6
    特点： 块级元素 文字加粗 字体大小由大到小 存在默认的上下间距
  • [ 2 ] 段落标签 ：p标签
    特点：文档分段 块元素（浏览器会自动地在段落的前后添加空行）
    属性： align=“center” left center right 文本对齐方式
  • [ 3 ] 水平线标签：hr 标签
    在 HTML 页面中创建水平线。
    hr 元素可用于分隔内容。
  • [ 4 ] 强制换行标签：br标签
    br /元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
  • [ 5 ] 文本格式化标签：
    加粗： < b> < strong>行级元素
    斜体：< i> < em>行级元素
    上下标：< sub>下 < sup>上
    （例：H2o ，32=9）
    小号字标签：< small>行级元素
    插入文字标签：< ins>行级元素
    删除线标签：< del>行级元素
  • [ 6 ] 输出标签
    输出代码标签：< code>行级标签
    预先格式化标签:< pre>块级标签
    （被包围在 < pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。常见应用就是用来表示计算机的源代码。）
  • [ 7 ] 超链接标签：a标签
    属性①： href="" 描述了链接的目标
    可以写远程路径（远程路径也是相对路径 只不过上线了） 也可以写相对路径（先对当前项目文件的路径）
    href="#" 默认跳转当前页面
    属性②： Target 属性
    可以定义被链接的文档在何处显示。
    target="_blank" 重新打开选项卡
    属性③：id属性
    可用于创建在一个HTML文档书签标记。
    例：
    1）在HTML文档中插入ID:
    < a id=“tips”>Useful Tips Section< /a>
    2）在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：
    < a href="#tips">Visit the Useful Tips Section< /a>
    3）从另一个页面创建一个链接到"有用的提示(id=“tips”）部分"：
    < a href=“http://www.w3cschool.cc/html_links.htm#tips”>
    Visit the Useful Tips Section< /a>
    相对路径：可以直接路径，也可以使用点来写路径
    *注：使用a连接去做锚标时
    1.当前页面的锚标
    < a href="#mm">衣服< /a>
    2.跨页面的锚标
    < a href="./page/stu.html#p_1">跨页面的标记< /a>
    标记为使用其他元素 添加id属性即可 除过 a标签可以name属性
  • [ 8 ] 图像标签：img标签 行级元素
    属性①：src="" 源属性，当前图片的路径 可远程可相对
    src 指 “source”。源属性的值是图像的 URL 地址。
    定义图像的语法是：< img src=“url” alt=“some_text”>
    URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
    属性②： alt="" 图片加载失败的时候 显示的信息
    替换文本属性的值是用户定义的。
    < img src=“boat.gif” alt=“Big Boat”>
    在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
    属性③： title="" 标题信息
    属性④： width="" 设置图片的宽
    height="" 设置图片的高
    属性⑤： align="" 文本对齐
  • [ 9 ] 列表标签：块元素
    HTML 支持有序、无序和定义列表:
    ①无序列表：ul li
    ②有序列表：ol li 属性 ： type=“i” 可以修改序号
    ③自定义列表：dl dt dd
    自定义列表以 < dl> 标签开始。每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd> 开始。
    例：
    < dl>
    < dt>Coffee< /dt>
    < dd>- black hot drink< /dd>
    < dt>Milk< /dt>
    < dd>- white cold drink< /dd>
    < /dl>
    浏览器显示如下：
    Coffee
  • black hot drink
    Milk
  • white cold drink
  • [ 10 ] 表格标签：table 标签
    tr标签定义表格有几行
    td标签定义每行被分为几个单元格，即单元格的内容
    例：
    < table border=“1”>
    < tr>
    < td>row 1, cell 1< /td>
    < td>row 1, cell 2< /td>
    < /tr>
    < tr>
    < td>row 2, cell 1< /td>
    < td>row 2, cell 2< /td>
    < /tr>
    < /table>
    在浏览器显示如下：

在这里插入图片描述
th标签定义表格的表头表示居中加粗
属性①： border 控制表格的边框宽度
cellspacing=“0 设置为0 合并列间距的
width=“400” 设置表格的宽
align=“center” 设置表格是居中对齐 left center right
bgcolor=”#f5f5dc" 设置背景颜色的
rowspan 跨行
colspan 跨列

  • [ 11 ] 表单标签：form
    HTML 表单用于搜集不同类型的用户输入，是一个包含表单元素的区域。
    ① imput：输入标签，输入类型是由类型属性（type）定义的。行级块
    ②文本域：通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。若< input/> 没有写type属性 默认是单行文本框
    value="" 是元素的值
    maxlength=“10” 设置最大的输入长度
    disabled 添加之后 变成不可用
    ③密码字段：密码字段通过标签< input type=“password”> 来定义。
    ④单选框选项：< input type=“radio”> 标签定义了表单单选框选项
    默认选择属性 checked
    做多选一 设置相同的name属性
    ⑤复选框选项：< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
    ⑥提交按钮：< input type=“submit”> 定义了提交按钮.
    < button type=“button”>按钮< /button> 不写type属性 默认type是submit
    < input type=“button” value=“登录”/>
    —— submit提交 reset重置 作用于form表单的 在外部无效
    < input type=“submit”/>
    < input type=“reset”/>
    属性： action="" 提交到后台的服务器路径
    method=“get” 表单提交方式 get 显示提交
    get提交优点是数据量大 不安全
    post 隐式提交 优点是安全 数据量比较小
    （get post put delete insert update）
    ⑦文件上传：type=“file”
    属性：accept=".mp4,.wmv" 限制文件格式
    multiple多选
    ⑧下拉菜单 ：select
    < select>
    < option>——请选择——< /option>
    < option value=“0”>西安< /option>
    < option value=“1”>宝鸡< /option>
    < option value=“2”>咸阳< /option>
    < option value=“3”>渭南< /option>
    < /select>
    value：是操作的值
    selected ：默认选择属性
    ⑨多行文本框：< textarea>< /textarea>
    属性： placeholder=“请输入…” rows=“10” 多少行 cols=“40” 多少个列
    写默认值 写在标签中间
    ⑩input 元素定义标注（标记）标签：label
    ——< label> 标签的 for 属性应当与相关元素的 id 属性相同
    “for" 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。

< fieldset>标签：将表单内容的一部分打包，生成一组相关表单的字段，会在相关表单元素周围绘制边框。
< legend>标签：为fieldset元素定义标题
例：
< fieldset>
< legend>用户注册< /legend>
< /fieldset>

一只爱吃鱼的驴
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Html页中使用OCX控件
Hao的专栏
04-22 2万+
 最近准备开发一个b/s架构的应用程序需要用到activeX控件，web服务器尚未进入编码阶段，偶手上已有原用于vc客户端程序中的ocx控件，想测试一下此控件在普通网页上执行功能有无偏差，于是搞了个简单的html静态页面调用来测试OCX控件。  一 注册OCX控件新建reg.txt文件编辑RegSvr32  TestOCX.ocx  //TestOCX是控件名保
html5页面调用ocx控件_HTML5新增全局属性
weixin_35327421的博客
12-16 465
HTML5新增了全局属性概念，所谓全局属性就是可以对任何元素都可以的属性。html51、contentEditable属性主要功能是允许用户在线编辑元素中的内容，它是一个布尔值属性，可以被设定为true或者false。该属性还有一个隐藏的inherit(继承)状态，如果属性值为true时表示为可编辑状态，如果属性值为false时表示为不可编辑状态，如果是未设定属性值，则由inherit状态来决定，...
ocx 访问 html,HTML 加载ocx VB编写的控件
weixin_34928522的博客
06-26 271
打开 VB 6.0 -》 文件 -》 新建工程 -》ActiveX 控件 -》工程的默认名称是 工程1，我们修改成 prj1 -》控件的默认名称是 UserControl1 ，我们可以改成自己想要的名字，例如：myCTRL1 -》随便拖动几个基本控件，例如Button 或者文本框等等，主要是为了加载控件的时候可以看出效果 -》选择菜单上的 文件 -》 生成 prj1.ocx 选项 -》选择好保存的...
HTML调用OCX控件
04-23
项目代码，主要描述两个问题：1、OCX控件在html中的声明格式2、OCX接口的调用方法（注：在网页测试时还需要先将OCX控件注册，本人之前上传过OCX控件注册反注册的工具）
html调用com组件ocx，ocx回调html
11-07
编写了一个com组件,regvr32注册组件后可供html调用，编写了一个回调函数调用html中的方法，返回计算中的时时状态。有回调函数讲解文档及html调用demo。
HTML5笔记1.pdf
11-29
下面是HTML5笔记1.pdf中的重要知识点总结： 新特性 HTML5引入了许多新的特性，旨在提高Web应用程序的性能、可用性和可访问性。其中包括： *semantic元素：HTML5引入了许多新的semantic元素，如header、nav、main...
ypjh001#-#HTML笔记1
07-25
HTML元素网站列表表单表格\元素创建一个表。要将数据添加到行中，可以使用\元素。使用该\元素创建表格的头部。使用该\元素创建表的主体。使用\元素创建表的页脚。
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML笔记1（2024.3.14）第一篇博客
03-14
作为初学者对于这些还是一知半解好多东西都无法掌握，只能够通过这种手段分享一些基础性的知识，笔记。虽然这些东西不是太好但我会不断学习掌握更牛逼的技术，不断学习。 通过对html的学习我认识到了不一样的程序员...
HTML学习笔记pdf版
最新发布
07-19
HTML 学习笔记简介 1. 概述 HTML（HyperText Markup Language，超文本标记语言）是用于创建和结构化网页内容的标准语言。它定义了网页中的各种元素和其布局方式，包括文本、图像、链接、表格等。 2. 基本结构 ...
html+js前端调用【海康威视摄像头】demo.zip
11-22
网上找了很久相关资料，最终发现这个可用。大家可以看看。海康威视视频js+html调用demo。先运行exe,再打开html，如果需要集成的话自己修改一下demo即可。另外，我说明一下，这玩意谷歌用不了，我已经找了海康威视售后确认了，需要用到谷歌浏览器的童鞋，可以参考一下即可。
ajax调用php页面内容,从ajax调用PHP页面更新HTML的jQuery问题。
weixin_28772667的博客
04-16 129
所以我有一个问题得到了PHP $ _SESSION数组中数组元素的正确计数。我使用$ _SESSION ['user'] ['list']来存储用户从php页面中选择的项目的唯一标识符。我使用jQuery和PHP页面来处理点击。这部分工作完美无瑕。用户点击一个按钮，按钮的唯一标识符被添加到$ _SESSION ['user'] ['list']。从ajax调用PHP页面更新HTML的jQuery问...
前端调用ocx将ocx封装为cab包整体流程
weixin_34082789的博客
11-16 401
前一阵公司需要做一个将ActiveX嵌入浏览器项目，由于起初是用bat手动注册，不方便用户的使用，搜索资料了解到CAB包可以直接在ie浏览器中自行注册，比较方便1、首先要编写要给inf文件，我是用txt写的，然后直接更改后缀，以下是我的inf[version]signature="$CHICAGO$"AdvancedINF=2.0 [A...
ajax 和 php 和 javascript（html）
风子猫笔记
08-25 550
获取表单内容  var username = $("#username").val(); ------------------------------------------------ ajax的调用 async：false   使用同步方式 cache:true ajax 返回值是json类型,在php这边接收时,选择用php输入流php://input 获取原始的输入内容
网页调用OCX方法
热门推荐
lopper的专栏
05-31 1万+
<br />1、注册OCX <br />     方法：在开始－运行 中输入regsvr32  OCX绝对地址，<br />     例如：regsvr32  C:/Windows/System32/aaa.ocx<br />2、参照下面的代码在HTML页写出代码<br /><OBJECT   id=Test<br />   classid="clsid:90ED08BD-05B6-4CC8-BE14-610245EE75AC"<br />   codebase="./aaa.ocx#version=1,0
ajax怎么在html与php中使用,如何使用ajax和php将数据从数据库表放到html表
weixin_42101164的博客
03-10 227
我想做的是使用ajax和php将数据库表数据放入索引页中的html表。我的问题是数据没有显示。有人知道我的代码有什么问题吗？的HTML：NameAgeGenderAction脚本：$(document).ready(function(){$.ajax({url: 'process.php',type: 'post',data: {tag: 'getData'},dataType: 'json',s...
ajax怎么在html与php中使用,php – 如何在通过ajax加载的html中运行javascript
weixin_31416737的博客
03-10 122
如果您想按需加载Javascript.这可以通过动态创建脚本标记来完成.这种模式在Stoyan Stefanov书 –Javascript Patterns中有所说明这本书剪了一下：写一个require函数.然后这样称呼它：require("extra.js", function () {functionDefinedInExtraJS();});样品需要功能：function require(f...
ocx控件自适应网页所给区域大小_进补前端知识短板埋下的坑网页布局问题
weixin_39644377的博客
11-29 181
好久没有更新公众号了，节前来吐槽下最近遇到的一件麻烦事儿。 大概今年四五月份的时候做了一个web项目，当时请了外协来做设计和前端，设计说“就选定1920*1080的尺寸了”，当时没觉得这句话会带来什么问题啊，合同也没签就吭哧吭哧的做。 项目开发了有半年了吧，基本功能已经开发完毕了，结果领导去和业主谈签合同要钱的时候，业主拿出了他的笔记本打开页面，布局和...
web前端－HTML 视频（Videos） 024
helloMr_wo的博客
10-21 1371
使用 <embed> 标签<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 代码显示嵌入网页的 Flash 视频：<embed src="intro.swf" height="200" width="200">问题 HTML4 无法识别 <embed> 标签。您的页面无法通过验证。 如果浏览器不支持 Flash，那么视频将无法播放 iPad 和 iPhone 不能
ACCP8.0 S1 HTML5学习笔记：超文本标记语言与网页原理
"北大青鸟ACCP8.0 S1阶段的HTML5学习笔记，由教员整理，内容全面，适合初学者复习使用。" 在深入理解HTML之前，我们需要知道HTML是一种超文本标记语言（HyperText Markup Language），它主要用于描述网页内容的结构...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值