HTML(页面架构)
一.什么是HTML
HTML是一种超文本标记语言
- 超文本:文本,图片,音频,视频,超链接等
- 标记:符号,标签
标记是没有逻辑的
组成:
- 指令
- 转义字符
- 标签
目的:完成页面的搭建
HTML页面大致的组成部分
-
<!doctype html>:必须出现在页面的最上方，规定该文档采用的html版本类型 -
<html>:页面标签：包含所有页面内容，只有head与body两个子标签 -
<head>:头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标,主放功能 -
<body>:体标签：页面显示内容存放区域、样式、脚本,主放内容
简单的一个htm5搭建:
<!DOCTYPE html>
<html lang="en"> <!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析>
<head>
<meta charset="UTF-8"> <!--meta 为body里内容的编码的方式-->
<title>Title</title> <!--网页的标题-->
</head>
<body>
</body>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
二.指令
-
注释:``,还有一种不常用的注释写法
<!-注释内容-> -
文档类型:<!doctype>
三.转义字符
语法:&内容;
常用的转义字符
<: <
>: >
空格：
版权：©
四.标签
1.标题标签
h1~h6:里面内容相对于普通的内容会加粗,且会自动换行
2.段落标签
p:自带换行，有段落间距
3.文本类型标签
共同点都不带换行
常用的文本类型标签
- b与strong:内容加粗
- i与em:内容斜体
- sup:上角标
- sub:下角标
- span:没有什么意义,但是会用来嵌套其他文本表示共同使用
4.超链接标签
a标签
例如如下一句
<a href ='http://www.baidu,com' targe = '_slef'>页面中显示的文本内容</a>
-
href:里面选择超链接地址,注意如果没加
http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接 -
targe:
- _self:在原本的窗口打开
- _blank:创建一个新窗口打开
- _top:覆盖上一条记录
- _parent:覆盖所有的记录
且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色
5.图片标签
<img title="这是二哈" alt="二哈" src="url">
- title:鼠标停留会显示,也可以用于其他标签当属性
- alt:src中的 url响应失败显示的内容
- src:图片的url
6.列表标签
ul>li:无序标签
ol>li:有序标签
特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数
显示结果:
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
</ul>
ul>li{第$$列}*5 显示结果
<ul>
<li>第01列</li>
<li>第02列</li>
<li>第03列</li>
<li>第04列</li>
<li>第05列</li>
</ul>
7.表格标签
table>tr>th|td
- tr:行
- th:标题单元格
- td:普通单元格
属性
- border:边框像素
- cellspacing:单元格的间距,最小为0
- cellpadding:单元格的内边距
- rules:all处理成一条直线,但是不能与cellspacing一起用会冲突
- colspan:th与td的属性表示占几列默认为1
- rowspan:th与td的属性表示占几行默认为1
案例
<table border="1" rules="all">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td colspan=2">2</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
五.表单
from>input|label|button|textarea|select
1.form表单属性
| 属性 | 值 | 含义 |
|---|---|---|
| action | url | 指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码 |
| method | get或post | 将表单数据提交到http服务器的方法，可能值有两个：get和post |
| enctype | application/x-www-form-urlencoded | 指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。 |
2.input标签
input属性大概介绍:
- type:按钮的属性
- id:标识
- name:与后端交互的key
- values:给后端的值,如果没有name则没法给到后端
案例介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<form action="">
<p>
<!--label作为input的文本解释标签，for绑定id-->
<!--value属性是表单标签的内容，就是提交给后台的-->
<!--name是提交给后台的key，value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性，不需要写值，multiple多选 checked默认激活-->
<label for="username">账号：</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密码：</label>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
</p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
</form>
</body>
</html>
3.input标签type属性
| type属性 | 空间名称 | 对应代码 |
|---|---|---|
| text | 单行文本输入框 | <input type="text"/> |
| password | 密码输入框 | <input type="password"/> |
| checkbox | 复选框 | <input type="checkbox" checked='checked'/> |
| radio | 单选框 | <input type="radio"/> |
| submit | 提交按钮 | <input type="submit" value='提交'/> |
| reset | 重置按钮 | <input type="reset" value='重置'/> |
| button | 普通按钮 | <input type="button" value=“普通按钮”/> |
| hidden | 隐藏按钮 | <input type="hidden" value=“隐藏按钮”/> |
| file | 文本选择框 | <input type="file"/> |
4.select标签(下拉列表)
<form id="form1" name="form1" method="post" action="">
<select name="city" id="city">
<option value="北京">北京</option>
<option value="天津" selected="selected">天津</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="内蒙">内蒙</option>
</select>
</form>
5.select属性
multiple : 布尔属性，设置后允许多选，否则只能选择一个
disabled : 禁用该下拉列表
selected : 首次显示时,为选中状态
value : 定义发往服务器的选项值
6.textarea标签
<form id="form1" name="form1" method="post" action="">
<textarea cols=“宽度” rows=“高度” name=“名称”>
默认内容
</textarea>
</form>
7.textarea属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | name | 控件名称 |
| rows | number | 设置多行文本框的显示行数（高度） |
| cols | number | 设置多行文本框的显示列数（宽度） |
| disabled | disabled | 布尔属性，设置当前文本框为禁用状态 |
8.label标签
<form id="form1" name="form1" method="post" action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</form>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
9.label属性
label元素不会向用户呈现任何特殊效果
<label> 标签的 for 属性应当与相关元素的 id 属性相同
结合CSS可以控制表单文本或控件对齐，美化表单
10.button标签
只是个简单的按钮
六.单标签
- br:换行
- hr:分割线
- 表单使用的标签
- img:图片标签
七.div标签
div标签自带换行,主要是用来网页大体的分区框架的划分
八.注意
- html中不区分大小写
- 如果你写的显示内容没有写在body内,浏览器解析后还是会默认把内容丢到body内
网友评论