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

相关推荐
啃火龙果的兔子5 分钟前
在 React + Ant Design 项目中实现文字渐变色
前端·react.js·前端框架
江城开朗的豌豆7 分钟前
Vue生命周期:beforeMount和mounted到底差在哪?手把手教你避坑!
前端·javascript·vue.js
mortimer17 分钟前
一行代码的“失效”:从`InvalidStateError`说起
javascript·html·jquery
江城开朗的豌豆27 分钟前
Vue中动态添加对象属性?这个生命周期时机选对了没?
前端·javascript·vue.js
前端小巷子33 分钟前
深入 Vue v-model
前端·vue.js·面试
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | VerifyAccountUi(验证码组件)
前端·javascript·css·vue.js·vue
yinuo1 小时前
企业微信侧边栏本地开发调试
前端
德育处主任1 小时前
p5.js 加载 3D 模型(loadModel)
前端·数据可视化·canvas
无名客03 小时前
npm run dev 启动项目 报Error: listen EACCES: permission denied 0.0.0.0:80 解决方法
前端·javascript·vue.js
零点七九3 小时前
vue npm install卡住没反应
前端·vue.js·npm