.~HTML课堂笔记

最新推荐文章于 2024-07-12 20:49:16 发布

小狗快跑！

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量434

点赞数 5

文章标签： html 笔记前端

本文链接：https://blog.csdn.net/sjdygb_/article/details/136713578

版权

注意：

1.创建一个文本：在文件夹内新建一个文本文档——查看——显示——文件扩展名——修改扩展名为.html

2.ctrl+s 保存 alt+b 运行 ctrl+z 返回

3.width= px（像素）

4.2个&nbsp【空格】占两个字符，表现出来的是一个空格

HTML常用标签

<!DOCTYPE html>   -------声明了一个html的文档
<html lang="en">  ---------网页开始的部分
<head>  ---------网页头部开始
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  --------网页的标题
</head>  ---------网页头部结束
<body>  ---------网页内容的开始
    
</body>  ---------网页内容的结束
</html>  ---------网页结束的部分

编码格式

GB2312 ------简体中文字符集
UTF-8 ------通用字符集
BIG5 --------繁体中文字符集
GBK --------GB2312延伸，增加了一些更多汉字和特殊符号

注释： -----用于解释和说明的部分

<!--这是注释的部分-->

3.1 常用标签

3.1.1 strong、b、em、i、udel标签

strong、b ------加粗

em、i -----斜体

u ----下划线

del --------删除线

 <strong>我是聪明蛋</strong>
    <b>也是粗体</b>
    <em>斜体</em>
    <i>也是斜体</i>
    <u>下划线</u>
    <del>删除线</del>

3.1.2 br和hr标签

br标签是用来换行 --------单标签

hr标签是水平分割线 -------单标签可以设置width属性表示水平分割线的长度，size属性设置粗细

3.1.3 p标签

段落标签

align属性 --------位置left center right，默认值是left

font标签 --------这是字体

color属性 --------颜色

颜色表示法：英文单词 red black pink

#rrggbb 三原色 red green blue

3.1.4 sub、sup、pre、span标签

sub -----下标签

sup -----上标签

pre -----用来原样输出内容

span -----修饰文本的标签 -----标准的行内标签

3.1.5 hn和div标签

hn指的是h1,h2,h3,h4,h5,h6 ----标题标签n取值只能是1-6，且字体越来越小，同时有加粗的效果

div标签 ----标准的块级标签-----盒子布局

：div hn p hr

3.1.6 特殊字符

 <font color="green">张泽禹C位出道</font>
    <br>
    <p>
        <font color="pink">粉色！</font>
        <hr >
    </p>
    四的五次方:4 <sup>5</sup><br>
    <pre >
<font size=32px color="green">我和我的音乐讲道理<br>拒绝活在别人目光里</font>
    </pre>
    <span style="color: green;font-size: 40px;">
        我的家乡
    </span>
    <h1 style="font-size: 65px;">啊</h1>
    <h2>啊</h2>   
    <h3>啊</h3>
    <h4>啊</h4>
    <h5>啊</h5>
    <h6>啊</h6>
    <div style="color: crimson;font-size: 60px;">我要吃烤冷面!</div>
    &nbsp;&nbsp;&nbsp; 什么时候下课啊&nbsp;&nbsp;&nbsp;&nbsp;

3.2 表单标签

form标签一般会和input标签连用

action：跳转的路径

绝对路径：从盘符开始到文件名全称的全部路径，D:\云计算htlml\12.8.html

相对路径：当前源文件和目标文件的相对路径，…\云计算htlml\12.8.html

method：表单提交的方式，有get、post 默认get

<form action="..\云计算htlml\练习.html" method="post" name="register">

name：表单名称

get：会把用户请求的内容暴露在地址栏上

post：相对于get较安全

 <form action="..\云计算htlml\练习.html" method="post" name="register">
        用户名: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit">
        <input type="元素的类型" name="元素的名称" value="元素的值">
    </form>

3.2.1 表单元素

表单元素（文本框、密码框、下拉列表、单选、多选）

一般由input、textarea、select标签构成，需要放到form里面

3.2.1.1 input标签

语法格式

 <input type="元素的类型" name="元素的名称" value="元素的值">

type的取值：

text --------文本框

password -----密码框

radio ----单选按钮

checkbox ----多选按钮

submit -------提交按钮

reset -----重置按钮

button ------普通按钮

image------图像按钮（忘记了src后面代表什么了，看视频）

file-----文件域

hidden-----隐藏域（怎样才能看到呢）

email----邮箱

color-----颜色域

date----日期

time-----时间

datetime-local-----日期+时间

range-----进度条

<form action="">
        用户名: <input type="text">
    <p>
        密码: <input type="password">
    </p>
    请选择您的性别: <input type="radio" name="gender">男<input type="radio" name="gender">女
    <p>
        请选择您的爱好: <input type="checkbox" name="hobbit">睡觉
        <input type="checkbox" name="hobbit">说话
        <input type="checkbox" name="hobbit">呼吸
        <input type="checkbox" name="hobbit">rap
    </p>
    <input type="submit" value="登录">
    <input type="reset">
    <input type="button" value="普通">
   <input type="image" src="未来.jpg">
    <input type="file">
    <input type="hidden" value="张泽禹C位出道">
    请选择您的邮箱: <input type="email" value="请填写您的邮箱">
    <input type="color">
    <input type="date">
    <input type="time">
    <input type="datetime-local">
    <input type="range">
    </form>

input标签常用的属性：

checked----默认选择（没体现）

readonly------只读字段可以读不可以更改

disabled-------禁用不可以点击

autofocus-----默认光标的位置

required-----不能为空白提交

 <form action="12.10作业.html">
        用户名：<input type="text" required><br>
        默认：<input type="text" value="zzy" readonly disabled><br>
        密码：<input type="password" autofocus><br>
        请选择您的爱好：<input type="checkbox">rap
        <input type="checkbox">唱歌
        <input type="checkbox">睡觉
        <input type="checkbox">八嘎
        <input type="submit" value="登录">
    </form>

3.2.1.2 select标签

下拉列表框------一般和option标签进行连用

select属性-----默认被选中的选项

multiple-----以列表的形式显示

<form action="">
        请选择你投票的对象
        <select name="" id="" multiple>
            <option value="">zzy</option>
            <option value="">zzx</option>
            <option value="">zj</option>
            <option value="">zjh</option>
        </select>
    </form>

3.2.1.3 textarea标签

用来实现文本域

cols ------多少列，用于显示文本宽度

rows -----多少行，用来显示文本高度

 <p>
    <textarea name="" id="" cols="30" rows="10">我想睡觉</textarea>
 </p>

3.3常见的属性

<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>       <marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
<marquee scrollamount="100">我速度很快.</marquee> 
<marquee scrollamount="50">我慢了些。</marquee> 
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

 <marquee>
        <img src="图片1.png" alt="" width="200px" height="200px">
    </marquee>
    <marquee behavior="alternate">
        <img src="图片1.png" alt="" width="200px" height="200px">
    </marquee> 
    <marquee behavior="scroll">
        <img src="图片1.png" alt="" width="200px" height="200px">
    </marquee>
    <marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>       <marquee behavior="slide">我只滚动一次</marquee> 
    <marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
    <marquee scrollamount="100">
        <img src="图片1.png" alt="" width="200px" height="200px">
    </marquee> 
    <marquee scrollamount="50">我慢了些。</marquee> 
    <marquee scrolldelay="30">我小步前进。</marquee> 
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

direction------表示滚动的方向，值可以是left，right，up，down，默认为left 

behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动） 

loop-----表示循环的次数，值是正整数，默认为无限循环 

scrollamount-----表示运动速度，值是正整数，默认为6 

scrolldelay----表示停顿时间，值是正整数，默认为0，单位似乎是毫秒 

align-----表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle 

bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色 

height、width------表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度 

hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。

οnmοuseοver=this.stop() οnmοuseοut=this.start()------表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

3.4 a标签

a标签-------超文本链接-------用来进行页面跳转 herf = “url”—跳转页面的路径

target属性

<body>
    <a href="https://www.baidu.com/?tn=15007414_8_dg">点我</a>
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_blank">点我</a>  <!--不覆盖原页面-->
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_parent">点我</a>
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_self">点我</a>
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_top">点我</a>
</body>

锚点：使用锚点，点击锚点，跳转到指定位置。

#+id名字进行跳转

<h1 href="#" id="#0">XXX小说</h1>
    <a href="#0" id="#01"><h3>第一章</h3></a>
    <a href="#0" id="#02"><h3>第二章</h3></a>
    <a href="#0" id="#03"><h3>第三章</h3></a>
    <a href="#0" id="#04"><h3>第四章</h3></a>
    <p>
        <a href="#01">第一章</a><br>
        。。。。。。。
    </p>
    <p>
        <a href="#02">第二章</a><br>
       。。。。。。。。
    </p>
    <p>
        <a href="#03">第三章</a><br>
       。。。。。。。。
    </p>
    <p>
        <a href="#" id="04">第四章</a><br>
        。。。。。。。。
    </p>
    <a href="#" id="#0">回到顶部</a>

3.5 img标签

包含目前常见的格式：GIF JPG BMP等

3.5.1

src 属性 ---- 指的是图片的路径（绝对路径和相对路径）
alt属性 ------ 代替图片的文本内容（因为路径的问他或者因为浏览器的问题显示不出来这个张图片的
时候，alt属性值就是去描述这张图片的一个内容）
width ------ 宽度
height ---- 高度
border ------ 边框，默认值0
align ----- 位置（图片和文字的位置）
top (上对齐) middle(居中对齐) bottom(下对齐默认值) left(左对齐) right(右对齐)
title ------ 图片的标题，用来显示描述图片的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="图片1.png" alt="1" title="哆啦A梦"><br>
    <img src="图片1.png" alt="1" width="200px" height="100px" border = "14"><br>
    这是上对齐<img src="图片1.png" alt="1" width="200px" height="100px" border = "2" align ="top"><br>
    这是下对齐<img src="图片1.png" alt="1" width="200px" height="100px" border = "2" align ="bottom"><br>
    这是居中对齐<img src="图片1.png" alt="1" width="200px" height="100px" border = "2" align ="middle"><br>
    这是左对齐<img src="图片1.png" alt="1" width="200px" height="100px" border = "2" align ="left"><br>
    这是右对齐<img src="图片1.png" alt="1" width="200px" height="100px" border = "2" align ="right"><br>
    这是默认对齐<img src="图片1.png" alt="1" width="200px" height="100px" border = "2" >
</body>
</html>

3.5.2 位图

usemap属性

map标签的name属性，一般会和area标签进行连用

属性：shape------------鼠标点击形状

coords--------鼠标点击形状的大小

href--------表示跳转路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位图</title>
</head>
<body>
    <img src="图片1.png" alt="duola" usemap="#哆啦A梦">
    <map name="哆啦A梦">
        <area shape="circle" coords="150,125,30" href="12.22.html" alt="">
    </map>
</body>
</html>

3.6 多媒体标签

audio 标签-----音频

video 标签-----视频

controls 属性-------表示播放器的组件

autoplay 属性-------自动播放（浏览器不支持这个）

loop 属性-------循环播放

<audio src="bgm.mp3" controls autoplay loop></audio>
<video src="花园宝宝1.mp4" controls ></video>

3.7 表格布局

table标签

包含thead tbodt tr td tfood

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table>
        <thead>表头</thead>
        <tbody>   ----- 表格的主干
            <tr>   ----- 行
                <td>第一行第一列</td> ---- 列
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
        </tbody>
        <tfoot>表尾</tfoot>
 </table>
</body>
</html>

3.7.1 表格的边框

border-----表格的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border="1">
            <tr>  
                <td>第一行第一列</td> 
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
 </table>
</body>
</html>

2.7.2 表格的宽度和高度

width------宽

height------高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border="1" width="300px" height"400px">
            <tr>  
                <td>第一行第一列</td> 
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
 </table>
</body>
</html>

2.7.3 表格的对齐方式

align----对齐方式 left right center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border="1" width="300px" height"400px" align="left">
            <tr>  
                <td>第一行第一列</td> 
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
 </table>
</body>
</html>

2.7.4 表格的背景

bgcolor --------背景颜色

background -------背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border="1" width="300px" height"400px" align="left" bgcolor="pink" background="图片1.png">
            <tr>  
                <td>第一行第一列</td> 
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
 </table>
</body>
</html>

2.7.5 表格的间距和边框

cellpadding------表格边距（表示单元格内元素距离单元格边缘的距离）

cellspacing-------表格间距（单元格和单元格之间的距离）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border="1" width="300px" height"400px" cellpadding="10px" cellspacing="10px">
            <tr>  
                <td>第一行第一列</td> 
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
 </table>
</body>
</html>

默认的边距和间距的取值为2px

2.7.6 表格的嵌套

表格里嵌套表格

<table border="1" width="300px" height="100px" bgcolor="pink">
        <tr>
            <td>&nbsp;</td>
            <td>
                <table border="1" width="100px" height="100px" bgcolor="red">
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
       
    </table>

2.7.7 表格的合并

rowspan ------------表示表格单元上垂直方向上去跨行（合并行）

<table border="1" width="300px">
        <tr>
            <td rowspan="3">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
           
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
           
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table

colspan -----------表示单元格上水平方向跨列（合并列）

<table border="1" width="300px">
        <tr>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

3.8 列表标签

主要有三种：有序列表无序列表数据列表

3.8.1 有序列表 —ol

type属性-----设置序号的种类，默认数字

start属性 ---- 控制序号开始的顺序

reversed属性 ----- 降序（反序）

 <ol type="1" start="7" reversed>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
    </ol>
    <ol type="A" start="C">
        <li>这句话</li>
        <li>这句话</li>
        <li>这句话</li>
        <li>这句话</li>
    </ol>
    <ol type="a" start="c">
        <li>zzy</li>
        <li>zzy</li>
        <li>zzy</li>
    </ol>
    <ol type="I">
        <li>z</li>
        <li>z</li>
        <li>z</li>
        <li>z</li>
        <li>z</li>
    </ol>
    <ol type="i">
        <li>R</li>
        <li>R</li>
        <li>R</li>
        <li>R</li>
        <li>R</li>
    </ol>

3.8.2 无序列表 ----- ul

type属性 ---- 无序列表的样式disc（默认取值实心圆）circle（空心圆）square（实心方框）

 <ul>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
    </ul>
    <ul type="disc">
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
    </ul>
    <ul type="circle">
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
    </ul>
    <ul type="square">
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
        <li>张泽禹</li>
    </ul>

3.8.3 数据列表 ----- dl

<dl>
        <dt>地方新闻</dt>
            <dd>这是内容1</dd>
            <dd>这是内容2</dd>
            <dd>这是内容3</dd>
            <dd>这是内容4</dd>
            <dd>这是内容5</dd>
        <dt>国际新闻</dt>
            <dd>这是内容1</dd>
            <dd>这是内容2</dd>
            <dd>这是内容3</dd>
            <dd>这是内容4</dd>
            <dd>这是内容5</dd>
        <dt>国内新闻</dt>
            <dd>这是内容1</dd>
            <dd>这是内容2</dd>
            <dd>这是内容3</dd>
            <dd>这是内容4</dd>
            <dd>这是内容5</dd>
   </dl>

3.9 多窗口框架

一个页面可以显示多个窗口 ------ frameset（不能和body标签连用）

cols ------- 定义页面列方向的尺寸或数目

rows ----- 行

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<frameset cols="25%,25%">
    <frame src="D:\云计算html\12.8.html"></frame>
    <frame src="D:\云计算html\12.10.html"></frame>
</frameset>
</html>

小狗快跑！

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
.~HTML课堂笔记

注意：1.创建一个文本：在文件夹内新建一个文本文档——查看——显示——文件扩展名——修改扩展名为.html2.ctrl+s 保存 alt+b 运行 ctrl+z 返回3.width= px（像素）4.2个&nbsp【空格】占两个字符，表现出来的是一个空格HTML常用标签<!DOCTYPE html> -------声明了一个html的文档<html lang="en"> ---------网页开始的部分<head>
复制链接

扫一扫