自学嵌入式 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>

相关推荐
毕设源码-邱学长3 分钟前
【开题答辩全过程】以 基于VUE的藏品管理系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
用户28907942162711 小时前
Spec-Kit应用指南
前端
酸菜土狗1 小时前
🔥 手写 Vue 自定义指令:实现内容区拖拽调整大小(超实用)
前端
ohyeah1 小时前
深入理解 React Hooks:useState 与 useEffect 的核心原理与最佳实践
前端·react.js
Cache技术分享1 小时前
275. Java Stream API - flatMap 操作:展开一对多的关系,拉平你的流!
前端·后端
apollo_qwe2 小时前
前端缓存深度解析:从基础到进阶的实现方式与实践指南
前端
周星星日记2 小时前
vue中hash模式和history模式的区别
前端·面试
Light602 小时前
Vue 高阶优化术:v-bind 与 v-on 的实战妙用与思维跃迁
前端·低代码·vue3·v-bind·组件封装·v-on·ai辅助开发
周星星日记2 小时前
5.为什么vue中使用query可以保留参数
前端·vue.js
lebornjose2 小时前
javascript - webgl中绑定(bind)缓冲区的逻辑是什么?
前端·webgl