html 的初识

最新推荐文章于 2025-02-15 18:02:12 发布
最新推荐文章于 2025-02-15 18:02:12 发布
阅读量946 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/semenry/article/details/12561489

1.什么是html？

  Hypertext markup language(超文本标记语言)

  由w3c万维网联盟制定，浏览器按照标记的含义显示内容。

    用来设计网页的标记语言，以这种编辑语言编写的文件必须以.html或.htm(早期的windows要求后缀不得超过三个字符，也许为了兼容早期的东西)为后缀，会被浏览器解释执行的标记语言。

 

2.Html的基本结构？

 

 

与显示无关

标题：要显示在浏览器的标签

”refresh”content=”5”>每隔五秒刷新一次

”content-type”

content=”text/html;charset=utf-8”>

比如：refresh浏览器会在指定的时间间隔刷新页面

Content-type高速浏览器返回的数据类型及编码

”stylesheet” type=”text/css”href=”style.css”>

”myjs.js”>

 

 

 

注意:标记不要这样写.因为 有些浏览器不识别。

也不能这样写，

经常用来申请一些模拟的消息头

不要这样写”” type=””href=””>

 

  消息头：

html <wbr>的初识html <wbr>的初识html <wbr>的初识html <wbr>的初识html <wbr>的初识

html <wbr>的初识html <wbr>的初识html <wbr>的初识

 

3.Html的版本

Html90年发布

4.主要的浏览器

Ie 微软#

Firefox mozila #

Chrome google

Opera 挪威

Safari apple

5.重要的标记  

1）链接

a 基本使用

”链接所指的地址” target=”打开的窗口

“ title=“提示信息”>连接的描述         

Target属性：

_self:缺省值，在当前窗口打开

_blank:在新窗口中打开

     b ，使用图片作为连接

”链接地址”>”图片地址”/>


换行

使用图片作为连接或自动加边框，要用border=”0“去掉

       C,使用链接发送邮件

href=”mailto=semenry@qq.com?Subject=hello”>给我发邮件

D，锚点

在同一个页面进行跳转

Step1定义一个锚点

”top”小龙女是一个。。，

Step2跳转到锚点

”#top”>小龙女

E使用热点做为链接

Step1定义热点

”Map”>

”rect” coords=”407,20,560,77”href=”gy.html”>

 

Shape形状rest长方形，两个点的横纵坐标

Step2使用热点

”index04.jpg”width=”772”height=”357”

border=”0”Usemap=”#Map”>

F，链接的伪样式

2）表格

A 表格的基本使用

”1”width=”60%“ cellpadding=”“ 

cellspacing=”“>

 

 

 

Border属性：表格边框的宽度

Width属性：表格的

Cellspacing属性：单元格与单元格之间的空隙

Cellpadding属性：单元格内容与单元格的空隙

B 表格的对齐

Align属性：水平对齐 left（缺省）/right/center

C 不规则的表格

Colspan属性：合并水平方向的单元格

Rowspan属性：合并垂直方向的单元格

 

html <wbr>的初识 用户注册登录，访问，提供下载

服务端     ，管理员管理用户数据，

           处理客户端任务

D 表格可以嵌套

 单元格的内容又是一个表格

E 表格的完整定义

 

 

主题

 

表头

 

表教

 

表体

 

 

 

keyichuxian  0,1次习惯上写在之后

 

:可以出现一次或者多次

3)表单

”服务器的程序地址”

Method=”提交方式（post/get）“

 

A input标记

文本输入框：”text”name=”username”value=”缺省值”/>

提交按钮:”submit”value=”提交”/>

密码输入框：”password”name=”pwd”/>

单选框：男”name=”gender“ value=”f”/>

Name相同说明是一组，单选

多选框

兴趣：

钓鱼:”checkbox”name=”interest”

value=”fishing”checked=”checked”/>

远足:”checkbox”name=”interest”

value=”hiking”/>

重置按钮：”reset”value=”重置”/>

普通按钮：”button”value=”按钮”/>

上传文件：”file”name=”file1”/>

隐藏域：

”hidden”name=”userTd”value=”123”/>

B非input标记

下拉列表：”city”>

”bj”>北京

上海

 



最后附上html

 

 

 


 

 

 

     证券调查示例

 

 

12
34
 :可以出现0次或者1次

投资经验


新手

中级

专家


您否买股票的类型


股票

期权

互惠基金



您购买股票的方式为？

 


今年选择什么证券？



有对其他投资者的意见吗？



 

 

 

【前端】HTML详细教程（下篇）
孤寒者的博客
10-24 6万+
爬虫必备前端技术栈 - HTML（下篇）
HTML+CSS第一课：初识HTML-3个步骤创建自己的第一个html网页
王迪
10-14 8147
1、HTML语言 HTML 全称 Hyper Text Markup  Language，超文本标记语言。 超文本：指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言：将文本及相关信息结合起来，展示出文档结构与数据处理细节的电脑文字编码。 2、超文本标记语言的组成 超文本标记语言由标记组成，并且成对出现。（HTML文档中标记又称为标签）HTML标签是HTML语言中最基本的单位...
nbsp标签
allenymlu的博客
02-15 1244
是 HTML 中常用的特殊字符实体，主要用于插入空格、防止换行和占位。虽然它非常实用，但在现代开发中，建议优先使用 CSS 来控制布局和间距，以保持代码的清晰和语义化。
HTML中的& nbsp; & ensp; & emsp;等6种空格标记
热门推荐
su
03-08 7万+
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（&amp;nbsp;）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（&amp;ensp; &amp;emsp; &amp;thinsp; &amp;zwnj;&amp;zwj;）在不同浏览器中宽度各异。 &amp;nbsp; 它叫不换行空格，全称No-Break Space，它是最常见和我们使用...
html中的“&nbsp;”
github_38111380的博客
05-17 5717
nbsp是英文Non-Breaking SPace的缩写，可以直接翻译成“不被折断的空格” 一个" "相当于一个空格，多加几个" "就可以把空格拉大。虽然" "可以当作空格用，但是" "其实和空格是不一样的
HTML中的& nbsp; & ensp; & emsp;等6种空格标记 (实用）
chelen_jak的专栏
01-06 3255
原文出处：https://www.cnblogs.com/Salicejy/p/css.html 代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML中的& nbsp...
HTML&nbsp;标签大全（转）
feiniu5566的专栏
10-30 2306
一、文字 1.标题文字 .......... #=1~6；h1为最大字，h6为最小字 2.字体变化 .......... 【1】字体大小 <font size=#>.......... #=1~7；数字愈大字也愈大 【2】指定字型 <font face="字体名称">.......... 【3】文字颜色 <font color=#rrggbb>..........             
初识flask框架
weixin_44423698的博客
09-24 347
flask简介 Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。优点是耦合度大幅度降低，提升了可扩展空间，缺点是复杂了维护性。 创建flask 使用pycharm工具，首先需要在虚拟环境其中安装flask，然后直接创建即可，因为pycharm支持创建flask框架。 分析...
从入门到精通HTML5——PDF——网盘链接
02-27
nbsp; 49 　3.2.9 其他特殊符号 50 　3.3 设置段落格式 51 　3.3.1 段落标记——p 51 　3.3.2 取消文字换行标记——nobr 52 　3.3.3 换行标记——br 53 　3.3.4 保留原始排版方式标记——pre 53 　3.3.5 居中对齐...
html&nbsp;&nbsp;特殊字符(转)
feiniu5566的专栏
10-30 1万+
有些字符在HTML里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？ 这就要说到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者
HTML中&nbsp； &ensp； &emsp； &thinsp；等6种空白空格的区别
暂时先用这个名字
02-28 7526
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。，它是按下space键产生的空格。
HTML字符实体（关于&nbsp;&gt;&lt;等）
a_oiu的学习笔记
07-04 9316
关于&nbsp;在html中多个空格会被浏览器缩为一个，所以我们要用&nbsp;来达到多个空格的目的。不过后来我都用全角空格比较方便。觉得&nbsp;很难记，今天查了一下，找到了英文意思才好记一些。nbsp即non-breaking space，与一般的空格有
html5&nbsp;介绍
aa_mmnn的博客
03-18 647
加上doctype声明，让浏览器使用标准模式
【HTML 教程系列第 25 篇】HTML 中的空格 &nbsp
“Allen Su”的博客
11-03 5241
一：HTML 中的空格 &nbsp。 二：使用空格 &nbsp 的注意事项。 三：直接 按空格键 和 用代码实现空格 的区别。
HTML&nbsp;th标签
lovejesuslove的博客
03-21 584
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 一。 <a rel="nofollow" href= "http://www.dreamdu.com/xhtml/tag_th/">th 标签 -- 代表HT
html空格符&nbsp
韩梦飞沙_韩亚飞
02-18 5555
&nbsp; 我们平时键盘空格的 空格符号。
html空格：&nbsp;
qq_45122293的博客
01-27 309
<body> <p>hello world</p> hello world </body> 可以看到无论有几个空格，都只显示一个空格（而且换行也只显示成一个空格） 用&nbsp可以输出空格 <body> <p>hello&nbsp;&nbsp;&nbsp;&a...
HTML标签解释大全
angnong3282的博客
03-01 741
HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(DTD)。 标签：a 说明：标明超链接的起始或目的位置。 标签：acronym 说明：标明缩写词。 标签：address 说明：特定信息，如地址、签名、作者、此文档的原创者。 标签：applet 说明：在页面上放置可执行内容...
这是我写的空格，有没有更好的写法 <span class="cmd-id"> {{ cmd.id }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cmd-type">{{ cmd.label }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cmd-type">{{ cmd.type }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cmd-type">{{ cmd.time }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cmd-type">{{ cmd.status }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
最新发布
07-16
<think>我们正在寻找替代大量使用`&nbsp;`来实现文本对齐的优雅方法。根据引用[1][2][3]的内容，过度使用`&nbsp;`可能导致布局问题，尤其是在响应式设计中。引用[4]提到了使用Flexbox布局的`align-content`属性，但这里我们更关注水平对齐问题。 优雅的替代方案： 1. 使用CSS的Flexbox布局：可以轻松实现元素的对齐，无需使用`&nbsp;`。 2. 使用CSS Grid布局：同样可以精确控制元素位置。 3. 使用text-align属性：对于文本对齐，使用text-align更合适。 4. 使用margin和padding：通过调整间距实现对齐。 5. 使用伪元素：在某些情况下，可以用伪元素来添加间隔。 具体到问题中的代码，原代码中使用了多个`&nbsp;`来分隔指令ID、类型和按钮。我们可以通过CSS布局来重构，避免使用`&nbsp;`。 重构步骤： 1. 将指令信息（ID和类型）和操作按钮（暂停、删除）分别放入两个容器中。 2. 使用Flexbox布局，让这两个容器分别占据左右两侧。 3. 在左侧信息容器内，也可以使用Flex布局来设置ID和类型的间距。 代码示例： 原代码结构（简化）： ```html <div class="instruction-info"> <span class="cmd-id"> {{ cmd.id }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cmd-type">{{ cmd.type }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <el-button ...>暂停</el-button> <el-button ...>删除</el-button> </div> ``` 重构后： ```html <div class="instruction-info"> <div class="info-left"> <span class="cmd-id">{{ cmd.id }}</span> <span class="cmd-type">{{ cmd.type }}</span> </div> <div class="info-right"> <el-button ...>暂停</el-button> <el-button ...>删除</el-button> </div> </div> ``` 样式： ```css .instruction-info { display: flex; justify-content: space-between; /* 左右两侧分开 */ align-items: center; /* 垂直居中 */ } .info-left { display: flex; gap: 20px; /* 使用gap属性设置子元素之间的间距 */ } .info-right { display: flex; gap: 10px; /* 按钮之间的间距 */ } ``` 这样，我们完全移除了`&nbsp;`，使用Flex布局的gap属性（或者margin）来控制间距，更加清晰和易于维护。 另外，根据引用[3]提到的，在表格对齐等场景中，如果确实需要空格，可以考虑使用`&nbsp;`作为占位，但布局场景中应优先使用CSS。 总结：使用CSS布局技术（Flexbox或Grid）替代`&nbsp;`进行对齐是更优雅、更可维护的方式。 相关问题： 1. 在响应式设计中，如何调整Flexbox布局以适应不同屏幕尺寸？ 2. 除了Flexbox，CSS Grid在实现复杂布局时有哪些优势？ 3. 如何解决Flexbox布局中的浏览器兼容性问题？ 4. 在文本排版中，如何实现首行缩进、段落间距等效果而不使用` `或`&nbsp;`？</think># 优雅的文本对齐方案：替代大量&nbsp;的CSS布局方法 在HTML中使用大量`&nbsp;`来实现对齐不仅代码臃肿，还会导致维护困难和响应式问题。下面我将介绍几种更优雅的CSS替代方案。 ## 问题分析 使用`&nbsp;`的常见问题： - 代码可读性差，难以维护 - 无法适应不同屏幕尺寸 - 间距控制不精确 - 不利于响应式设计 ## 优雅的CSS替代方案 ### 1. Flexbox布局（推荐） ```html <div class="flex-container"> <div class="label">指令ID:</div> <div class="value">CMD-2023-001</div> <div class="label">类型:</div> <div class="value">类型A</div> <div class="actions"> <button>暂停</button> <button>删除</button> </div> </div> <style> .flex-container { display: flex; align-items: center; /* 垂直居中 */ gap: 15px; /* 元素间距 */ } .label { font-weight: bold; min-width: 70px; /* 固定标签宽度 */ } .actions { margin-left: auto; /* 自动将按钮推到右侧 */ display: flex; gap: 10px; } </style> ``` ### 2. Grid布局（复杂布局首选） ```html <div class="grid-container"> <div class="label">指令ID:</div> <div class="value">CMD-2023-001</div> <div class="label">类型:</div> <div class="value">类型A</div> <div class="actions"> <button>暂停</button> <button>删除</button> </div> </div> <style> .grid-container { display: grid; grid-template-columns: auto 1fr auto 1fr auto; /* 5列布局 */ align-items: center; gap: 15px; } .actions { grid-column: 5; /* 将按钮放在最后一列 */ display: flex; justify-content: flex-end; /* 右对齐 */ gap: 10px; } </style> ``` ### 3. 伪元素实现等宽间距 ```html <div class="spaced-container"> <span>指令ID: CMD-2023-001</span> <span>类型: 类型A</span> <div class="actions"> <button>暂停</button> <button>删除</button> </div> </div> <style> .spaced-container { display: flex; } .spaced-container > span:not(:last-child)::after { content: ""; display: inline-block; width: 30px; /* 自定义间距 */ } </style> ``` ### 4. 文本对齐与间距控制 ```css /* 替代 &nbsp; 的文本对齐方案 */ .text-align-center { text-align: center; } .text-align-right { text-align: right; } /* 替代 &nbsp; 的间距控制 */ .spacing-small { margin-right: 8px; } .spacing-medium { margin-right: 16px; } .spacing-large { margin-right: 24px; } ``` ## 实际应用示例 ```html <div class="command-card"> <div class="command-header"> <h3>任务标题</h3> </div> <div class="command-grid"> <div class="command-info"> <span class="label">指令ID:</span> <span class="value">CMD-2023-001</span> </div> <div class="command-info"> <span class="label">类型:</span> <span class="value">类型A</span> </div> <div class="command-actions"> <button class="btn-warning">暂停</button> <button class="btn-danger">删除</button> </div> </div> </div> <style> .command-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .command-header { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .command-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; align-items: center; } .command-info { display: flex; gap: 10px; } .label { font-weight: bold; min-width: 60px; } .command-actions { display: flex; justify-content: flex-end; gap: 10px; } .btn-warning { background: #ffc107; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; } .btn-danger { background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; } </style> ``` ## 最佳实践建议 1. **优先使用Flexbox/Grid布局**：现代CSS布局技术提供了更强大的对齐能力[^4] 2. **使用gap属性控制间距**：替代`&nbsp;`创建元素间距 3. **利用margin/padding进行微调**：精确控制元素间距 4. **避免使用固定宽度**：使用min-width/max-width实现响应式设计 5. **使用CSS变量统一间距**： ```css :root { --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; } .element { margin-right: var(--spacing-md); } ``` 6. **在必须使用空格时**：考虑使用` `(1/6em)或` `(1/2em)替代`&nbsp;`[^2][^3] 通过这些CSS技术，您可以完全避免使用`&nbsp;`进行布局控制，创建更干净、更可维护且响应式的设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值