web自学日记（一）

web自学日记（一）

！！根据自我情况转自b站up黑马前端！！

1.一些基本概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k72EqBKg-1650899726316)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220424193341417.png)]文件类型声明标签，html版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RAr7WHx8-1650899726318)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220424193648698.png)]lang 语言种类 en 代表英文网站

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bf2KGFtg-1650899726319)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220424193702532.png)]字符集，一般用UTF-8（万国码)，基本包含世界所有语言的常用字

1.1 vsc常用插件配置

Auto Rename Tag 自动生成配对标签

Open in browser 右键可以在浏览器打开网页

tips ： !生成框架

1.2常用标签

1.标题标签 h1-h6

<h1> hello world </h1>

2.段落与换行标签

<p> 段落标签欸 </p> <!--将文字分成不同段落-->

</br> 			  <!-- 强制换行  单标签-->

3。文本格式化标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qc3a7olb-1650899726320)(file:///C:\Users\DELL\Documents\Tencent Files\780073178\Image\C2C\1C997C357E3E62616DE667FA073625D1.jpg)]

4.图像标签

`<img scr = "" alt = "" title = "">` 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJrMxVyC-1650899726320)(file:///C:\Users\DELL\Documents\Tencent Files\780073178\Image\C2C\CBD32F1495005E3A51F6F090E6EA87B2.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FexZR2Oi-1650899726322)(D:\桌面移动\QQ图片20220425204204.png)]

5.超链接标签!!

<a href = "跳转目标" target = "弹出方式 _self或者_blank">    可嵌套文本或图像 </a>

6.快速注释 CTRL + /

7.常用特殊字符

" ": %nbsp

“>”: %lt

“<” %gt

8.!! 锚点连接 （跳转到本页面相应位置）

<a href = "#two"> </a>

<h3 id = "two"></h3>

9.表格标签

<table border = "填入1或者无" cellpadding = "0"//设置文字与表格边界内容  cellspacing = "0" //去除表格间的线 width = "" height = "">
    <tr> <!-- 控制行 -->
        <thead>
        </thead> //头部
        <tbody> // 身体
        </tbody>
        <tfoot> // 尾部
        </tfoot>
        <td> 单元格里的文字</td> <!-- 行内内容-->
        <th></th> // 文字加粗 居中显示
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCPMrLDj-1650899726323)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220425212741975.png)]

9.1 合并单元格

跨行合并（上下） rowspan = "单元格个数"(从目标最上面开始写)

跨列合并(左右) colspan = "合并单元格个数"（从目标最左侧开始写）

！！ 然后删去多余单元格 ！！

10.列表标签

1.无序列表

<ul> ul只能套li
    <li>列表内容1</li>
    <li>...2</li>
    <li>...3</li>
    <li> //li里面可以套其他标签
        <p>
        
        </p>
    </li>
    
</ul>

2.有序列表(自动给选项排序1,2,3…)

<ol>
    <li></li>
    <li></li>
    <li></li>
    
</ol>

3.自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

11.表单标签

表单由表单域，表单控件（表单元素），提示信息三个部分组成

目的：收集数据，将数据送往后台

11.1表单域

<form> 将表单内数据元素送往后台

<form action = "demo.php" method = "POST/get" name = "表单域名字">
     
</form>

11.2表单元素（控件）

1.input 输入内容

<input type = "属性值" /name = "标签名字" value= "表单内显示名字">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWjjNnPc-1650899726324)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220425222038891.png)]

<form>
    用户名： <input type = "text"> <br>
    密码: <input type = "password"> <br> //输入的字符被替换为黑点
    性别： 男<input type = "radio"> 女<input type = "radio"> // 选择按钮 黑点 可以多选！ <br>
    性别： 男 <input type = "checkbox">女<input type = "checkbox"> //勾选框 可以多选！ <br>
    
    !!!!单选 type = radio 通过name 为input 标签取相同名字实现！！
    
    
    
    <input type = "submit" value = "提交按钮上面显示的文字 例如“注册”">
    <input type = "reset" value = "重置"> // 重置
    
    <input type = "button" value = "例子：获取短信验证码"> //结合js使用
    上传文件 : <input type = "file" >
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0VZBB1Ei-1650899726324)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220425223948401.png)]

<form>
	男<input type = "radio" checked = "checked"> //    进入页面默认被选上
    <input type = "" maxlength = 最多字符数> 
   
</form>

label标签

label标签用于绑定一个表单元素，点击label内文件时，光标自动转到对应的输入框

语法： input id = “name”

<lable for = "txt"> 用户名： </lable> <input type = "text" id = "txt"> // 即点击“用户名”就可以进行输入

2.select下拉列表！！

​ 用处很广，多个选择选择使用

<form>
    学校
    <select>
    <option>选项一 </option>
    <option>选项二</option>
    
</select>
</form>

tips: select 中至少包含一个option

select = “selected” 默认选项

3.textarea文本域元素

用处：输入内容较多时使用

<form>
    留言：
    <textarea cols = "50" rows = "5"> // 定义最多能书写几行几列
        
    </textarea>
</form>

```

tips: select 中至少包含一个option

select = “selected” 默认选项

3.textarea文本域元素

用处：输入内容较多时使用

<form>
    留言：
    <textarea cols = "50" rows = "5"> // 定义最多能书写几行几列
        
    </textarea>
</form>