学习笔记——HTML5&&CSS

永不褪色 發表於 2022-8-22 20:19:00

<h1>一、学习重点</h1>
<img src="https://img2022.cnblogs.com/blog/2927160/202208/2927160-20220822190117400-1703806918.png">
 
 
<h1>二、笔记内容</h1>
<div>
什么是HTML
HTML是用来描述网页的一种语言。
HTML叫做超文本标记语言（Hyper Text MarkerUp Language）
HTML不是编程语言，而是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页
<div>
网页由浏览器解析
IE
firefox火狐 flash中文
safari  webkit 苹果
chrome  webkit blink 谷歌（推荐）业界的标杆
Opera 手机端 blink
UC，360，QQ，搜狗，遨游，百度，2345
<div>
<div>HTML标记标签通常称为HTML tag</div>
<div>HTML标签由成对出现的尖括号包围的关键词，比如<body></div>
<div>    HTML标签通常是成对出现的，有例外，比如</div>
<div>    标签对中第一个标签是开始标签，第二标签是结束标签</div>
<div>    结束标签是由/结束的</div>
<div>    开始和结束标签也被称为开放标签和闭合标签</div>
<div>    什么是网页？</div>
<div>    HTML文档描述的就是网页</div>
<div>    HTML文档包含HTML的标签和纯文本</div>
<div>    HTML文档就被称为网页</div>
<div>    web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。</div>
<div>    浏览器不会显示HTML标签，而是使用HTML标签来解释页面的内容</div>
<div>
<div>HTML头部</div>
<div>head元素包含了所有的头部信息元素。</div>
<div>script,link,以及各种meta,title,base</div>
<div><hr></div>
<div>title:</div>
<div>定义了浏览器工具栏的标题</div>
<div>当网页被收藏到收藏夹，显示的默认标题</div>
<div>显示在搜索引擎结果页面的标题</div>
<div><hr></div>
<div>base:</div>
<div>描述了基本的链接地址/链接目录,作为HTML文档中所有的链接标签的默认链接</div>
<div> </div>
<div><a href="">哈哈</a></div>
<div><hr></div>
<div>link:</div>
<div>引用css层叠样式表</div>
<div><hr></div>
<div>style:</div>
<div>定义css层叠样式表</div>
<div><hr></div>
<div>script:</div>
<div>既可以定义script脚本,也可以引用script文件。</div>
<div>不建议写在head里,写在body的最下方</div>
<div><hr></div>
<div>meta:元数据</div>
<div>指定网页的描述，关键词，文件的最后修改时间，作者。</div>
<div>可以定义搜索引擎的关键词</div>
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body bgcolor="green">
 <b>粗体文本</b>
 <code>计算机代码</code>
 <em>强调文本</em>
 <i>斜体文本</i>
 <kbd>键盘输入</kbd>
 <pre>
 池塘边的榕树下，
 知了在声声叫着夏天。
 </pre>
 <small>更小的文本</small>
 <strong>重要的文本</strong>
 <del>删除线</del>
 log<sub>5</sub>
 2<sup>3</sup> = 8
 <font color="green">我是font</font>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
 普通的链接：<a href="http://www.baidu.com" target="_self">百度一下</a><br>
 图像链接：<a href="http://www.baidu.com"><img width="150"
 src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a><br>
 邮件链接：<a href="mailto:123456@qq.com">站长信箱</a><br>

 锚记链接：
 <a id="tips">提示部分</a>

 <a href="#tips">跳到提示部分</a>

</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <img src="img/libai.jpeg" width="300" title="" alt="" align="bottom"
 border="1">后面的文本
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div>文档中的块级元素</div>

 <span>文档中的行级元素</span>

 
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 无序列表：
 <ul type="disc">
 <li>项目1</li>
 <li>项目2</li>
 </ul>
 有序列表
 <ol type="I">
 <li>项目1</li>
 <li>项目2</li>
 <li>项目3</li>
 <li>项目4</li>
 </ol>
 自定义列表
 <dl>
 <dt>项目1</dt>
 <dd>描述项目1</dd>
 <dt>项目2</dt>
 <dd>描述项目2</dd>
 </dl>
</body>
</html></pre>
</div>
表格（行、列）
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <table border="1" cellpadding="10" cellspacing="0" width="400">
 <thead>
 <tr>
 <th>学号</th>
 <th>姓名</th>
 <th>联系方式</th>
 <th>毕业院校</th>
 <th>国籍</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1001</td>
 <td>罗永浩</td>
 <td>13635412586</td>
 <td>延边第二中学</td>
 <td rowspan="4">中国</td>
 </tr>
 <tr>
 <td>1002</td>
 <td>罗翔</td>
 <td>13125693254</td>
 <td>北京大学</td>
 </tr>
 <tr>
 <td>1003</td>
 <td>樊登</td>
 <td>13326956541</td>
 <td>西安交通大学</td>
 </tr>
 <tr>
 <td>1004</td>
 <td>雷军</td>
 <td>15619851265</td>
 <td>武汉大学</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="5">
 备注：他们都是有一定能力的人。
 </td>
 </tr>
 </tfoot>
 </table>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <iframe src="https://www.sina.com.cn" height="600" width="400"
 frameborder="0"></iframe>
 <iframe src="https://www.sohu.com" height="600" width="400"
 frameborder="0"></iframe>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <form action="" method="post">
 <p>
 账号：<input type="text">
 </p>
 <p>
 密码：<input type="password">
 </p>
 <p>
 性别：
 <input type="radio" name="gender">男
 <input type="radio" name="gender" checked>女
 </p>
 <p>
 地址：
 <select>
 <option value="">请选择省</option>
 <option value="">吉林省</option>
 <option value="">北京市</option>
 </select>
 <select>
 <option value="">请选择市</option>
 <option value="">长春市</option>
 <option value="">北京市</option>
 </select>
 <select>
 <option value="">请选择区</option>
 <option value="">南关区</option>
 <option value="">西城区</option>
 </select>
 </p>
 <p>
 爱好：
 <input type="checkbox" checked>读书
 <input type="checkbox">游泳
 <input type="checkbox" checked>跑步
 </p>
 <p>
 <textarea cols="30" rows="10"></textarea>
 </p>
 <p>
 邮箱：<input type="email">
 </p>
 <p>
 薪水：<input type="number">
 </p>
 <p>
 头像：<input type="file">
 </p>
 <p>
 颜色：<input type="color">
 </p>
 <p>
 电话：<input type="tel">
 </p>
 <p>
 隐藏：<input type="hidden">
 </p>
 <p>
 
 <button type="submit">注册</button>
 <button type="reset">重写</button>
 <button type="button">自定义</button>
 
 </p>
 </form>
</body>
</html></pre>
</div>
CSS
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
 <a href="aaa?gender=on&username=admin">a标签</a>
 <form action="aaa" method="post">
 <p>
 
 账号：<input type="text" name="username" maxlength="12"
 placeholder="用户名为6-12位">
 </p>
 <p>
 密码：<input type="password" name="password" placeholder="密码必须是6位">
 </p>
 <p>
 性别：
 <input type="radio" name="gender" value="男" id="man">
 <label for="man">男</label>
 <input type="radio" name="gender" checked value="女" id="women">
 <label for="women">女</label>
 </p>
 <p>
 地址：
 <select name="sheng">
 <option value="0">请选择省</option>
 <option value="吉林省">吉林省</option>
 <option value="北京市">北京市</option>
 </select>
 <select name="shi">
 <option value="0">请选择市</option>
 <option value="长春市">长春市</option>
 <option value="北京市">北京市</option>
 </select>
 <select name="qu">
 <option value="0">请选择区</option>
 <option value="南关区">南关区</option>
 <option value="西城区">西城区</option>
 </select>
 </p>
 <p>
 爱好：
 <input type="checkbox" value="reading" checked>读书
 <input type="checkbox" value="swimming">游泳
 <input type="checkbox" checked value="running">跑步
 </p>
 <p>
 <textarea cols="30" rows="10" name="desc"></textarea>
 </p>
 <p>
 邮箱：<input type="email" name="email">
 </p>
 <p>
 薪水：<input type="number" name="salary">
 </p>
 <p>
 电话：<input type="tel" name="tel">
 </p>
 <p>
 隐藏：<input type="hidden" name="hidden" value="hidden_value">
 </p>
 <p>

 <button type="submit">注册</button>
 <button type="reset">重写</button>
 <button type="button">自定义</button>

 </p>
 </form>
</body>
</html></pre>
</div>
<div>
<div>实体Entity（转义字符）</div>
<div>李白乘舟将欲行，&nbsp;忽闻岸上踏歌声，桃花潭水深千尺，不及汪伦送我情。</div>
<div>&nbsp; 空格</div>
<div>&amp; and符号</div>
<div>&lt; 小于号</div>
<div>&gt; 大于号</div>
<div>&copy; 版权号</div>
</div>
</div>
<div> 
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
 
 <audio src="123.mp3" autoplay controls></audio>
 
 <video src="123.mp4" autoplay controls></video>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" co ntent="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
 
 <input type="date">
 <input type="time">
 <input type="datetime">
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <form action="aaa">
 <input type="text" autofocus required>
 
 <br>
 <input type="number" step="100" min="1000" max="6000">

 <input type="text" pattern="{3}" placeholder="请输入英文字符">
 <input type="submit">
 </form>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
 
 <style>
 h1 {
 background-color: green;
 }
 span{
 background-color: yellow;
 }
 </style>
 
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 
 
 <p style="background-color: red;">我是P标签</p>
 <h1>我是h1标签</h1>
 <span>我是span标签</span>
 <a href="#">我是超级链接</a>
</body>
</html></pre>
</div>
CSS选择器
</div>
<div> 
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
 <style>
 /* 类选择器 */
 .fontStyle {
 color: red;
 font-size: 20px;
 }
 .backgroudStyle {
 background-color: yellow;
 }
 /* id选择器，每个标签元素的id是唯一不能重复 */
 #fontStyle2 {
 color: blue;
 font-size: 30px;
 }
 /* 标签选择器 */
 p {
 font-family: "仿宋";
 }
 /* 通配符，全部选择器
 页面初始化
 */
 * {
 margin:0;
 padding: 0;
 }
 /* 组合选择器 */
 h1,div {
 font-size: 50px;
 }
 /* 后代选择器 */
 div p {
 background-color: red;
 }
 /* 子选择器 */
 div>p {
 color: blueviolet;
 }
 /* 紧跟着div的p元素 */
 div + p{
 background-color: pink;
 }
 /* 属性选择器 */
 input{
 height: 100px;
 font-size: 50px;
 }
 input {
 color: red;
 }
 </style>
</head>
<body>

 <input type="text" name="username">
 <input type="password" name="password">
 
 
 <p class="fontStyle backgroudStyle">我爱你中国！</p>
 <p id="fontStyle2">我爱你长春！！！</p>

 <h1>我是h1标签</h1>
 <div>我是div标签</div>

 <div>
 我是div
 <p>我是div里的p</p>
 <span>
 <p>我是div里的span里的p</p>
 </span>
 </div>
 <p>我是div后面的p</p>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>伪类选择器</title>
 <style>
 /* 初始状态 */
 a:link {
 color: red;
 }
 /* 鼠标悬停 */
 a:hover {
 color: green;
 }
 /* 激活状态 */
 a:active{
 color: black;
 }
 /* 访问过的 */
 a:visited {
 color: yellow;
 }
 /* 获得焦点 */
 input:focus {
 height: 100px;
 font-size: 50px;
 }
 </style>
</head>
<body>
 <a href="2">超级链接</a>

 <input type="text">
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
 <style>
 img:hover {
 width: 400px;
 border: 1px red solid;
 }
 </style>
</head>
<body>
 <img src="../img/libai.jpeg" width="100">
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE 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, initial-scale=1.0">
 <title>Document</title>
 <style>
 p::first-letter {
 color: red;
 }
 </style>
</head>
<body>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut error
 reprehenderit est ipsam voluptatem, expedita, ipsa exercitationem
 accusamus amet, temporibus deserunt tempore nobis? Cupiditate libero
 repudiandae neque quaerat, incidunt dolore.</p>
</body>
</html></pre>
</div>
 
</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
</div>
</div> 
来源：https://www.cnblogs.com/ljmskipper/p/16613836.html

頁: [1]

琼殿技术论坛's Archiver

学习笔记——HTML5&&CSS