HTML学习笔记(2) - HTML基础

最新推荐文章于 2024-04-25 20:22:26 发布
最新推荐文章于 2024-04-25 20:22:26 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 【Web 前端】 文章标签： html
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/Robin__Chou/article/details/51496801
版权

本系列的博客，源于韩顺平的HTML，CSS，JavaScript系列教程。需要相关教程的可以再博文下方告知博主，欢迎交流学习。

1. 本地运行

html文件在本地，使用浏览器软件将其打开。和暴风影音打开视频原理是一样的。
有些文件后缀是htm，这是为了兼容比较老的DOS系统。
举例eg：

<html>
<head>
<title>第一个网页</title>
</head>
<body>
<font style = " font-size:70px " color=red > hello word! </font>
</body>
</html>

一个html文件写好了在本地打开，本身是没有什么意义的。更多的情况下是远程访问运行的。除了自己开发调试过程是在自己电脑上完成之外。

2. 远程访问运行

html文件是放在远程服务器上的。apache, tomcat上放上html。apache或者tomcat必须要运行起来。

3. HTML的开发工具

  1. 记事本
    更清晰理解
  2. DW
    自动生成很多代码，但是有时候会有偏差
  3. frontpage
  4. VS
  5. myeclipse
  6. 其他IDE

4. HTML的基本结构

  • 标记语言，都是用标签包含的
  • 基本结构：
    <元素 属性 = “属性值”> 内容

5.html元素的属性

标记是可以嵌套的。
- 字体加粗

<b></b>
  • 段落标记
<p></p>
  • 字体标记
<font size=""></font> size取值1 - 7，
要想让字体更大可以使用<font style=""></font>
font标签的属性：xxxx
  • 换行标记
<br/>

6.html符号实体

网页上显示的一些特殊符号需要使用html符号实体，有些将其称为字符实体，比如像是copyright圈里面有个c的符号。
常用的符号实体有很多。使用的时候要注意后面一定要有分号，虽然新版本的可能不会导致错误。

&copy;
&pound;

遇到需要的可以查看手册。

7. html超链接

使用超链接，可以让网页链接到另一个页面。
基本语法:

<a href="" target=""> ABCD </a>

点一个出现全新的页面，而不关闭之前的。使用属性：target=”_blank”；
target常用的两个属性值一个是_blank和_self，_self表示的就是关闭之前的页面。
ex：

<a href="a.html" target="_blank"> ABCD </a> <br/>
<a href="http://www.baidu.com" target="_blank"> Baidu </a> <br/>
<a href="mailto: robin@github.com" target="_blank"> 写信 </a> <br/>

8. html图片元素

<img src="abc.png" width=100px border=5></img> <br/>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width=200px></img>

tips: src可以是外部网站的一个图片

9. html表格

表格的主要用途是显示数据和图片，并且可以布局。

<table border=1 cellspacing=5 bordercolor="red" align="center" width=500px bgcolor="yellow">
<tr align="center" ><td>1</td><td>2</td><td>3</td></tr>
<tr align="center" ><td>4</td><td>5</td><td>6</td></tr>
<tr align="center" ><td>7</td><td>8</td><td>9</td></tr>
</table>
  • 表格的元素是table；
  • table border=表格边框 cellspacing=每一格的高度 bordercolor=边框颜色 align=表格位置 width=表格宽度 bgcolor=表格背景颜色；
  • tr align=”center” 表格格子中元素的对齐方式；

10. 制作案例

完成如下网页的设计：


案例

- 分析:
一共有5行，有3列（按照最大的）。
- 合并 

<head>
<title>案例1</title>
</head>

<!--html的内容一般存在于body标签下-->
<body>
<table border=1 cellspacing=0 bordercolor=#E674FA align="center" width=500px bgcolor="yellow">
<tr align="center" ><td colspan=3>星期一菜谱</td></tr>

<tr align="center" ><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr>
<tr align="center" ><td>小葱豆腐</td><td>炒白菜</td></tr>

<tr align="center" ><td rowspan=2 >荤菜</td><td>红烧肉</td><td>莲藕排骨</td></tr>
<tr align="center" ><td>油焖大虾</td><td><img src="abc.png"></img>海参鲍鱼</td></tr>
</table>

</body>
</html>
空空的司马
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ScriptCommunicator_serial-terminal：可编写脚本的跨平台数据终端，支持：串行端口，UDP，TCP，SPI，I2C和CAN
02-05
脚本通讯器 ScriptCommunicator是可脚本化的跨平台数据终端，支持串行端口（RS232，USB到串行），UDP，TCP客户端/服务器，SPI，I2C和CAN。 所有发送和接收的数据都可以显示在控制台中，并且可以记录在html和文本日志中。 除了简单的数据发送和接收之外，ScriptCommunicator还具有QtScript（类似于JavaScript）接口。 该脚本界面具有以下功能： 脚本可以使用主界面发送和接收数据。 除主界面外，脚本还可以创建和使用自己的界面（串行端口（RS232，USB到串行），UDP，TCP客户端，TCP服务器，PCAN和SPI / I2C）。
ScriptCommunicatorSetup_05_07 串口调试工具，可发送脚本数据
03-27
用过最好用的串口调试工具，功能强大，界面友好，工作稳定，强力推荐。 之前用过sscom容易死机，DockLight有时候会CPU占用高，RealTerm界面不实用
Windows上 万能的串口调试助手
热门推荐
PaniniGu的博客
05-27 4万+
之前自己找了很久的串口调试助手，还自己去编写，现在发现了一个非常好用的串口工具：ScriptCommunicator。 这是一个开源软件，功能强大。 ScriptCommunicator软件下载地址：https://github.com/szieke/ScriptCommunicator_serial-terminal 它可以存储我们收到的数据：直接通过“console”中的“save co...
软件发布：智能串口调试（支持脚本编程）
01-17
最新版本：http://download.csdn.net/source/2064096 简介 串口开发，在众多工程领域非常重要，比如手机/Modem/监控等等。市面上串口调试工具软件很多，这些工具一般都能支持数据发送、接收，但是： 1） 很少有能支持脚本编程的，所以在自动化处理方面支持不够 2） 手机/Modem的调试主要通过AT命令，市面上的工具通常没有针对性的设计 “智能串口调试”重点解决这两个问题。 特性列表  串口的连接/断开  发送数据：异步，逐行同步  发送数据：支持Lua脚本  发送数据：支持选择换行符<CR>、<LF>、<CR><LF>  接收数据：ASCII和Hex格式显示  接收数据：支持Lua脚本，可设计自动应答机制 运行环境：Windows7,WInXP,需要.NET环境（推荐.NET 3.5） 脚本介绍 脚本采用Lua编程语言，http://www.lua.org/ 发送脚本 可参考“atsend.lua”编写。 本工具定义了一个SendAT(string in)函数，可以以同步方式向串口发送命令： <figure> 发送命令的换行符、同步间隔，在工具界面选择： <figure> 自动应答脚本 可参考“atreply.lua”编写。 本工具定义了4种场景，其中第1种场景最为常见、也最简单： 第2种场景，命令用正则表达式匹配，这样可以对于一组命令做同样的响应： 第3、4种场景，响应可以自己写Lua函数实现，是最为灵活的一种场景：
html标签基础学习笔记
05-24
html标签基础学习笔记
html基础知识学习笔记分享
04-09
对html的一个基础知识的了解，相比后端中包含大量的算法之类的编码。前端的编写明显的简单了很多，里面主要是对一些常用标签进行了一些了解和分享
HTML学习笔记--xmind(传智播客)
03-29
根据黑马程序员html基础视频的知识点总结，在x-mind中打开
01-javaweb基础之html基础学习笔记
05-03
html基础知识，比如常用的标签、表格标签、表单标签、freamset框架、ifream内置框架标签
html学习笔记1 基础标签
05-25
html学习笔记1 基础标签
ScriptCommunicatorSetup_05_10_windows串口助手
07-01
用过最好用的串口调试工具，功能强大，界面友好，工作稳定，强力推荐
串口调试工具V2.0
06-19
串口调试工具，可以解析从串口收到的NMEA卫星导航数据，包括定位卫星数、经纬度、高度、定位精度等，可以设置统计点数；可以保存接收到的数据，可以向串口发送NMEA数据，配合虚拟串口工具，就等于可以模拟卫星导航设备发送数据；也可以作为普通的串口调试工具。由于本人能力有限，算法未必正确，欢迎大家提出意见，邮箱：yuchunyugo@163.com。本程序需要.NET Framework支持。
ScriptCommunicator / serial terminal:支持多种接口的可编写脚本的数据终端。-开源
07-21
ScriptCommunicator 是一款可编写脚本的跨平台数据终端，支持串口（RS232、USB 转串口）、UDP、TCP 客户端/服务器、SPI、I2C 和 CAN。 所有发送和接收的数据都可以显示在控制台中，并且可以记录在 html 和文本日志中。 ScriptCommunicator除了简单的数据发送和接收之外，还有一个QtScript（类似于JavaScript）接口。 该脚本界面具有以下特点： - 脚本可以通过主界面发送和接收数据。 - 除了主接口脚本可以创建和使用自己的接口（串口（RS232、USB转串口）、UDP、TCP客户端、TCP服务器、PCAN和SPI/I2C）。 - 脚本可以使用自己的 GUI（使用 QtDesigner（包含）或 QtCreator 创建的 GUI 文件）。 - 可以通过脚本创建多个绘图窗口（使用 Emanuel Eichhammer 开发的 QCustomPlot）
ScriptCommunicator_serial-terminal:可编写脚本的跨平台数据终端，支持
05-10
脚本通讯器 ScriptCommunicator是可编写脚本的跨平台数据终端，支持串行端口（RS232，USB到串行），UDP，TCP客户端/服务器，SPI，I2C和CAN。 所有发送和接收的数据都可以显示在控制台中，并且可以记录在html和文本日志中。 除了简单的数据发送和接收之外，ScriptCommunicator还具有QtScript（类似于JavaScript）接口。 该脚本界面具有以下功能： 脚本可以使用主界面发送和接收数据。 除主界面外，脚本还可以创建和使用自己的界面（串行端口（RS232，USB到串行），UDP，TCP客户端，TCP服务器，PCAN和SPI / I2C）。 脚本可以使用自己的GUI（已使用QtDesigner（包括）或QtCreator创建的GUI文件）。 可以通过脚本创建多个绘图窗口（使用由Emanuel Eichhammer开发的QCustom
支持设置数据自动回复的串口工具
10-16
支持设置数据自动回复的串口工具。可用于串口调试的辅助工作，用户可自由设置接收数据对应的回复数据，比较好用！
智能串口调试（支持脚本编程），2010-1-23刷新
01-23
最新版本：http://download.csdn.net/source/2064096 简介 串口开发，在众多工程领域非常重要，比如手机/Modem/监控等等。市面上串口调试工具软件很多，这些工具一般都能支持数据发送、接收，但是： 1） 很少有能支持脚本编程的，所以在自动化处理方面支持不够 2） 手机/Modem的调试主要通过AT命令，市面上的工具通常没有针对性的设计 “智能串口调试”重点解决这两个问题。 特性列表  串口的连接/断开  发送数据：异步，逐行同步  发送数据：支持Lua脚本  发送数据：支持选择换行符<CR>、<LF>、<CR><LF>  接收数据：ASCII和Hex格式显示  接收数据：支持Lua脚本，可设计自动应答机制 运行环境：Windows7,WInXP,需要.NET环境（推荐.NET 3.5）
Web前端开发之HTML_3
zx1026409886的博客
04-23 882
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML
最新发布
2401_83693610的博客
04-25 601
分为前端（html、css、js）和后端（php、mysql、Java），前端是看到的内容，由前端人员开发。但网页的固定结构叫做整体、头部、标题、主体... 2.网页中的结构是通过特定的HTML标签进行描述。浏览器：是网页显示、运行的平台，是前端开发必备利器。常见的浏览器包括：IE、火狐浏览器（Firefox）、谷歌（chrome）、Safari浏览器、Opera（欧朋）。三、1.html的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空空的司马

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值