前端基础学习- 校招VIP

文章声明：转载来源：https://blog.csdn.net/clover_oreo/article/details/121632374

第一部分：结构（HTML）

1、基本语法：

由尖括号包围的关键词，如<html>

html标签通常是成对出现的，称为双标签（开始标签、结束标签）

<head></head>
<body></body>

有些标签是单个的 <br/> 称为单标签

<br>
<img>

2、标签关系

包含关系和并列关系

包含关系

<html>
 <head>
    <title></title>
 <head>
  <body>
  </body>
</html>

3、<!DOCTYPE>

文档类型声明抱歉，作用就是告诉浏览器用哪一种html版本来显示（html4、html5、xml）

使用html5显示文件

必须写在第一行，不是html标签

<!DOCTYPE html>

4、lang="en"

语言种类

en-英语

zh-CN 中文

<!DOCTYPE html>
<html lang="en">

其实在文档中可以写中文或英文\

但是对浏览器和搜索引擎有用（翻译、搜索范围）

5、charset

字符集，用于计算机识别和存储文字

GB2312(简体中文)

BIG5(繁体中文)

GBK(包含简体和繁体，国标)

UTF-8（万国码）

为了防止乱码，一般使用UTF-8

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    
</head>

6、常用标签

标签是有语义的，方便学习

根据标签的语义，在合适的地方使用合适的标签，可以是网页结构清晰

标题标签：h1~h6(head)，依据重要性依次降低(从大到小)

段落标签：p

特点：会根据浏览器大小自动换行

段落之间会有一个较大的空隙

换行标签：<br/>（是个单标签）

文本格式化标签：

粗体、斜体、下划线等效果

加粗：<strong></strong>或<b></b>

倾斜：<em></em>或者<i></i>

删除线：<del></del>或<s></s>

下划线：<ins></ins>或<u></u>\

1、加粗效果

语法：<strong>需要加粗的文字</strong> 或者 <b></b>

特点：会加粗文本

不会独占一行

<strong>我是加粗的文本</strong>
    <b>我是b标签加粗的文本</b>

2、斜体效果

语法：<em></em>或者<i></i>

特点：会使文本倾斜

不会独占一行

我是没有倾斜的文本
<em>我是斜体文本</em>
<i>我是i标签斜体文本</i>

3、删除线

语法：<del></del>或者<s></s>

特点：会在文本中有一条删除线

不会独占一行

4、下划线

语法：<ins></ins>或者<u></u>

特点：会使文本有一条下划线

不会独占一行

我是没有下划线的文本
 <ins>我是有下滑线的文本</ins>
 <u>我是u标签的下划线文本</u>

7、div和span标签、没有语义

就是盒子、用于装内容

语法：<div></div>、<span></span>

特点：

1、没有语义

2、作用就是用来装其他的网页元素（盒子）

3、div标签可以理解为一个大盒子，会独占一行

4、span标签可以理解为一个小盒子，不会独占一行

8、图像标签和路径

属性：属于标签的特性

src是图像标签的必须属性，指定图像的路径和文件名，有一个必须要写的属性src 用于指明图片的地址属性都是键值对的形式：src="图片路径"

其他属性：

alt 替换文本（图片显示不出来的时候显示）

title 提示文本(鼠标放到图片上显示)

width:图像的宽度，单位像素px

height:图像的高度，单位像素px

border:图像边框的粗细，单位像素px

一个标签可能会有多个属性

这些属性都必须写在：

1、如果是成对的标签，写在开始标签内

2、如果是单标签，直接写在标签内

3、标签的属性必须与标签的关键字之间有一个空格

4、不同的属性之间，也必须有空格

5、键值对的键不可以有引号

6、值必须有引号

9、表格标签

主要作用：展示数据

基本语法：

<table>
    <tr>
        <td></td>
    </tr>
</table>

able表示表格

tr定义行

td定义单元格

表头单元格标签<th></th>(包裹在tr中)，文字会加粗居中显示

表格相关属性（后续通过css设置）：

1、align="center"

2、border="1"/""边框

3、cellpadding = "1" 单元格边和内容之间的距离

4、cellspacing="2"单元格与单元格之间的距离

5、width="100" height="500"表格的宽度和高度

10、表格结构化标签：

用于语义化表格

11、合并单元格

1、rowspan="合并的单元格数量"

2、colspan="合并的单元格数量"

完整代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <title>课程表</title>
</head>
 
<body>
    <h3 align="center">课程表</h3>
    <table border="2" align="center" cellpadding="10" cellspacing="5" style="border-color: blue">
        <tr>
            <th>项目</th>
            <th colspan="5">上课</th>
            <th colspan="2">休息</th>
        </tr>
        <tr align="center">
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr align="center">
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr align="center">
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr align="center">
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr align="center">
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td>英语</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>
 
 
</body>
 
</html>

13、无序列表

<ul>
    <li></li>
    <li></li>
</ul>

自带的样式可以使用css去除掉

14、有序列表

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

15、自定义列表

<dl>
    <dt>被描述的对象</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>

列表展示：

完整代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>我是网页标题2鸭~</title>
 
</head>
 
<body>
 
 
    <!-- 
    有序列表语法：
    <ol>
        <li>1</li>
    </ol>
特点：
1.成对出现的标签
2.ol标签和li标签组合使用
3.有序列表列表项前面有序号
    -->
    <ol>
        <li>老烟</li>
        <li>老席</li>
        <li>老瑞</li>
    </ol>
    <!-- 无序列表语法：
<ul>
    <li>1</li>
</ul>
特点：
1.成对出现的标签
2.ul标签和li标签组合使用
3.无序列表列表项前面无序号
-->
    <ul>
        <li>老烟</li>
        <li>老席</li>
        <li>老瑞</li>
    </ul>
    <!-- 自定义列表 语法：
    <dt></dt>是要解释的名词，最左端
    <dd></dd>是解释 -->
    <dl>
        <dt>苹果</dt>
        <dd>这是一种水果</dd>
        <dd>苹果是甜的</dd>
        <dt>香蕉</dt>
        <dd>这是一种水果</dd>
        <dd>香蕉是甜的</dd>
    </dl>
</body>
 
</html>

16、表单：填写信息，作用：收集用户的信息

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

表单域：form

action:表单提交到哪里(url地址，服务器)

method:提交的方式

name:表单的名称，用于区分表单域

1、关键字 input,单标签

2、必须写的属性type

type的值有：

1、text

这个表单标签应该输入一个文本

maxLength

2、button

表单标签是一个按钮

3、checkbox

复选框

有一个checked属性，作用是可以默认选中复选框

4、file

上传文件

5、hidden

隐形表单

6、image

上传图片

7、password

输入密码（隐藏输入的内容）

8、radio

单选框通常需要和js配合使用，实现单选的效果

有一个checked属性，作用是可以默认选中单选框

9、reset

重置清空当前form标签内的所有表单数据

可选属性：

1、value

text:设置文本的默认值

button:设置按钮的名称

2、placholder:设置文本的提示

3、form标签

action="是后台的地址"

method="提交数据的方式 post get"

name="user_register 表明表单的数据的意义"

4、下拉选项

<select name = "选项的意义">
 
        <option>1</option>
 
        <option>2</option>
 
        <option>3</option>
 
  </select>

selected：一般写在option标签上，表示默认选中某一个选项

label 作用：给表单设置一个贴一个标签

name属性：用于区分表单元素，一般写在select标签上

value属性：用于定义表单元素的值，一般写在option标签上，主要给后台人员使用

checked: 是否选中

maxLength:输入字符的最大长度

label标签

为表单标签设置标注

语法：

<input type="radio" id="sex" ><label for="male">男</label>

select标签

<select>
    <option selected="selected">1</option>
 
textarea
    cols="每行的字符数"
    rows="行数"
</select>

生成表单：

完整代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>我是网页标题3鸭~</title>
 
</head>
 
<body>
    <!-- 
   表单
   作用：收集用户信息
特点：
1.关键字，input，单标签  
2.必须写的属性有：
  type:这个表单标签应该输入一个文本
       max
  botton：表单标签是一个按钮
  chechbox:复选框
           有一个check  
  file:上传文件
  hidden:隐形表单
  image：上传图片
  password：输入密码（输入隐藏内容）
  radio：
  reset:
  submit:
  text:
    可选属性：
    value:
       text：设置文本默认值
       placehoder:设置文本提示
   
3.form标签
action="是后台的地址"
method="提交数据的方式 post get" 
name="user_register 表明表单的数据的意义"
    -->
    <form>
        你的兴趣爱好是什么？<br>
        <input type="checkbox" value="music">听音乐
        <input type="checkbox" value="movie">看电影
        <input type="checkbox" value="basketball">打篮球<br>
        <input type="file"><br>
        <input type="hidden" value="这是隐藏内容"><br>
        <!-- <input type="image" /> -->
        <input type="password" placeholder="请输入密码"><br> 您的性别是：
        <input type="radio">男<input type="radio">女<br>
        <input type="text" placeholder="请输入密码"><br>
        <input type="button" value="提交"><br>
        <input type="text" placeholder="请输入长度不超过8的内容">
        <br>
        <!-- <select name ="选项的意义">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
        name:一般写在select标签上value:一般写在option标签上
        selected:一般写在option标签上，表示默认
        label标签
        作用:给表单设置一个贴一个标签 -->
 
 
 
 
        你喜欢吃什么水果:
        <select name="fruit">
    <option value="1">芒果</option>
    <option value="1">橘子</option>
    <option value="1">苹果</option>
    <option value="1">香蕉</option>
</select> <br> 请选择心动角色:
        <select name="name">
    <option value="1">Alessio</option>
    <option value="1">Ombra</option>
    <option value="1">ruce</option>
    <option value="1">Raven</option>
    <option value="1">All in</option>
</select>
 
    </form>
 
     <!-- 表单
            作用：收集用户的信息
            1、关键字 input,单标签
            2、必须写的属性type
                type的值有：
                1、text
                    这个表单标签应该输入一个文本
                    maxLength
                2、button
                    表单标签是一个按钮
                3、checkbox
                    复选框
                    有一个checked属性，作用是可以默认选中复选框
                4、file
                    上传文件
                5、hidden
                    隐形表单
                6、image
                    上传图片
                7、password
                    输入密码（隐藏输入的内容）
                8、radio
                    单选框 通常需要和js配合使用，实现单选的效果
                    有一个checked属性，作用是可以默认选中单选框
                9、reset
                    重置 清空当前form标签内的所有表单数据
                可选属性：
                1、value
                    text:设置文本的默认值
                    button:设置按钮的名称
                2、placholder:设置文本的提示
            3、form标签
            action="是后台的地址"
            method="提交数据的方式 post get"
            name="user_register 表明表单的数据的意义"
            4、下拉选项
            <select name = "选项的意义">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
            name：一般写在select标签上
            value：一般写在option标签上
            selected：一般写在option标签上，表示默认选中某一个选项
            label 标签
            作用：给表单设置一个贴一个标签
-->
<form>
    <!-- <input type="text"  placeholder="请输入文本" value="这是一句话"/>
    <input type="button" value="提交"/> -->
    你的兴趣爱好是什么：<br/>
    <input type="checkbox" checked="checked" value="music"/>听音乐
    <input type="checkbox" value="movie"/>看电影 
    <input type="checkbox" value="basketball"/>打篮球
    <input type="file"/> 
    <input type="hidden" value="这是隐藏的信息"/>
    <!-- <input type="image"/> -->
    <input type="password" placeholder="请输入密码"/>
    您的性别是：<input type="radio"> 男 <input type="radio">女
    <input type="reset" value="重置"/>
    <input type="submit" value="提交"/>
    <input type="text" placeholder="请输入用户名，长度不得超过4位" maxlength="4">
 
    <br/>
    你喜欢吃什么水果：<br/>
    <select name="fruit">
        <option value="1">苹果</option>
        <option value="2" selected="selected">橘子</option>
        <option value="3">菠萝</option>
        <option value="4">香蕉</option>
    </select>
    <br/>
    <hr />
    <label for="self">请自我介绍:</label><input id="self" type="text" value="这是默认值" placeholder="请输入文本">
    <label for="awards">请罗列获得的奖项：</label><textarea id="awards" cols="1" rows="3"></textarea>
</form>
 
</body>
 
</html>