html和css
1，html基础
超文本标记语言（英语：HyperText Markup Language，简称：HTML）
1.1，html的作用
就是展示信息给用户的
使用标签来解释页面上的内容
浏览器的作用：
读取html文件，以页面的形式展示其内容，但是不会显示html标签
解析html标签，把标签内的内容按照标签的定义格式进行展示。
1.2，html的结构
<!--html注释 在源码中有但是在页面看不到-->
<!--
!声明 document type 文档类型是 html (html5的声明)
-->
<!DOCTYPE html>
<!--所有的html内容都要写在html表签内部-->
<html>
<!--html的头信息 标题还有一些关键词 热词 其他的配置-->
<head>
<!--meta html的配置信息
charset字符编码表/字符编码集:
ASCll gbk gb2312 utf-8 iso8859-1
-->
<meta charset="utf-8">
<title>首页</title>
</head>
<!--我们html代码显示的内容实在body中进行显示-->
<body>
123456
</body>
</html>
1.3，html的开发软件介绍
-
webstrom (idea 是一家公司收费的)
-
Hbuilder（国产的前端开发工具）
-
vscode(重点推荐)现在开发的神器
-
SublimeText3（上一代号称前端神器）
-
notpad++（记事本编辑工具）
建议使用vscode，相关插件下载：
-
Chinese (Simplified) Language Pack for Visual Studio Code 中文简体支持
-
vscode-icons
-
HTML CSS Support
-
auto close tag 标签自动关闭
-
beautifuy
-
Bracket Pair Colorizer 括号带颜色
-
project manager
-
open in browser(浏览器打开的插件)
2，html标签
2.1，基本标签
- font
- img
- p
- a
- br
- hr
- h1-h6
- table
- strong
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎页</title>
</head>
<body>
<!-- 文字标签
font 然后回车 或者按tab键都可以快速生成对应的标签 标签现在过时了
-->
<font size="7" color="red" face="楷体">Welcome to html index page!</font>
<!-- 图片标签source 资源的路径
绝对路径: 找到文件具体在盘符的位置
相对路径:根据当前文件所在路径去寻找
dos命令:
width 宽
height 高
px 像素单位 1px 是多大?
传统的像素:像素一般指的是屏幕的分辨率分之一
自适应 响应式开发中像素单位就不是固定的了。
title: 标题 鼠标悬停0.5s 出现
alt: 图片记载失败的时候的提示信息
-->
<!-- 换行 -->
<br>
<img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img>
<img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img>
<img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img>
<img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img>
<br>
<!--超链接 :
href 要连接到的资源路径
target: 目标资源打开的方式
_parent 在父级窗口打开
_self 在自身的页面打开 会覆盖度原有的页面
_blank 打开新的页面显示连接的内容
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<br>
<!-- 标题
h1-h6 层级越越大文字越小
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
<!-- 分割线
size 设置高度:
width设置宽度: 像素 百分比
color设置颜色:
-->
<hr>
<hr size="5" width="500px" color="red" >
<hr size="5" width="40%" color="green" >
<!-- 段落标签
段落之间是有间隙的
strong加粗处理
css 文本样式进行文字的缩进
-->
<p style="text-indent: 24px;"><strong>你好</strong>
这是第一个段落
</p>
<p>这是第二个段落
</p>
<!-- 表格
table:
thead 表头 文字是默认加粗 居中显示的
tr 表行
td 代表列
cellspacing 取消单元格之间的间隙
border 值是1 边框显示 值是0边框隐藏
跨行合并:rowspan
跨列合并:colspan
-->
<table border="1" width="600px" height="400px" cellspacing="0">
<thead>
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
<tr>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
<tr>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
</tbody>
</table>
</body>
</html>
2.2，表单控件
- text 文本输入
- password 密码输入
- checkbox 多选框
- radio 单选框
- date 日期
- email 邮箱
- color 颜色
- submit 提交按钮
- button 按钮
- file 表单上传
- hidden 表单隐藏的元素
- reset 重置 表单已经输入的元素内容清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<!-- form: 表单
action: 表单提交的路径
method: 表单提交方式
get: 不安全的提交方式 提交的参数会在地址栏显示出来
post:安全的提交方式 数据不会在地址栏进行显示
表单的控件:
label 元素 点击label中的文字光标会自动聚焦到我们的文本框中
id 是唯一的值 不能重复
占位符:
四分之一字符 圆角和半角不一样
  二分之一字符 浏览器都兼容的
-->
<form action="" method="POST">
<!-- for的值是 input元素的id值 -->
<label for="username">用户名:</label>
<input type="text" name="username" id=
最低0.47元/天 解锁文章
1855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
