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 | 单行文本输入框 | |
password | 密码输入框 | |
checkbox | 复选框 | |
radio | 单选框 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
button | 普通按钮 | |
hidden | 隐藏按钮 | |
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 内
来源: http://www.jianshu.com/p/2436bf185dd5