欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  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>
 
  二。指令
 
  注释:——,还有一种不常用的注释写法<!-注释内容->
 
  文档类型:<!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>
 
  五。表单
 
  from>input|label|button|textarea|select
 
  1.form表单属性
 
  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属性
 
  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属性
 
  8.label标签
 
  <form id="form1" name="form1" method="post" action="">
 
  <label for="username">用户名</label>
 
  <input type="text" name="username" id="username" />
 
  </form>
 
  9.label属性
 
  label元素不会向用户呈现任何特殊效果
 
  <label> 标签的 for 属性应当与相关元素的 id 属性相同
 
  结合CSS可以控制表单文本或控件对齐,美化表单
 
  10.button标签
 
  只是个简单的按钮
 
  六。单标签
 
  br:换行
 
  hr:分割线
 
  表单使用的标签
 
  img:图片标签
 
  七。div标签
 
  div标签自带换行,主要是用来网页大体的分区框架的划分
 
  八。注意
 
  html中不区分大小写
 
  如果你写的显示内容没有写在body内,浏览器解析后还是会默认把内容丢到body内

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h59943.shtml