html

swiftwwj 2020-05-27

HTML:TR TD TH OL UL LI
什么是HTML
  超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用; 是网页制作必备的编程语
  言
  “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
  HTML 不是一种编程语言,而是一种标记语言。
HTML基本结构
  <!DOCTYPE html> 声明为 HTML 文档,HTML文档也常称为网页,
  一个文档包含HTML标签和文本
  <html> 与 </html> 之间的文本描述网页,同时HTML元素也是当前页面的根元素
  <head>是包含了文档的元(meta)数据,如定义网页编码格式<meta charset="utf-8">
  <title>元素描述当前文档页面的标题
  <body> 与 </body> 之间的文本是可见的页面内容
  <h1> 与 </h1> 之间的文本被显示为标题
  <p> 与 </p> 之间的文本被显示为段落
HTML注释
这是一个H5标题。
HTML标签
  HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  HTML 标签是由尖括号包围的关键词,比如 <html>
  HTML 标签通常是成对出现的,比如 <\b> 和 </b>
  标签对中的第一个标签是开始标签,第二个标签是结束标签
  多数情况下,HTML文档中的标签可以互相嵌套,实现更复杂的功能
<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
  <title>标题</title>
  </head>
  <body>
    <h1>我的第一个标题。</h1>
    <p>我的第一个段落。</p>
  </body>
  </html>基本标签
标题标签:h1~h6
段落标签:p
块级标签:div
换行标签:br
图片标签:img
链接标签:a
无序列表:ul、li
<h1>
  这是一个最大的标题
</h1>
<p>
  每一个段落标签中的内容都会换行输出
</p>
  <div style="color: #FF0000">
<h1>
  div标签常用来组合一整块标签内容
</h1>
<p>
  以便通过CSS样式来对其中这些元素进行格式化控制
  比如当前div标签下的所有文本均为红色
</p>
</div>
  111
<br>
  222
<img src=‘xxx.img‘ alt="图片" />
src:用来指明当前图片路径
alt:
  1.光标位于图片时所显示的内容
  2.当图片加载失败时所显示的内容
  <a src="https://www.baidu.com">百度</a>
  href: 控制访问地址
  a:标签的文本元素为页面展示内容有序列表:ol、li
  连接外部文件
像img等类似的标签需要我们去访问一个外部文件,常用的方式有如下几种
引入外部图片:
  <img src="img/1.jpg" alt="图片" />
引入另外一个网页:  
  <a src="other.html">其他页面</a>
引入CSS样式文件:
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  rel: relationship的英文缩写,用于定义链接的文件和HTML文档之间的关系
  stylesheet: 样式表
  type: 外链文档的类型
  href: 外链文档的路径
引入js文件:
  <script type="text/javascript" src="js/jquery.js"></script>
src与href:
  src用于引入资源,引入的资源为页面必不可少的一部分,类似换内裤
<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
</ul>
ul:指明当前为无序列表
li:具体列表项使用这个标签
单个列表项可不加ul标签
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
ol:指明当前为有序列表
li:具体列表项使用这个标签
单个列表项可不加ul标签
  <img src="img/1.jpg" alt="图片" />
  <a src="other.html">其他页面</a>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  rel: relationship的英文缩写,用于定义链接的文件和HTML文档之间的关系
  stylesheet: 样式表
  type: 外链文档的类型
  href: 外链文档的路径
  <script type="text/javascript" src="js/jquery.js"></script>href只是引用资源,表示超文本引用,类似穿外套
相对路径:使用当前文件为起点定位资源
./:表示位于当前文件所在目录下
../:表示位于当前文件所处的上一层目录下
绝对路径:使用当前磁盘目录为起点定位资源
表格标签 table
表格标签由 table 标签进行定义
表格中的每一行由tr标签定义 table row
每一行有几个单元格由td标签定义 table data
表格的表头由th标签定义 table header
<table border="20">
  <caption>用户表</caption>
  <tr>
    <th>名字</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
   </tr>
</table>
border(属性): 定义表格边框,数字越大,边框越粗
caption(标签): 定义表格标题
<table width="400" border="1" cellpadding="10" cellspacing="3" frame="box">
  <tr>
    <th>名字</th>
    <td align="center" >张三</td>
    <td>李四</td>
  </tr>
  <tr>
    <th>年龄</th>
    <td>18</td>
    <td>20</td>
  </tr>
  <tr>
    <td colspan="3" align="center">合并单元格</td>
  </tr>
</table>表单标签 form
表单用于收集不同类型的用户输入,表单由不同类型的标签组成
单行文本输入框
单选框
复选框
上传文件
多行文本输入框
下拉表单元素:select
cellpadding: 规定单元格边缘和内容的空白
cellspacing: 增加单元格之间的距离
align: 设置单元格内容靠齐、left|right|center
frame: 控制围绕表格的边框
box 四面环山
above 上面
below 下面
hsides 上下两侧
vsides 左右两侧
colspan:合并列
rowspan:合并行
<label>姓名:</label><input type="text" name="username" value="张三" />
<label>密码:</label><input type="password" name="password" placeholder="请输入密码"
/>
text:单行文本框
password:密码输入框
value:定义表单元素的值
name:定义表单元素的名称,提交到后台时通过该值获取对应表单中的数据
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
在单选框中的name属性可以控制那几个表单为一组
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
<input type="file" name="picture">
<textarea name="about"></textarea><select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
option: 下拉框中的具体属性
value: 在表单提交时真正发送给服务器的值
按钮:
提交按钮:submit
点击时触发form标签中的action动作
重置按钮:reset
重置所属表单中所有表单框的所填数据
普通按钮:button
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">

相关推荐