其他分享
首页 > 其他分享> > 学习小笔记（跟b站黑马）

学习小笔记（跟b站黑马）

作者：互联网

目录

写在前面的小日记

IDE按键

H5与CSS3

前端三剑客

VScode

Html标签

        标题：

        段落：

        换行：

        盒子标签：

        图像标签：

        超链接标签：

        注释：

        特殊字符：

        表格：

       列表：

        表单：

        查阅文档

写在前面的小日记

        考研失败了，才来学东西求职，投了好多家，只有一家在牛客上投的有hr打电话问了一下给放在了公司内的内推上了，剩下了有几家甚至没有给发邮件说收到了简历，祝自己成功。

        报名了字节跳动的前端训练营，它的代码题要c，c++，js或python写，过段时间继续复健。

IDE按键

1.生成main()方法：psvm+回车 //也可以main+回车

2.生成输出语句：sout+回车 //无效

3.内容提示，代码补全：Ctrl+Alt+space

4.单行注释：选中代码，Ctrl+/，再一次取消

5.多行注释：选中代码，Ctrl+Shift+/，再一次取消

6.自动格式：Ctrl+Alt+L（vscode是Shift+Alt+F）

H5与CSS3

前端三剑客

结构：Html

表现：CSS

行为：JavaScript

VScode

        创建 -> 存html -> !+回车创建骨架

        右键直接在浏览器打开

        <!DOCTYPE html>：文档类型声明标签

        <html lang="en">：定义文档显示语言，即网页语言：英语en；中文zh-CN。对浏览器有作用，对其的自动翻译功能的触发生效。

        <meta charset="UTF-8">：字符集，编码方式。UTF-8：万国码。

Html标签

        标题：

        <h1>-<h6>：<h1> 一级标题 </h1>

        段落：

        <p> 段落 </p>

        换行：

        <br />（注意中间的换行）

        文本格式化标签：

加粗<strong> </strong><b> </b>
倾斜<em> </em><i> </i>
删除线<del> </del><s> </s>
下划线<ins> </ins><u> </u>

        盒子标签：

        <div>标签（分割，分区），<span>标签（跨度，跨距）：无语义空盒子

                <div>：一个独占一行，一行一个

                <span>：横向显示，一行可以放多个

        图像标签：

        <img>：<img src="图像url"/>

src图片路径必须属性
alt文本

替换文本

title文本提示文本
width像素图像宽度
height像素图像高度
border像素图像的边框粗细

        相对路径：

同一级
下一级/
上一级../

        绝对路径：用\取得本地地址，也可以使用网络地址。

        超链接标签：

        <a>：<a href="跳转目标" target="目标窗口的弹出方式" /> 文本或图像 </a>

                target：_self：默认值，在当前窗口中打开；_blank：在新窗口中打开方式。

                链接分类：1.外部链接，2.内部链接，3.空连接：#，4.下载链接，5.网页元素链接（对各种元素添加链接），6.锚点链接

<a href="#life"> life </a>
<!-- #号用于寻找id -->
<h3 id="life"> life </h3>

        注释：

        <！--啊吧啊吧 -->（快捷键Ctril+/）

        特殊字符：

空格&nbsp
小于&lt
大于&gt
等于&amp
人民币&yen

版权（圈c）

&copy
注册商标（圈r）&reg
摄氏度&deg
正负号&plusmn
乘号&times
除号&divide
平方2&sup2
平方3&sup3

        表格：

<table>    <!--表格-->
    <tr>
        <th>表头单元格</th>    <!--表头单元格，加粗，居中-->
    </tr>
    <tr>    <!--行-->
        <td>单元格内容</td>    <!--单元格-->
        ...
    </tr>
    ...
<table>
<!--or-->
<table>    <!--表格-->
    <thead>    
        <tr>
            <th>表头单元格</th>    <!--表头单元格，加粗，居中-->
        </tr>
    </thead>
    <tbody>
        <tr>    <!--行-->
            <td>单元格内容</td>    <!--单元格-->
            ...
        </tr>
        ...
    </tbody>
<table>
属性名属性值描述
alignleft，center，right表格相对周围元素的对齐方式
boeder1或""表格单元是否拥有边框，默认无
cellpadding像素单元格边沿与其内容之间的空白，默认1
cellspacing像素单元格之间的空白，默认2
width/height像素值或百分比表格宽度/高度

        合并单元格：

                跨行合并：rowspan="合并单元格格数"

                跨列合并：colspan="合并单元格格数"

                目标单元格：跨行合并->最上单元格；跨列合并->最左单元格

                步骤：选择格式->找到目标单元格，写合并代码->删除多余单元格

       列表：

       无序列表：

<ul>
    <li>表项</li>
    <li>表项</li>
    ...
</ul>

        有序列表：

<ol>
    <li>表项</li>
    <li>表项</li>
    ...
</ol>

        自定义列表： 

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

        表单：

         （表单域，表单控件，提示信息）<form>

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
    <input type="属性值" />
</form>

        1.input输入表单元素

                类型：

button可点击按钮（结合js使用 ）
checkbox复选框
file输入字段和“浏览”按钮，供文件上传
hidden隐藏的输入字段
image图像形式的提交按钮
password密码
radio单选按钮
reset重置按钮
submit提交按钮
text文本框

                 属性：（name和value主要给后台用，name用于单选项与复选框，checker给单选和复选用）

type类型
name由用户自定义input元素名称
value由用户自定义input元素值
id挂载<label>
checkedchecked此input元素首次加载时应当被选中（checked="checked"）
maxlength正整数输入字段的字符最大长度

         <label>标签：绑定一个表单元素，点击<label>标签内的文本时，浏览器自动将焦点转到原则对应的表单元素上。

<label for="sex_man"> man </label>    <!--for内值对应id值-->
<input type="radio" name="sex" id="sex_man" />

        2.select下拉表单元素

        <select>中至少包含一对<option>，<option>可以定义selected="selected"。

<select>
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
    ...
</select>

        3.textarea文本域表单元素

        clos：每行中的字符数；rows：显示的行数。

        查阅文档

        W3C：http://www.w3school.com.cn

        MDN：http://developer.mozilla.org/zh-CN/

标签：...,元素,标签,单元格,笔记,表单,学习,像素,黑马
来源： https://blog.csdn.net/silent_M01/article/details/122379627