HTML简单标签

HTML简单标签

html: 是超文本标记语言 作用是描述网页一种语言
html不是编程语言 是标记语言
使用html的标记标签 描述网页
html文档也叫web页面
什么是html标签：是使用 html标签通常成对出现 也有单标签的
eg:
声明 当前的文档是html
标签 里面显示当前网页的所有信息 lang=“en” 标注网页的语言 en 英语 ch 中文
head 标签 头标签 title标签 显示在网页的选项卡区域
body 标签 显示网页的所有内容
meta 标签 信息标签 charset=utf-8 标注当前网页的编码格式 utf-8 meta 标签在head里面
常用标签
注：网页的渲染格式是从左到右 从上到下 进行渲染

1.标题标签
h1-h6 由大到小 加粗 换行

<h1>我是标题标签</h1>
<h2>我是标题标签</h2>
<h3>我是标题标签</h3>
<h4>我是标题标签</h4>
<h5>我是标题标签</h5>
<h6>我是标题标签</h6>

2.hr水平线标签

3.p 段落标签
分割为一个段落 换行 align文本位置

<p align="center">上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。<br/>忘记使用结束标签会产生意想不到的结果和错误。</p>
<p align="right">上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。</p>
<p align="left">上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。</p>

4.br强制换行

<br/>

5.文本格式化标签
i 斜体

<i>文本</i>

文本
b 加粗

<b>文本</b>

文本
u下滑线

<u>文本</u>

文本
sub下标标签

H<sub>2</sub>o

H2o
sup上标标签

3<sup>2</sup>=9

32=9
em斜体

<em>文本格式化</em>

文本格式化
small小号字

<small>文本格式化</small>

文本格式化
strong加粗

<strong>文本格式化</strong>

文本格式化
del添加删除线

<del>文本格式化</del>

文本格式化
pre预先格式化
6.链接
标签 a超文本链接 跳转页面
href 跳转路径 相对路径和绝对路径
href 默认写# 代表跳当前页面

<a href=""></a>
eg:<a href="http://www.baidu.com
"></a>
跳转百度

属性 target
target="＿self" 在当前网页里面打开
target="＿blank" 重新打开一个选项卡
路径分为绝对路径和相对路径，绝对路径是文件所在盘的目录，相对路径是相对于当前文件的位置，相对路径是绝对路径的一部分。远程路径就是相对路径，只不过把项目放到远程的服务器上面，通过远程的服务器来访问路径。
（注：网页从服务端打开 里面路径不能写绝对路径 很容易造成文件的丢失）

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

相对路径：

<!--同级目录下  可以直接写名称-->
<!--<a href="index.html">打开index.html</a>-->
<!--下面这种是按照父文件去写的
一个点 代表从当前文件向外跳转一级
-->
<a href="./index.html">打开index.html</a>
<!--跳转兄弟文件里面的子目录-->
<!--<a href="page/page1.html">跳转page1</a>-->
<a href="./page/page1.html">跳转page1</a>

绝对路径：

绝对路径想要有效果   当前文件必须从静态文件打开
<a href="F:/web-4.11/0411/index.html">跳转index 页面</a>

制作锚标：
当前页面锚标

<a href="#target">跳转当前页面的锚标记</a>

跨页面的锚标：

<a href="./page/page1.html#target">跳转到page页面的锚标位置</a>

a链接name属性：

<a  name="targetinfo"></a>

别的标签id属性 通过锚标可以实现跳转

<p id="target">这里当前页面的标记地方</p>

1. 图片标签 img
   src属性是图片的路径 alt是图片加载失败的显示内容。
   属性 align 作用是图片 效果是后边的文字位置

<img align="center" src="./image/1.jpg" alt=""/>美图
<img src="https://www.runoob.com/images/pulpit.jpg" alt="加载失败"/>

1. 列表标签
   有序（序号）列表 ol li
   属性type 修改序号的显示。默认数字

<ol type="1">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>

无序列表 ul li

<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>

（注：可进行嵌套使用）
9.区块标签
div 容器 主要用来做网页的框架布局 换行

<div>这是一个div</div>

span 放置文字的标签

<span>span标签</span>

10.input标签 单标签
属性 type 决定当前的input标签的类型
没有type属性时 为单行文本框
text ：文本框
password ：密码框
maxlength ：输入最大长度
button ：按钮
value 属性 为标签的值
eg:

<input type="text" value="" maxlength="10" placeholder="请输入账号...">
<input type="password" value="" placeholder="请输入密码..."/>
<input type="button" value="登录"/>

checkbox 多选框
radio单选框 将多个radio做成单选框
给radio起相同的名字 name相同
checked：默认选择
（注：checkbox radio的value值不在界面显示 给代码用）
eg:

<input type="checkbox" value="篮球" checked/>篮球
<input type="checkbox" value="足球"/>足球

<input type="radio" value="0" checked name="sex"/>男
<input type="radio" value="1" name="sex"/>女
<input type="radio" value="2" name="sex"/>无

file :打开文件资源管理器 用来做文件上传

<input type="file"/>

submit：提交按钮 value更改文字
reset ：重置 单独写是无效的

<input type="submit" value="注册"/>
<input type="reset" value="清空"/>

select：下拉菜单
默认选择： selected
菜单选项 ：option
eg:

<select>
<option>——请选择——</option>
<option value="西安市">——西安市——</option>
<option value="宝鸡市" selected>——宝鸡市——</option>
<option value="咸阳市">——咸阳市——</option>
</select>

textarea : 文本域 多行文本框
rows行 cols列 控制默认外观
placeholder：提示信息

<textarea rows="10"  cols="10" placeholder="请输入..."></textarea>

表单元素标签
form 做用户登录或者注册
action 属性 提交表单数据到后台的路径
method 属性 表单提交的方式
get显示提交（将表单内容显示到路径的后面） post隐式提交
delete 专门针对于删除操作
insert 专门针对于增加操作
update 针对修改操作

table 表格元素标签
border 属性 设置表格的边框宽度
width 属性 设置表格的宽
cellspacing 列之间的间距
align 设置表格居中的方式
cellpadding 设置列的内间距 按照左上来设置 右下自动跟随
tr 行内写align 行内文字居中
td 列
bgcolor 表格颜色
th 也是列 自动居中加重
表头 caption 标签
表格的跨行 rowspan
跨列 colspan =列数 计数时算自身
eg:

<table bgcolor="#00bfff" border="1"  width="400" cellspacing="0" align="center">
<caption>202010086-学生信息</caption>
<tr bgcolor="#fff">
<th rowspan="5">10086班</th>
<th colspan="5">学生的基本信息</th>
</tr>
<tr bgcolor="#7fffd4">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>西安市</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>咸阳市</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>17</td>
<td>男</td>
<td>宝鸡市</td>
</tr>
</table>

执行：

iframe内嵌框架 用于制作小型的企业系统
使用a链接和iframe命名。将跳转页面嵌入在iframe框架中
src属性 内嵌的地址
width 设置宽 heigth 设置高（高设置为百分百无效 因为浏览器无高）
name 属性 名称
border 属性 设置边框 移出边框设置为0