html基础总结，前端入门必学！

作者: 图恩分类: 编程开发阅读: 521发布时间： 2020-04-14 00:57:03
HTML(页面架构) 一.什么是HTML HTML是一种超文本标记语言 超文本:文本,图片,音频,视频,超链接等 标记:符号,标签 标记是没有逻辑的 组成: 指令 转义字符 标签 目的:完成页面的搭建 HTML页面大致的组成部分 :必须出现在页面的最上方，规定该文档采用的html版本类型 :页面标签：包含所有页面内容，只有head与body两个子标签 :头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标,主放功能 :体标签：页面显示内容存放区域、样式、脚本,主放内容 简单的一个htm5搭建: Title 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 二.指令 注释:``,还有一种不常用的注释写法 文档类型: 三.转义字符 语法:&内容; 常用的转义字符 <: < >: > 空格：  版权：© 四.标签 1.标题标签 ​ h1~h6:里面内容相对于普通的内容会加粗,且会自动换行 2.段落标签 ​ p:自带换行，有段落间距 3.文本类型标签 ​ 共同点都不带换行 ​ 常用的文本类型标签 b与strong:内容加粗 i与em:内容斜体 sup:上角标 sub:下角标 span:没有什么意义,但是会用来嵌套其他文本表示共同使用 4.超链接标签 a标签 例如如下一句 页面中显示的文本内容 href:里面选择超链接地址,注意如果没加http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接 targe: _self:在原本的窗口打开 _blank:创建一个新窗口打开 _top:覆盖上一条记录 _parent:覆盖所有的记录 且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色 5.图片标签 二哈 title:鼠标停留会显示,也可以用于其他标签当属性 alt:src中的 url响应失败显示的内容 src:图片的url 6.列表标签 ​ ul>li:无序标签 ​ ol>li:有序标签 特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数 显示结果:
  • 第1列
  • 第2列
  • 第3列
  • 第4列
  • 第5列
ul>li{第$$列}*5 显示结果
  • 第01列
  • 第02列
  • 第03列
  • 第04列
  • 第05列
7.表格标签 table>tr>th|td tr:行 th:标题单元格 td:普通单元格 属性 border:边框像素 cellspacing:单元格的间距,最小为0 cellpadding:单元格的内边距 rules:all处理成一条直线,但是不能与cellspacing一起用会冲突 colspan:th与td的属性表示占几列默认为1 rowspan:th与td的属性表示占几行默认为1 案例 专门建立的学习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则没法给到后端 案例介绍 表单标签

男 女

男 女 哇塞

3.input标签type属性 type属性 空间名称 对应代码 text 单行文本输入框 password 密码输入框 checkbox 复选框 radio 单选框 submit 提交按钮 reset 重置按钮 button 普通按钮 hidden 隐藏按钮 file 文本选择框 4.select标签(下拉列表) 5.select属性 multiple : 布尔属性，设置后允许多选，否则只能选择一个 disabled : 禁用该下拉列表 selected : 首次显示时,为选中状态 value : 定义发往服务器的选项值 6.textarea标签 7.textarea属性 属性 属性值 说明 name name 控件名称 rows number 设置多行文本框的显示行数（高度） cols number 设置多行文本框的显示列数（宽度） disabled disabled 布尔属性，设置当前文本框为禁用状态 8.label标签 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 9.label属性 label元素不会向用户呈现任何特殊效果
标题1 标题2 标题3
1 2
5 6
7 8 9