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

相关推荐
深色風信子6 小时前
Vue 富文本编辑器
前端·javascript·vue.js·wangeditor·vue 富文本·wangeditor-text·前端富文本
xiaobangsky6 小时前
前端安全防护指南(三)反射型XSS
前端·安全·xss
咖啡の猫6 小时前
Python顺序结构
java·前端·python
conkl6 小时前
梅森旋转算法深度解析:构建更健壮的前端请求体系
前端·算法·状态模式
z***39627 小时前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
e***58237 小时前
Nginx 配置前端后端服务
运维·前端·nginx
小奶包他干奶奶7 小时前
Webpack学习——Plugin(插件)
前端·学习·webpack
张拭心7 小时前
AI 从业者需要铭记的时刻:2023年6月30日
前端·ai编程
我叫张小白。7 小时前
Vue3 Hooks:逻辑复用的解决方案
前端·javascript·vue.js·前端框架·vue
S***t7148 小时前
前端物联网开发
前端·物联网