前端

用户2225338187750
119 阅读5分钟

HTML知识归统

基本框架

  • jichu.png
  • 文档类型标签<!DOCTYPE>
  • DOCTYPE是Document Type的简写，含义为文档类型。HTML文档，告诉浏览器以什么标准来解析代码
  • 根标签<html>
  • 所有的HTML文档都是以<html>标签开始,以</html>结束
  • lang属性 指定网页语言 en 英文 zh-CN表示中文
  • 首部标签<head>
  • html文档首部以<head>开始，以</head>标签结束。<head>标签中的内容不会显示在网页的页面中
  • utf-8
  • 允许你处理处理事实上存在于地球上的任何语言文字, 而且提供了一个全面的数学与技术符号集, 因此可以简化科学信息交换.
  • 网页标题标签<title>
  • html文档使用<title>和<title>标签标记网页标题，该标题会显示在浏览器窗口的标题栏中
  • toubu.png
  • style
  • 可以实现在html中书写css样式
  • 元数据标签<meta>
  • <meta>标签用于提供当前HTM文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。通常可以用于定义网页的字符集，关键词，描述，作者信息等
  • 主体标签<body>
  • HTML文档的主体部分以<body>标签开始，以</body>标签结束。<body>标签中的内容全部显示在网页的页面中。<body>标签中可直接添加文本内容，也可继续嵌套其它标签，形成多元化的显示效果

块标签 行标签 行内块标签

  • 块状标签
  • 俗称男标签
  • 对应单词 block
  • 独行显示
  • 可以设置宽高
<p>我是一个p标签</p>
<h1>我是一个h1标签</h1>
...
<h6>我是一个h6标签</h6>
<hr>  hr 是下划线标签
<div>我是一个div</div>
<dl>我是一个dl标签，也是自定义列表</dl>
<dt>我是一个dt标签，在dl标签中使用，网页显示效果为标题</dt>
<dd>我是dd标签，在dl标签中使用，网页显示为文本主体</dd>
<table>我是一个table标签，也是一个表格标签</table>
<tr>我是一个tr标签，在table标签中使用，是表格行的意思
<th>我是一个th标签，在table标签中使用，在tr里面嵌套，是加粗居中的单元格</th>
<td>我是一个td标签，在table标签中使用，在tr里面嵌套，是普普通通的单元格</td>
  • 行内标签
  • 俗称女标签
  • 对应单词 inline
  • 并排显示
  • 不可以设置宽高
<a>我是一个a标签，也是一个超链接标签</a>
<span>我是一个span标签</span>
<strong>我是用来加粗文字的</strong>
<em>我是一个em标签，可以让文本变成斜体</em>
  • 行内块标签
  • 俗称人妖标签
  • 对应单词 inline-block
  • 并排显示
  • 可以设置宽高
<img src="插入图片链接" alt="当图片显示不出来时显示此文本">
<input type="表单项类型">
<textarea>我是一个textarea标签，也是文本框标签</textarea>
<select>我是一个select标签，也是下拉框标签，通常和<option>标签一起使用</select>
<option>我是一个option标签，通常嵌套在select标签里面，是下拉框属性值</option>

杂项

  • target_self(默认会覆盖)
  • target_blank（会打开新的窗口）

列表

  • 无序列表
  • ul是无序列表 li是列表项
  • 无序列表不是一个列表，是一组列表
  • ul中只能放li元素 li元素中可以放任何东西
  • ul中有一个用来修改的type元素
  • type值包含： 1.circle 将实心圆变成空心圆
    2.square将实心圆变成方块
    3.disc实心圆 默认是实心圆
  • 有序列表 -ol是有序列表 li是列表项
  • 有序列表是一组列表
  • ol中只能放li元素 li元素中可以放任何东西
  • ol中有一个用来修改的type元素
  • type值包含 a A i I
  • 自定义列表
  • dl 是自定义列表 dt dd是列表项
  • dt表示标题 dd表示内容
  • dt dd可以包含任何东西

表格和样式

表格

  • table 是表格
  • tr 是表格行一个tr就代表一行，通常嵌套在table中
  • th 是表头 文字加粗居中的表格单元，通常嵌套在tr中
  • td 是没有任何样式的表格单元，通常嵌套在tr中
  • biaoge.png

样式

  • caption 表格的标题，写在内部 显示外部 居中
  • border="1"给表格边框增加线条
  • align="senter" 居中
  • align="left" 居左
  • align="right" 居右
  • cellpadding="5px" 内容与边框之间的距离
  • cellspacing="5" 单元格之间的距离
  • width="800px" 设置表格的宽 如果只设置了宽或者高，那么表格将等比缩放，如果不设宽高，表格会根据内容自适应
  • height 用来设置高度
  • 未改
  • 加样式 - -

合并表格单元

  • 在要合并的单元格前面的th或者td中加样式，留下第一个删除后面的，在rowspan或者colspan后面加入合并的单元格的数字
  • rowspan 合并行 竖向合并
  • colspan 合并列 横向合并
  • 合并行
  • row.png
  • roww.png
  • 合并列
  • col.png
  • coll.png

表单

认识表单

  • 表单就是用来收集用户数据 把数据扔给服务器
  • 表单也是一个标签 叫form
  • 只有表单是不行的，里面要有表单项

表单结构

  • biaodan.png
  • form 就是表单
  • action 是指收集的数据提交给那个服务器 ""里面填写服务器的地址
  • method="get/post" 提交后台的方式
  • name="a" 告诉服务器是由哪个表单提交过来的
  • input 就是表单项 通常嵌套在form中使用
  • type用来指定input表单项的类型 text就是文本

form中的属性

input 中的类型

  • input中的属性就是type=""中的类型
  • 用button 或者 input包裹住使用
  • text 文本框
  • button 普通按钮
  • reset 重置按钮
  • submit 提交按钮
  • password 密码框
  • radio 单选按钮
  • checkbox 复选框
  • image属性 src 图片 插入在button或者password中就是图片按钮
  • file 文件按钮 上传图片

name属性

  • 发送后台
  • name的标识对于单选按钮 只能选择一个

label属性

<label for="a">请输入</label>
    <input type="text" id="">
  • 点击 请输入 后面的文本框也能焦点

文本域

  • textarea：文本域内文字
  • resize：none; css样式，让文本域不可拖拽
  • resize: horizontal; css样式，让文本域可以在水平方向拖拽
  • resize: vertical; css样式，让文本域可以在垂直方向拖拽
  • cols 文本域的宽度
  • rows 文本域的行数
<textarea name="" id="" cols="30" rows="10">
10行 30字宽
</textarea>

下拉列表

  • select 是下拉框
  • option 是下拉选择项，通常嵌套在select中使用
  • selected 下拉框默认选中

css知识归统

avatar
文章
阅读
粉丝