前端HTML
第一章 基础概念
第二章 HTML
html是超文本标记语言，是用于创建网页的标记性语言。
- html文档的后缀名有两种:
- .html
- .htm
- 语法规范
标签都是使用<>包裹，标签大部分都是成对出现的，标签由父子（包含）关系和兄弟（并列）关系组成。 - 开发工具
推荐使用vs code。- 快捷键
| 命令 | 功能 |
|---|---|
| Ctrl + N | 新建文件 |
| Ctrl + S | 保存 |
| Ctrl + 加号键 | 放大视图 |
| Ctrl + 减号键 | 缩小视图 |
| 输入英文！按下tab键 | 生成页面骨架 |
- HTML骨架结构
<!DOCTYPE html> <!--声明为HTML5文档-->
<html lang="en"> <!--完整的HTML页面（由<html>和</html>两部分组成）-->
<head> <!--头部元素（由<head>和</head>组成）-->
<meta charset="UTF-8"><!-- 定义网页编码格式为udf-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><!--描述了文档的标题-->>
</head>
<body><!--页面的可见部分（由<body>和</body>两部分构成）-->
<h1>hello world</h1>
</body>
</html>
第三章 常用标签
<!DOCTYPE html> <!--声明为HTML5文档-->
<html lang="en"> <!--完整的HTML页面（由<html>和</html>两部分组成）-->
<head> <!--头部元素（由<head>和</head>组成）-->
<meta charset="UTF-8"><!-- 定义网页编码格式为udf-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html练习</title><!--描述了文档的标题-->
</head>
<body><!--页面的可见部分（由<body>和</body>两部分构成）-->
<h1>hello world</h1><!--标题标签，双标签，从h1到h6数字越大标签越小，常用h1，一个HTML文件中只能出现一次-->
<p>hello world</p><!--段落标签，双标签-->
<strong>hello world</strong><!--强调标签，双标签，表示强调，对文本加粗-->
<em>hello world</em><!--强调标签，双标签，将文本转为斜体字-->
<del>hello world</del><!--双标签，删除文本-->
<ins>hello world</ins><!--双标签，插入文本-->
<img src="" alt="" title="" width="" height=""><!--图片标签，单标签，后面两个是图片属性，src属性：引入图片的地址，
alt属性：当图片无法正常显示时出现的提示文字,title属性：提示信息，
在图片上显示提示文字，width、height属性：控制图片的大小,导入文件的地址路径有两个：
相对路径 “.”在路径中表示当前路径，“..”在路径中表示上一级路径，
绝对路径：实实在在的路径，比如网页的地址，电脑中的文件路径-->
<a href="https://www.baidu.com/" target="_blank">hello world</a><!--跳转标签，双标签，给文字提供网页连接进行跳转，也可以在a标签中加一个图片，使图片也能进行网页跳转，
href属性：写连接的地址，target属性：改变连接打开的方式，当前页面打开（_self）默认就是，新建一个页面打开（_blank）-->
<base target="_blank"><!--base标签为页面上的所有连接规定默认地址或默认目标，浏览器中会使用标签中指定的url来解析所有的相对url,base其实就是定义一个默认的地址和默认的目标，
在head标签中添加这个代码，作用是使网页中的所有target标签的值都默认为_blank-->
<a href="#html">hello world</a>
<h2 id="html">hello world</h2><!--跳转锚点，在当前页面进行跳转到指定位置,可以使用#配对两种：一个是id，一个是name-->
<ul type=""><!--无序列表，ul和li必须同时存在，不能嵌套其他标签，li之间可以嵌套其他标签,type改变前面列表的样式，默认小圆点（一般使用CSS去控制）-->>
<li>特殊字符</li>
<li>含义</li>
<li>特殊字符代码</li>
</ul>
<ol><!--有序列表，和无序列表基本一样，用的很少，无序列表能代替有序列表-->
<li></li>
</ol>
<dl><!--定义列表-->
<dt>特殊符号</dt><!--定义专业术语或名词-->
<dd></dd><!--对名词进行解释和描述-->
<dt>含义</dt>
<dd>空格符</dd>
<dt>特殊字符代码</dt>
<dd> </dd>
</dl>
<ul><!--嵌套列表-->
<li>
基础信息
<ul>
<li>客户信息</li>
<li>供应商信息</li>
<li>员工信息</li>
<li>材料信息</li>
</ul>
</li>
<li>
采购管理
<ul>
<li>采购需求</li>
<li>采购合同</li>
<li>收货单</li>
<li>付款单</li>
<li>收票单</li>
<li>采购退货单</li>
<li>采购退款单</li>
</ul>
</li>
</ul>
<table border="1" cellpadding="30" cellspacing="30"><!--表格标签,border属性控制表格边框,cellpadding属性控制单元格内的空间，cellspacing属性控制单元格之间的空间
rowspan属性合并行，colspan属性合并列（left、center、right对应单元格中左中右的位置），align属性控制左右对象的方式（top、middle、bottom对应在单元格中上中下的位置），
valign属性控制上下对齐的方式-->
<caption>特殊字符表格</caption><!--定义表格标题-->
<tr><!--定义表格行-->
<th>特殊字符</th><!--定义表头-->
<th>含义</th>
<th>特殊字符代码</th>
</tr>
<tr>
<td></td><!--定义表格单元-->
<td>空格符</td>
<td> </td>
</tr>
<tr>
<td>©</td>
<td>版权</td>
<td>©</td>
</tr>
</table>
<form action=""><!--表单标签，双标签，表单的最外层容器-->
<input type="text"><!--单标签，标签用于搜索用户信息，根据不同的type属性值，展示不同的空间，如输入框、密码框、复选框等
type属性：text普通的文本输入框，password密码输入框，checkbox复选框，radio单选框，file上传文件，
submit提交按钮，reset重置按钮，action属性是提交按钮的地址，placeholder属性是显示输入框的提示信息
checked属性是默认勾选，disabled属性是使input支持的空间失效，多个单选框中加入同一个name属性并赋值同样的值可以进行配对使这几个单选框只能选一个-->
</form>
<textarea name="" id="" cols="30" rows="10"><!--双标签，多行文本框-->
</textarea>
<select name="" id=""><!--双标签，下拉菜单-->
<option value="">
</option>
</select>
<div><!--用来划分区块，dive元素在网页中是最常用的元素，和CSS可以实现网页的精致排版-->
</div>
<span><!--内联，文字修饰-->
</span>
</body>
</html>
第四章 表格
- 标签
| 标签 | 意义 |
|---|---|
| < table > </ table > | 表格 |
| < tr > </ tr > | 行 |
| < td > </ td > | 单元格 |
| < th > </ th> | 表头，加粗，加黑，自动居中 |
| < caption > </ caption > | 表格的标题，写在内部显示外部，居中 |
| < thead ></ thead > | 结构头 |
| < tbody > </ tbody > | 结构体 |
| < tfoot ></ tfoot> | 结构底 |
- 属性
| 属性 | 意义 |
|---|---|
| border | 表格的边框，默认0 |
| width | 宽度 |
| height | 高度 |
| cellspacing | 单元格与单元格之间的距离 |
| cellspadding | 单元格与内容之间的距离 |
| align:left/center/right | 设置文字的位置 |
| colspan | 列合并 |
| rowspan | 行合并 |
第五章 列表
| 标签 | 意义 |
|---|---|
| < ul >< li ></ li ></ ul > | 无序列表 |
| < ol >< li ></ li ></ ol > | 有序列表 |
| < dl >< dt ></ dt>< dd></ dd></ dl> | 自定义列表 |
第六章 表单
- input属性
| 属性值 | 意义 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checked | 复选框 |
| button | 普通按钮 |
| reset | 重置按钮，需要配合form表单才有用 |
| submit | 提交按钮 |
| image | 属性src |
| file | 文件按钮，上传图片 |
- name属性
- 发送后台
- name的标识，对于单选按钮，只能选择一个
- value属性
文本框默认显示的文字 - checked属性
默认选中，可以写一个属性，也可以属性名=属性值 - label用法
- < label >请输入 < input type=“text”> < input type=“text”></ label>
- < label for=“a”>请输入</ label>
< input type=“text” id=“a”>
- textarea标签
用户留言 - 下拉列表
<select>
<option>请选择</option>
<option >苹果</option>
<option selected>香蕉</option>
<option>橘子</option>
</select>
-
下拉列表的默认选中：selected
-
form表单
主要的作用是：收集用户的信息，发送到后台，action属性的属性值是提交后台的地址，method=“get/ppost”是提交后台的方式，name属性的属性值是告诉服务器由那个表单提交过来的。
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
