文章目录
- HTML基本格式
- HTML 分级标题
- HTML 段落
- HTML 链接
- HTML 图像
- HTML 元素
- HTML 文本格式化
- 列表
- 无序列表
- 有序列表
- 表格
- iframe 内嵌窗口
- input标签
- 表单
- output 在 表单的使用
- output相关属性
- output在form实现简单的整数加法
特别鸣谢l菜鸟教程和lzd歌歌的教程
HTML基本格式
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
html5不必像python注意缩进,压缩后都是一行
基本格式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是网址标题</title>
</head>
<body>
<!-- 网页控件元素,类似按钮/图片/文章什么的都写在这里 -->
</body>
</html>
简单介绍下各个部分:
<!doctype html> 这段开头代码的意思是声明本文件为HTML5文档
html5中大小写区分不严格,小写也可
< html > 元素是 HTML 页面的根元素
< head > 元素是头部的意思
< meta charset = “UTF-8”> 编辑中文网站没有这个会出现一堆乱码
< title > 文档标题
< body > 元素包含了可见的页面内容
HTML 分级标题
< h1 > 一级标题 ,数字依次往后,级数向后递减
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
res:
HTML 段落
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
HTML 图像
文档和图片放在同一个文件夹比较方便emm
格式
<img src = "smile.png" alt = "smile" />
其中 loading默认是eager , 立即加载图像,不管它是否在可视视口(visible viewport)之外。
另外一个是lazy,延迟加载图像,直到它和视口接近到一个计算得到的距离,由浏览器定义。
src: 要显示的图像的 URL。
alt:当用户无法查看图像时(可能由于网速太慢、错误的 src 属性、或者用户使用的是屏幕阅读器),alt 属性为图像提供了替代的文本。width
宽度。height
高度。border="1"
边框,一个像素边框宽度
HTML 元素
开始标签 | 元素 | 结束标签 |
| 这是一个段落 |
|
| 这是个标题 |
|
| 这是个链接 |
|
| 换行 | |
| 水平线 | |
| 注释 |
|
在开始标签中添加斜杠,比如 <br/>
,是关闭空元素的正确方法
HTML 标签对大小写不敏感:<P>
等同于 <p>
。许多网站都使用大写的 HTML 标签。在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
字体大小:
<font size = "6">6号字体的大小</font>
<br/>
<font size = "5">5号字体大小</font>
HTML 文本格式化
<b>这是粗体</b><br/><br/>
<i>这是斜体</i><br/><br/>
<code>电脑自动输出</code> <br/><br/>
<sub>下标</sub> 和 <sup>上标</sup><br/><br/>
<small>小号</small><br/><br/>
<ins>插入字</ins><br/><br/>
<del>定义删除字</del><br/><br/>
字体
<font>``</font>
size 修改字体大小
color 颜色
face 修改字体
列表
无序列表
<ul><!-- type = "none"-->
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<ul>
后面加 type = "none"
去掉圆点
有序列表
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
表格
<table> <!-- 表示表格标签 -->
<tr> <!-- 行标签-->
<td> <!-- <th> 表示表头标签,加粗了的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>
同样表格也能加width height border
cellspacing="num"
单元格间距
iframe 内嵌窗口
在页面里加载一个新的小窗口
<iframe src=".-html" width="" height="" name ="abc">
</iframe>
iframe标签配合a标签使用 , 当iframe 的 name属性和 a标签的target属性值相同时,就可以将a标签的链接加到iframe里面
<iframe src=".-html" width="" height="" name ="aa">
</iframe>
<a herf = ".html" target = "aa"></a>
input标签
name
:那么name属性的值你可以设置为name=“password” 如果填的是性别,那么name属性的值则可以设为name="sex"或者设为genderbutton
定义可点击按钮checkbox
复选框 (多选)color
date
datetime
email
定义用于e-mail地址字段,提交时会验证。file
上传文件hidden
定义隐藏字段password
定义密码字段radio
单选项reset
重置按钮search
搜索字段submit
定义提交字段tel
电话text
文本url
输入url字段value
:
对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本
对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始(默认)值
对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL。
还有很多 这里就不一一补充
表单
<form action="test.php" method="get">
<h1 align="center">表单格式化</h1>
<table align="center" border = "1">
<tr>
<td>
用户名<input name = "username" type="text" >
</td>
</tr>
<tr>
<td>
密码 <input type="password" maxlength="num" name="pwd">
</td>
<tr>
<td>
性别:<input name = "sex" value = "1" type = "radio" >男
<input name = "sex" value = "0" type = "radio" checked = "checked">女
</td>
</tr>
<tr>
<td>
爱好<input name = "hobby" value="lol" type = "checkbox" /> lol
<input name = "hobby" value="apex" type = "checkbox"/> apex
<input name = "hobby" value="lushi" type="checkbox"/> lushyi
</td>
</tr>
<tr>
<td>
出生年<select name="year">
<option value="2000"> 2000</option>
<option value="2001"> 2001</option>
<option value="2002">2002</option>
</select>
</td>
<tr>
<td>
出生月<select name = "month">
<option value="01"> 01</option>
<option value="02"> 02</option>
<option value="03">03</option>
<option value="04"> 04</option>
<option value="05"> 05</option>
<option value="06">06</option>
<option value="07"> 07</option>
<option value="08"> 08</option>
<option value="09">09</option>
<option value="10"> 10</option>
<option value="11"> 11</option>
<option value="12">12</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重置">
</td>
</tr>
<tr>
<td>
<input type="file" >
</td>
</tr>
<tr>
<td>
<input type = "submit" value = "提交">
</td>
</tr>
</table>
</form>
output 在 表单的使用
<output name="名称" for="element_id">默认内容</output>
output相关属性
for
:定义输出域相关的一个或多个元素,以空格隔开。
form
:定义输入字段所属的一个或多个表单,以空格隔开。
name
:定义对象的唯一名称(表单提交时使用)。=
output在form实现简单的整数加法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>output的使用</title>
</head>
<body style="background-color:blanchedalmond">
<h3>output的使用</h3>
<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
<input id = "a" value="0" type="number"> +
<input id="b" value="0" type="number"> =
<output name="x" for="a b">0</output>
</form>
</body>
</html>