前端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属性的属性值是告诉服务器由那个表单提交过来的。