自学嵌入式 day37 HTML

HTML:超文本标记语言

HyperText Markup Language

一种用于创建网页的标准标记语言

HTML 运行在浏览器上,由浏览器来解析。

https://www.runoob.com/html/html-tutorial.html

1.格式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>中文测试。。。。</title>

</head>

<body>

这里是测试body测试内容。。。

</body>

</html><!DOCTYPE html> 声明为 HTML5(最新的HTML标准)文档 告诉浏览器按照标准模式进行解析渲染页面,有助于浏览器中正确显示网页

<html> </html>元素是 HTML 页面的根元素

<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

2.标签 在body内

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 <html>

HTML 标签大部分是成对出现的,比如 <b> 和 </b>,还有少部分为单标签,比如<hr>

标签对中的第一个标签是开始标签,第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<h1></h1>双标签 标题 ,加粗,换行 1-6 ---》小

<p></p> 双标签 段落,有换行功效

<hr> 单标签 左到右分割符(横线)

<!-- -->注释

3.元素的属性

给元素提供附件信息,大部分的元素属性

属性一般描述于开始标签

属性总是以"名称=值对"的形式出现,比如:name="value"。

语法:<标签 属性名称=参数1>

  1. bgcolor ,body的属性设置网页的背景色

<body bgcolor="ff1234">

2)background body的属性设置网页的背景图片

3)align属性 值: left,right,center

4.文本元素属性

b 元素 <b>内容</b> 加粗

br 换行<br>

i元素, 字体倾斜<i></i>

del元素 删除文字<del></del>

strong 强调一段文字,效果类似 b标签

ins元素,插入文字(下划线<ins></ins>)

small元素, 超小字体<small></small>

sub 下标<sub></sub>

sup 上标<sup></sup>

<br>h<sub>2</sub>0

<br>100m<sup>2</sup>

5、img 单标签

<img src="url" alt="some_text">

src 图像来源

alt 如果不能正确打开,显示的替换文字

width, height

<img src="abc.jpg" alt="美女" width="50" height="60">

<img src="abc.jpg" alt="美女" width="50%" height="200%">

百分比是相对于网页而言的, 高度百分比无效的

&nbsp 空格

6、超链接

5种形式

基本语法

<a href="url">链接文本</a>

1.链接外部网站

2.链接本地文件

3.图片链接

4.电子邮件链接打开电子邮件

5.下载文件链接

<a href="http://www.baidu.com">baidu</a>

<br><a href="1.html">链接文件</a>

<br><a href="1.html"><img src="abc.jpg"></a>

<br><a href="mailto:123@13.com">发送邮件</a>

<br><a href="abc.jpg">下载</a>

上面的方法在打开新网页时,老的网页会关闭

target 属性

_self :当前位置打开 默认值

_blank 新窗口中打开

<a href="http://www.baidu.com" target="_blank">baidu</a>

7、列表

1)有序列表,

2)无需序列

3)自定义列表

1)无序列表 前面无数字

<ul type=square>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li>列表4</li>

</ul>

type属性 文字最前面的符号

disc 黑色实心圆

circle 白色空心圆

square 黑色方块

2)有序列表,前面有数字

<ol>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li>列表4</li>

</ol>

其中可以放文字,图片,或链接

有type属性,设置排序使用什么数字

a 表示小写英文字母编号

A 表示大写英文字母编号

i 表示小写罗马数字编号

I 表示大写罗马数字编号

1 表示数字编号(默认)

8、表格的构成,

table,外框

tr 行

td 列

<table border="1">

<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>

<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>

<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>

</table>

3行 3列

表格的属性

border 边框粗细

th,是tr的属性,列标题,自动居中,加粗(和tr用法一样)

colspan,横向合并单元格,需要 整形参数

<tr><th colspan="3">name</th></tr>

表格的合并

rowspan ,列项合并,整数参数

9、表单 传递参数,数据

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

<form>

</form>

属性 action,指定表单发送的地址(表单转向的网页等)

属性 method 发送的方式 get,post

get方法 数据会附加到url的后面传递给服务器 默认

post,将数据包大包发给服务器,等候服务器来读取

表单中重要的字元素 input button

<form method="get" action="">

username: <input type="text" name="用户名"><br>

passward: <input type="text" name="密码">

</form>

10、input元素,(输入框)他是表单的一个字属性

指定表单中的内容项,比如输入内容的文本框

可以指定表单属性,也可以放在表单的外面。

input元素的属性:

type,指定输入框的类型,

text 单行文本,

password 密码,

submit 提交按钮,

radio 单选按钮

reset 重置按键,

image 图片式按键

<input type="image" src="1.jpg" alt="图标" width="48" height="48"

点击图片会上交点击的坐标(get方式url中可以看到)

name:名称,输入内容识别名称,传递参数时候的参数名称

value: 默认值,输入框默认填入的内容,

maxlength,指定最大长度maxlength="3"

placeholder,设置提示信息的。

required:表示内容必须填写,不然不能提交。

<form action="xxx.html" method="get" align="center">

username: <input type="text" name="用户名" required><br>

passward: <input type="password" name="密码" maxlength="3" placeholder="你猜"><br>

<input type="reset" value="重置">

<input type="submit" value="提交">

<input type="button" value="按键">

<input type="image" src="img_submit.gif" alt="图标" width="48" height="48">

</form>

相关推荐
文火冰糖的硅基工坊14 分钟前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_8370885027 分钟前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili35 分钟前
用 Tinymce 打造智能写作
前端
angelQ42 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla1 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
用户6600676685391 小时前
用HTML5 构建一个敲击乐钢琴
html
云中雾丽1 小时前
React.forwardRef 实战代码示例
前端
朝歌青年说1 小时前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
Moonbit1 小时前
倒计时 2 天|Meetup 议题已公开,Copilot 月卡等你来拿!
前端·后端