HTML

CqDemo

demo1.html




    
    Title


下午好，今天我们开始学习 HTML


下午好，今天我们开始学习HTML

下午好，今天我们开始学习HTML

运行效果：

基本标签

标签：加粗文字

标签: 控制文字大小，和颜色，字体

< hr> 标签：下划线

标签：字体倾斜

标签：字体下划线

Title

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

运行效果：

< p>段落标签 align段落对其方式

标题标签

Title

标题标签H1

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签H6

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签h2

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

运行效果：

< h>标签：标题标签

图片标签< img >

Title

标题标签H1

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签H6

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签h2

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

运行效果：

< img >标签: 图片标签 border加边框

超链接标签：

Title 超链接

标题标签H1

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签H6

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签h2

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

运行效果：

跳转到：

超媒体链接标签

Title

超链接

标题标签H1

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签H6

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签h2

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

运行效果如下：

< embed>标签：超媒体链接标签可以导入视频音乐类

网页音乐播放的标签

< bgsound>

Title 唯一

超链接

标题标签H1

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签H6

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

标题标签h2

下午好，今天我们开始学习 HTML

下午好，今天我们开始学习HTML
下午好，今天我们开始学习HTML

运行效果：

注意：这时候一进这网页就听到了《唯一》这一首歌

< bgsound >音乐背景标签

表格

CqDemoHtml

https://blog.csdn.net/qq_52600282/article/details/demo2.html

简单的表格

运行效果如下：

一行三列

属性：

cellpadding : 内容距离单元格内边距的距离如果距离太小有一端达不到那么这个距离就会失效

cellspacing : 单元格之间的距离

align : 单元格对其的方式

剧中效果

属性：

< tr align=“center” bgcolor=“#6495ed”> 这一行内容居中颜色为#6495ed

< td background=“img/kebi.jpg”>3 单元格插入背景

< td align=“right” >c 单元格内容靠右对其

< td bgcolor=“#dc143c”>b 单元格背景颜色

单元格合并问题

运行效果：

注意：

属性colspan：合并横两个单元格时候需要把它前一个或者后一个单元格删除才可以合拼

属性rowspan=“2” ：合并同一列下的两个单元格时候需要删除它上一个或者下一个单元格即

列表

demo2.2html

无序链表




    
    Title



    芒果
    苹果
    西瓜
    梨子
    香蕉
    橘子

运行效果：

点点开头无序列表

有序列表




    
    Title



    芒果
    苹果
    西瓜
    梨子
    香蕉
    橘子


    芒果
    苹果
    西瓜
    梨子
    香蕉
    橘子

运行效果：

1 2 3排序就是有序列表

注意：排序的变化属性

type

滚动

demo2.3.html

< marquee>




    
    Title



    你好！欢迎来到学习不快乐天堂！！

运行效果：

属性：

direction : 滚动方向

behavior : 滚动方式

loop : 滚动次数

层

demo2.4.html

表单




    
    Title



    
    

    
    

    
    男
    女
    

    
    爱好：
    学Python
    学Linux
    学Mysql
    学Java
    

    
    
    
    
    
    

    
    请仔细阅读，下面的条款需求承诺书！
    


    
    姓名 :
    


     
        爱好
        学Python

        学Linux

        学Mysql

        学Java

表单元素

1.文本框 : < input type=“text”>

2.密码框 : < input type=“password”>

3.单选框 : < input type=“radio”>

4.复选框 : < input type=“checkbox”>

5.提交框 : < input type=“submit”>

6.重置按钮 : < input type=“reset”>

7.普通按钮 : < input type=“button”>

8.文本域标签 : < textarea>

框架

横向分割网页

< frameset>

demo3.2.html




    
    Title

demo3.2_1.html




    
    Title

demo3.2_2.html




    
    Title

运行demo3.2.html效果如下：

横向分割

< frameset rows=“”>




    
    Title

运行效果如下：

横向纵向分割网页

创建demo3.2_3.html




    
    Title

为了使用右边的页面里实现超链接跳转到顶部页面就修改demo3.2_2.html




    
    Title


https://blog.csdn.net/qq_52600282/article/details/demo1.1.html
https://blog.csdn.net/qq_52600282/article/details/demo2.2.html
https://blog.csdn.net/qq_52600282/article/details/demo2.html

运行效果如下：

框架标签：

< frameset cols=“50%,*”> :纵向分割左边50% 其余全给右边

rows 属性：横向分割

< frame>

内嵌框架

上面我们发现用了框架标签就没有了< body>标签

所以内切框架就是存在于< body>里的

创建demo3.3.html




    
    Title





https://blog.csdn.net/qq_52600282/article/details/demo1.1.html
https://blog.csdn.net/qq_52600282/article/details/demo2.2.html
https://blog.csdn.net/qq_52600282/article/details/demo2.html

运行截图如下：

内嵌框架标签：

< iframe src=“demo3.2_1.html” name=“omg”>

src属性：底下模板是demo3.2_1.html

name属性：关联到超链接a标签中的target

css的作用

美化网页

选择器

demo4.1.html

Title 下午好!快快学习好Java
下午好!快快学习好Java

timing侠

运行效果：

选择器有：

1.类选择器也就是class选择器

2.id选择器

3.伪类

背景

demo4.2,html




    
    Title
    


科比布莱恩特！

科比布莱恩特！

科比布莱恩特！

科比布莱恩特！

科比布莱恩特！

科比布莱恩特！

科比布莱恩特！科比布莱恩特！

运行效果：

属性值：

background-image: url(“img/kebi.jpg”);/背景图片/
background-color: cyan;/背景颜色/
background-repeat: no-repeat;/不平铺/
background-position: 100px 100px;/距离x y轴各100px 图片左顶点为准/

边框

demo4.3.html

点线边框：

dotted 点线

虚线边框;

虚线边框属性：

dashed

demo.4.3.html




    
    Title



输入框：



测边框线

运行效果：

文本

demo4.5.html

Title

我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊
我亲爱的Java你下午好不好啊

运行图片：

text-align: center;
text-decoration: underline;
line-height: 40px;
letter-spacing: 6px;
text-indent: 80px;

字体

demo4.6.html




    
    Title




    JAVA不是JAVA这是巨坑大辣鸡

运行效果：

color: darkmagenta;
font-family: 仿宋;/字体选择/
font-size: 30px;/字体大小/
font-style: italic;/倾斜/
font-weight: bold;/加粗/

列表

demo4.7.html




    
    Title



 
     编程
     Java
     Linux
     Python

运行效果如下：

高宽设置

demo4.8.html




    
    Title

运行效果如下：

边距

margin 边距




    
    Title

运行效果如下：

间隙

padding




    
    Title
    



    Java嘞

运行效果：

布局横向布局

demo4.9.html




    
    Title

运行效果如下:

纵向布局

demo5.1.html




    
    Title

运行效果如下：

嵌套布局




    
    Title

运行效果如下：

HTML基础知识笔记

Java相关栏目本月热门文章