Web前端开发笔记
HTML部分
一、HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
二、开发工具
VSCode：
chinese
open in browser
三、常用HTML 标签
- html基本构成
版本声明
html标签
head标签
meta：指定字符集的
title：指定标题的
head中的内容不在网页上显示
body标签
-
标题标签：h1~h6
由h1到h6字体以此减小
占一行 -
段落标签：p
占一行 -
水平线：hr（单标签）
-
换行标签：br(单标签)
-
转义符： > <
-
格式化标签：b、sup、sub
-
图片标签：img
src：指定图片的位置
相对路径：隔壁老王
…/：上一层
绝对路径：老王收快递的地址
网络地址：也是一个绝对的地址
alt：图片出现错误时的提示文字
title：鼠标悬停时显示的文字
图片非独占一行，当图片在一行放不开时，才会到下一行显示
-
超链接：a
href：指定跳转的网页
相对路径：隔壁老王
绝对路径：老王收快递的地址
网络地址：也是一个绝对的地址
title：鼠标悬停时显示的文字
锚点的使用
不占一行
-
列表
有序列表：ol
列表项：li
无序列表：ul
列表项：li
自定义列表：dl
列表项：dh、dd
应用场景：
无序列表最常用，常用作导航栏
一个中心，几个基本点的情况使用自定义列表
注意事项：ol、ul、dl里面内容是固定，不要写其他标签
占一行
-
表格：table
表头：thead
表主体：tbody
表尾部：tfoot
行：tr
列：td、th（内容加粗、居中显示）
表格合并：
列合并：colspan
行合并：rowspan
注意：
1.表格是独占一行的（块元素）
2.table标签中只能写：thead tbody tfoot tr
3.thead、tbody、tbody标签中只能写：tr
4.tr标签中只能写：td th
5.td标签中可以写很多类型的东西
表格应用场景：展示大量有规律的数据
布局
-
表单相关的标签
（1）form标签
action:请求地址
method:请求的方式（get或者post）
get和post的区别
（2）表单元素
input
属性：name、value、placeholder、disabled
type:
text:文本输入框
password:密码输入框
radio:单选框，互斥条件是如何形成的
checkbox:复选框
hidden:隐藏框
file:文件框
select
option
selected
textarea
属性:cols、rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
form表单：
action：请求的地址
method：请求提交的方式，有get和post两种方式，默认是get方式
get：将参数拼接到URL中进行提交；
get请求提交参数的大小是有限制的，限制200K
post：将参数隐藏起来，放到Header中提交
常用的是post请求
-->
<form action="" method="post">
<!--
input：输入框
type：输入框类型
text是文本输入框
password是密码输入框
radio是单选框
disabled：
1.输入框不可用（禁用输入框）
2.不会提交该输入框的内容（输入框不能被提交）
placeholder：输入框中的提示性文字，只起到提示作用，并没有把值传到后台
value：输入框传入后台的值，value赋值时在初始显示时会覆盖placeholder
name：输入框传入后台值的标识，用于区别不同的输入框，在后台找用户名时，直接找username输入框即可
-->
<input type="text" disabled placeholder="请输入用户名" value="张三" name="username">
<br>
<input type="password" placeholder="请输入密码" name="password">
<br>
<!--
radio是单选框
注意：
1.radio是通过name属性来形成组的，即name相同的input组成了一个互斥的组合，只能选择其中的一个
2.radio传递到后台的值是value的值，不是显示出来的值
-->
<!--
label标签：
将选择框与后边的文字组合起来
当加上label时，点选后边的文字也可以选中，不加label时，点选文字无法选中
-->
<input type="radio" name="sex1" value="男" id="man"><label for="man">男子</label>
<input type="radio" name="sex" value="女">女子
<input type="radio" name="sex" value="保密">保密
<br>
<!--
复选框：checkbox
-->
<p>兴趣爱好：</p>
<input type="checkbox" id="study" value="study" name="hobbies"><label for="study">学习</label>
<input type="checkbox" id="game" value="game" name="hobbies"><label for="game">打游戏</label>
<input type="checkbox" id="read" value="read" name="hobbies"><label for="read">读书</label>
<br>
<!--
下拉选择框：select
默认选中的是第一项
option：下拉选择框的选项
指定选中使用selected
-->
<select name="area">
<option value="">请选择省份</option>
<option value="山东" selected>山东省</option>
<option value="山西">山西省</option>
<option value="河北">河北省</option>
</select>
<br>
<!--
文本域：textarea
cols：文本域的宽度
rows：文本域的高度
默认值：没有value值，直接写在标签中即可
-->
<textarea name="" id="" cols="30" rows="10">这里是默认值</textarea>
<br>
<!--
隐藏的输入框：hidden
可以用来提交一些不想让别人看见的东西
-->
<input type="hidden" name="hd" value="这是隐藏式输入框">
<br>
<!--
文件输入框：file
用于提交文件，照片等
-->
<input type="file" name="photo">
<br>
<!--
按钮：
提交/注册：submit
重置：reset
提交和重置form表单指的是：提交或者重置该按钮所在的form表单
-->
<input type="submit" value="提交按钮">
<input type="reset" value="重置">
</form>
<!--
总结：
表单：form标签
action：表单的请求地址
method：表单提交的类型，默认是get方式，常用是post方式
get和post方式的区别：
1.提交参数的方式不同，get是将参数拼接到URL中，post是将参数隐藏到header中
2.提交参数的大小不同，get只能提交200K左右，post无限制
表单元素：
input：
name：提交到后台的参数的标识
value：参数，提交到后台的值
placeholder：占位符，文本提示，输入框中的提示性文字
disabled：禁用输入框
type：
text：文本输入框
password：密码输入框
radio：单选框
单选框是通过相同的name来形成互斥的
checkbox：复选框
hidden：隐藏框
file：文件输入框
submit：按钮，提交表单
reset：按钮，重置表单
select：下拉选择框
option：下拉选项
1.默认选中的是第一个option
2.selected属性可以更改默认选中
textarea：文本域
cols：设置文本域的宽度
rows：设置文本域的高度
注意：文本域的值是放在两个标签中间的值，没有value值
表单元素都不是独占一行的
-->
</body>
</html>
4331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
