
span  >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, initialscale=1.0">
        title>Documenttitle>
    head>
    body>
    body>
html>

：向浏览器声明当前的⽂档类型是 html

：是⽹⻚当中最⼤的标签，我们称之为根标签

：为⽹⻚的头部，它⾥⾯的内容主要⽤来定义⽹⻚标签及给浏览器查看的

⼀些信息

：
定义⽹⻚的编码为UTF-
8

：为⽹⻚标题标签，它⾥的内容会显示在浏览器的标签⻚上

：为⽹⻚主体标签，它⾥⾯的内容都会显示在浏览器的⽩⾊窗⼝区域

基本的HTML标签

1.HTML标题标签

HTML的文章标题标签，如：

分六个级别，效果一次减少，并且每个标题都是独占一行空间。

如：


h1>⼀号标题h1> 
h2>⼆号标题h2> 
h3>三号标题h3> 
h4>四号标题h4> 
h5>五号标题h5>
 h6>六号标题h6>

注意：没有标签；

2.换行与空格

2.1空格问题

；表示一个空格；

如：

hello world

2.2换行问题

表示换行；

如：


hello
br/>
world

扩展：对于HTML语言，没有严格的语义，即
与
或者
浏览器都可以识别出来。

html1.0~5.0 xhtml(严格) 五大浏览器联合更新自己的版本HTML5(不严格)

前端基本知识介绍

3.HTML段落

3.1段落标签介绍

HTML段落是通过

标签进行定义的。

如：


h2>今⽇学习内容：h2>
p>学了标题标签p>

作用：（1）虽然p标签的文字显示外观来看，和普通文字没有区别，但是它独占一行；

（2）标签语义化，便于定位；

3.2标签语义化

在合适的地方显示合理的标签，搜索引擎也偏好于标签语义化做的更好的页面。

4.字体加粗与倾斜及删除效果

4.1加粗标签

（1）为加粗标签；

（2）为加粗标签；

如：


普通⽂字
b>我是加粗⽂字1b> 
strong>我是加粗⽂字2strong>

区别：b标签为简单加粗；strong为加粗效果+特别强调效果；

4.2倾斜

（1）为倾斜标签；

（2）也可实现倾斜；

如：


普通⽂字 
i>我是ii> 
em>我是emem>

区别：em标签的语义更强一些。i为倾斜了，em为又倾斜了。

4.3删除

删除效果；

如：


原价:s>998s> 
现值:9.98
br> 
原价:del>999del> 
现价:9.98

注意：这两个标签没有任何语义区别，而w3c则说明s标签要被del标签替代；

5.图片标签

前端基本知识介绍

（1）src:表示资源,图⽚加载的名字

（2）width(宽),height(⾼):设置图⽚的⼤⼩。

（3）title:⿏标悬停在图⽚上的提示⽂字

（4）alt:

图⽚没有被正常加载时显示

⽹⻚阅读器读取此内容

如：

img src="Logo2.png" alt="加载中" width="500" height="500" title="⿏标悬停在图⽚上的提示⽂字">

6.超链接

6.1超链接使用

超链接：点击页面发生跳转；

使用标签为：

其中href为：跳转的网址；

如：

a href="https://www.baidu.com">点击我可以打开百度a>

target=”_blank”：在其它窗口打开新连接；

a href="https://www.baidu.com" target="_blank">点击我可以打开百度,并且打开新 的窗⼝a>

6.2空链接

空链接：在href中指定为#号即可；

作用：（1）暂时不知道点击之后跳转到哪里，使用空链接占位；

（2）刷新界面；

a href="#">a>

7.列表

列表标签可分为：无序列表和有序列表。

7.1无序列表

使用标签：

注意：

（1）ul标签可以嵌套若干个li标签；

（2）每一个li标签代表着每一条数据；

（3）每个li标签之间没有顺序；

如：


ul>
    li>pythonli>
    li>javali>
    li>goli>
ul>

7.2有序列表

使用标签：

注意：

（1）有序；

（2）且是ol开始的；

如：


ol>
    li>基础班级li>
    li>测试li>
    li>pythonli>
ol>

8.布局标签

8.1布局标签的介绍

布局标签没有任何的语义，也没有所谓的应用场景。

作用：划分页面区域，辅助页面布局；

布局标签为：

div标签：

大盒子，独占一行；

span标签：小盒子，一行可以放多个；


div>我是divdiv> 
div>我是divdiv> 
div>我是divdiv> 
div>我是divdiv> 
span>我是spanspan> 
span>我是spanspan> 
span>我是spanspan> 
span>我是spanspan>

9.表格标签

9.1表格标签介绍

作用：展示数据非常整齐；

基本语法：


table>
    tr>
        td>td>
    tr>
table>

（1）table标签：定义表格标签；

（2）tr标签：定义表格中的行；

th标签：表格单元格；

td标签：定义表格中的单元格，必须嵌套其中；

9.2表格标签的其他属性

（1）align：表格对齐方式。如：left，center，right；

（2）border：表格边框。如：1；

（3）cellpadding：单元边沿与其内容之间的空白，默认为1像素；

（4）cellspacing：单元格与单元格之间的空白，默认为2像素；

（5）width：设置表格宽度；

注意：需要写在table标签里；

9.3表格结构标签

表格结构标签：表格头部和表格主体两大部分；

（1）表格头部区域：

标签；

（2）表格主体区域：

标签；

作用：结构就更加清晰，让表格有更好的语义；

9.4合并单元格

（1）合并单元格方式

跨行合并：rowspan=”合并单元格的个数”；

跨列合并：colspan=”合并单元格的个数”；

（2）目标单元格

跨行：最上册单元格为目标单元格，写合并代码；

跨列：最左侧单元格为目标单元格，写合并代码；

（3）合并单元格步骤

1.先确定是跨行还是跨列合并；

2.找到目标单元格；

3.删除多余单元格；

10.表单标签

10.1表单标签介绍

表单标签我们可以直接称为 form 标签，标签书写如下：

（1）表单标签：

。form表单标签里面就是所有用户填写的表单数据；

（2）属性 action：把表单数据交给指定后台程序去处理；

（3）属性 method：传递数据时方式方法。

1.默认为post请求（隐式提交数据）；

2.get明文传送数据；

如：


form action="***.py" method="POST">
form>

10.2输入框与单选多选框

输入框标签（input标签）：

（1）type：属性指定输入框内容；

（2）type=”text”：则是最普通的文本输入框。为单行；

（3）type=”password”：则为密码输入框。为单行；

placeholder：给用户提示（提升用户体验感的属性），并且在为本域中都可以使用；

（4）type=”radio”：单选框；

（5）type=”checkbox”：为多选框；

如：


            span>用户名：span>
            input type="text" placeholder="请输入用户名">
            br>
            span>密码：span>   
            input type="password" placeholder="请输入密码">
            br>
            
            
            
            span>性别：span>
            input type="radio" name="gender">
            span>男span>
        
            input type="radio" name="gender">
            span>女span>
            br>
            
            span>兴趣爱好：span>
            
            
            input type="checkbox" id="sleep"> 
            label for="sleep">睡觉label>
            input type="checkbox" id="playgame"> 
            label for="playgame">打游戏label>
            input type="checkbox" id="liangnv"> 
            label for="liangnv">女label>
            input type="checkbox" id="yumaoqiu"> 
            label for="yumaoqiu">羽毛球label>
            br>

10.3下拉框

使用标签：select为下拉框的标签，嵌套若干个option标签。其中每一个option为下拉框中的一个选项。

selected=”selected”。表示默认选中状态；


select name="" id="">
    option value="">option>
select> 123

如：


select name="" id="">
    option value="">北京option>
    option value="">上海option>
    option value="">⼴州option>
    option value="" selected="selected">深圳option>
select> br>

10.4文本域

使用标签：

（1）cols：列；

（2）rows：行；


建议： 
textarea name="" id="" cols="30" rows="10">textarea> 
br>

10.5按钮标签

（1）普通按钮：

标签：input指定type=”button”；

通过value属性，指定按钮的文字；

如：


普通按钮： 
input type="button" value="按钮"> 
br>

（2）重置按钮：点击重置按钮就会将数据恢复到默认状态；

标签：input指定type=”reset”;

注意：重置按钮自动会有重置的文字；

如果指定为value属性，则显示什么；

如：


重置按钮：
input type="reset" value="重置按钮"> 
br>

（3）提交按钮：点击提交按钮可以让表单提交给指定后台处理；

标签：input指定type=”submit”;

注意：提交按钮自动会有提交的文字；

如：


提交按钮：
input type="submit" value="我是提交">

四.CSS基础选择器

CSS介绍

CSS样式表介绍

CSS：(Cascading Style Sheets)指层叠样式表(级联样式表、样式表)，CSS是⼀种标记语⾔。

CSS的作⽤：

●
设置HTML⻚⾯中⽂本内容

●
图⽚的外形

●
版⾯的布局和外观显示样式

CSS基础语法

CSS规则由两个主要部分组成：选择器以及一条或多条声明。

如：选择器{属性名
1
:属性值
1
;属性名
2
:属性值
2
}

需求：给以下的p标签的⽂本内容的颜⾊，设置为红⾊。


p>我是红⾊的pp> 
p>我是红⾊的pp> 
p>我是红⾊的pp> 
h4>我是h4h4> 
h4>我是h4h4> 
h4>我是h4h4> 
h4>我是h4h4>

实现：


head>
    style>
        p{
            color: red;
       }
    style>
head> body>
    p>我是红⾊的pp>
    p>我是红⾊的pp>
    p>我是红⾊的pp>
    h4>我是h4h4>
    h4>我是h4h4>
    h4>我是h4h4>
    h4>我是h4h4>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

{{userData.name}}已认证

前端基本知识介绍

一.前端三剑客

1.前导

2.三剑客的分工

二.VsCode的介绍与配置

1.vscode的介绍

2.vscode的下载安装

3.vscode的使用

3.1 图形界面操作

3.3 常用插件

三.HTML基础标签

HTML基础知识

1.HTML为何物？

2.标签介绍

3.HTML属性

4.HTML标签骨架

基本的HTML标签

1.HTML标题标签

2.换行与空格

3.HTML段落

4.字体加粗与倾斜及删除效果

5.图片标签

6.超链接

7.列表

8.布局标签

9.表格标签

10.表单标签

四.CSS基础选择器

CSS介绍

CSS样式表介绍

CSS基础语法

关于我们

更新日志

提交工单

认证服务

广告投放

账户条款

隐私政策

后台管理