首页
博客统计
关于我
友链
留言板
推荐
网页导航
公益图床
Search
1
HTML 笔记
15 阅读
2
CSS 笔记
9 阅读
3
简单图床——EasyImage2.0
7 阅读
4
Adobe Illustrator 2021 特别版
6 阅读
5
Adobe Photoshop 2021 特别版
5 阅读
项目部署
软件分享
笔记分享
网站推荐
党课
登录
/
注册
Search
标签搜索
破解
Adobe
前端
html
宝塔
软件
Javascript
代码
CSS
零落山船
累计撰写
8
篇文章
累计收到
0
条评论
首页
栏目
项目部署
软件分享
笔记分享
网站推荐
党课
页面
博客统计
关于我
友链
留言板
推荐
网页导航
公益图床
搜索到
1
篇与
的结果
2024-07-14
HTML 笔记
一、HTML 概念HTML 定义HTML 指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。Web 标准主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面结构:用于对网页元素进行整理和分类,HTML表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指CSS行为:行为是只网页模型的定义及交互的编写,主要指 Javascript二、HTML 标签1. HTML 语法规范HTML 标签是由尖括号包围的关键词:例如<html>HTML 标签通常是成对出现的,例如:<html></html>,,我们称为双标签,第一个标签是开始标签,第二个标签是结束标签。有些特殊的标签是单标签,例如 <br />2. 标签关系双标签关系可以分为两类:包含关系和并列关系包含关系:<head> <title></title> </head>并列关系:<head></head> <body></body>3. 基本结构标签每一个网页都会有一个基本结构标签(也成为骨架标签),页面内容也是在这些基本标签上书写的,HTML页面又称为HTML文档。HTML 基本结构:<html> <head> <title>HTML基本结构</title> </head> <body> 网页内容 </body> </html><html></html> HTML 标签,页面中最大的标签,我们称为根标签<head></head> 文档的头部,注意在 head 标签中我们必须要设置的标签是 title<title></title> 文档的标题,让页面拥有一个属于自己网页的标题<body></body> 文档的主体,元素包含文档的所有内容,页面内容,基本都放在body里边的。3.1 头部标签HTML 框架<!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> </body> </html><!DOCTYPE> 文档类型声明标签,告诉浏览器使用哪种 HTML 版本来显示网页<!DOCTYPE html> // 使用最新版本的 HTML 来显示网页必须写在最前边,处于 html 标签之前,它不是一个 HTML 标签,它只是一个文档类型声明标签html 标签中可以加入 lang 语言种类<html lang="en"> // 当前文档的显示语言,对搜索引擎有影响,但对文档内部无影响 <html lang="zh-CN"> // 当前页面主体为中文字符集在 head 标签中,可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码<meta charset="UTF-8"> // 以 UTF-8 字符集显示网页内容charset 常用值有:GB2312(简单中文)、BIG5(繁体中文)、GBK(简体繁体全部中文字符)、和 UTF-8(国际通用字符集)4. 网页开发工具 VSCode 编辑器! // 使用叹号一键直接生成框架三、HTML 常用标签1. 标题标签 <h1> ~ <h6> <h1>我是一级标签</h1>标题标签一共分为6个等级,重要度依次递减2. 段落标签 <p> </p>在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,段落标签用于定义段落,一个文本内容定义一个段落,可以将整个网页分为若干个段落。<p>我是一段文字</p> <p>我是第二段文字</p>3. 换行标签 <br />如果希望某段文本强制换行,或者需要空行,需要使用 <br /> 标签。<br /><br /> 是一个单标签,与 <p> 标签的区别是,段落标签之间会插入一些垂直间距4. 文本格式化标签网页中,有时候需要设置文字为粗体、斜体、下划线等效果,这时候需要用HTML中的文本格式化标签,使文字以特殊的方式显示。<b>粗体</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <sub>下标记</sub> <sup>上标记</sup>带有语义的标签:strong - 粗体em - 斜体ins - 下划线del - 删除线用法和普通标签一样,推荐使用,语义更加强烈,并且可以用CSS控制5. 盒子标签 <div> 和 <span> 标签没有任何语义,是一个容器标签<div>这是一个盒子</div> <span>这是一段文字</span>div 标签独占一行(大盒子),span标签一行可显示多个元素(小盒子)6. 图像标签<img src="img.jpg" alt="图片描述" title="图标标题" width="500" height="500" border="15">图像标签其他属性src // 图片路径 alt // 文本(替换文本,当图像不能显示的时候,显示该文字) title // 文本(提示文本,当鼠标放在图片上,显示的文字) width // 图像的宽度 height // 图像的高度 border // 图像边框的粗细一般只做 width 或者 height 其中一个,另一个会等比例压缩路径// 相对路径 <img src="logo.png" /> // 同级路径 <img src="./img/logo.png" /> // 同级路径 <img src="img/logo.png" /> // 下级路径 <img src="../img/logo.png" /> // 上级路径// 绝对路径 <img src="http://www.baidu.com/logo.png" /> C:/appserv/www/images/logo.gif /usr/local/apache/htdocs/www/logo.png7. 超链接标签在 HTML 标签中,<a> 标签用于定义超链接,作用是从一个页面链接到另一个页面<a href="跳转目标" target="目标的弹出方式">文本或图像</a>target 参数:_self 为默认值,在本页面打开新窗口 _blank 在新窗口打开常用链接写法:<a href="http://www.forece.net" target="_blank"></a> // 外部链接 <a href="index.html"><img src="logo.png" /></a> // 图片链接 <a href="admin/1.html"></a> // 内部链接 <a href="#"></a> // 空链接锚点链接:// 回到顶部 <a href="#top">回到顶部</a> // 使用 id 设置锚点 <a href="#tag">第一课</a> <h3 id="tag">第一课</h3>邮件链接:<a href="mailto:xxx@xxx.com?subject=主题&内容&cc=抄送@xxx.com>给我留言</a>8. 预排版标签 <pre></pre>在 HTML 中,标签和一些字符会被浏览器解析转义,并且空格也不会被解析。可以使用 pre 标签,将代码中的内容原原本本的还原出来,<p>左 右</p> <pre>左 右</pre>四、HTML 注释标签<!-- 这是一段注释 -->五、常用HTML实体在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,可以用HTML实体来替换显示结果描述实体名称实体编号 空格 <小于号<<>大于号>>&和号&&"引号""'撇号' (IE不支持)'¢分¢¢£镑££¥日圆¥¥€欧元€€§小节§§©版权©©®注册商标®®™商标™™×乘号××÷除号÷÷六、表格标签HTML中的表格一般是用来显示数据的,最好不要用表格走框架布局1. 表格的基本语法<table> <tr> <td>单元格内文字</td> </tr> </table><table></table> 是用于定义表格的标签<tr></tr> 标签用于定义表格中的行,必须签到在 table 标签中<td></td> 标签用于定义表格中的单元格,必须签到在 tr 标签中<caption></caption> 表格标题标签VSCODE 中可以快捷创建表格 table>tr*5>td*3 (快速创建一个5行3列的表格)如果只生成td表格,用 td*3 即可表头单元格 <th></th>和 td 标签类似都是表格中的单元格,一般写在第一行 tr 标签中,用来当做表头<table> <tr><th>表头1</th><th>表头2</th></tr> <tr><td>普通单元格1</td><td>普通单元格2</td></tr> </table>2. 表格相关属性标签属性一般不常用,基本都是使用 CSS 来设置align // 水平对齐方式(left, center, right),可以在 table, tr, td 中使用。对包含元素全部生效 valign // 垂直对齐方式(top, middle, bottom),table 没有该属性 border // 规定表格单元是否拥有边框(1 或者 ""),默认没有边框, td 没有 border 属性 bordercolor // 表格颜色 cellpadding // 规定单元边缘与内容之间的空白,默认1像素 cellspacing // 规定单元格之间的空白,默认2像素 width // 规定表格的宽度(像素值或百分比) height // 表格的高度 例:<table align="center", border="1", cellpading="20", cellspacing="0", width="500", height="250">3. 表格结构标签<thead></thead> // 表格头部区域 <tbody></tbody> // 表格主体区域<table> <!-- 表格头部区域 --> <thead> <tr> <th>表头</th> <th>表头</th> </tr> </thead> <!-- 表格主体区域 --> <tbody> <tr> <td>单元格</td> <td>单元格</td> </tr> </tbody> </table>4. 合并单元格rowspan="合并单元格的个数" // 跨行合并(上下行合并),在上边的单元格添加属性 colspan="合并单元格的个数" // 跨列合并(左右列合并),在左侧的单元格添加属性记得删除多余的单元格<table align="center", border="1", cellpading="20", cellspacing="0", width="500", height="250"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td colspan="2">123</td> <td>123</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td rowspan="2">5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>8</td> </tr> </table>七、列表标签列表标签在 HTML 中是用来布局的,根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表1. 无序列表<ul> 标签是 HTML 页面中的无序列表,列表项使用 <li> 标签定义,列表项前边以原点显示。<ul> <li></li> <li></li> <li></li> </ul>ul 标签中只能签到 li 标签,不能放其他内容li 标签中相当于一个容器,可以容纳所有其他元素可以用 type 属性改变前边标志,如:<ul type="square"> <li>第一条</li> </ul>可以使用 disc, circle, squre 几种类型2. 有序列表<ol> 标签在 HTML 中式有序列表,列表排序以数字来显示,列表项用 <li> 标签。有序列表也可以使用 type 指定显示标志,如:<ol type="a"> <li>第一条</li> </ol>类型:1 - 1, 2, 3 默认a - a, b, cA - A, B, CI - I, II, IIIi - i, ii, iiistart 属性,可以指定序号从第几序号开始(只能是数字),如:<ol type="1" start="2"> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> </ol>序号从2开始计数,2,3,4,53. 自定义列表一般用于 Footer,<dl> 标签用于定义描述列表(类似table),<dt> 用来定义项目名称,<dd> 用于列表项。如小米底部设计:<dl> <dt>服务</dt> <dd>售后</dd> <dd>联系我们</dd> </dl>八、表单标签HTML 中,一个完整的表单通常由表单域、表单控件和提示信息3个部分构成1. 表单域表单域是一个包含表单元素的区域,在 HTML 标签中,<form> 标签用于定义表单域,form 标签会把范围内的表单元素信息提交给服务器<form action="url地址" method="提交方式" name="表单域名称"> 表单元素控件 </form>url // 表单递交到的网址action // 用于指定接收并处理表单数据的url地址method // 分为 get 和 post,表单数据的提交方式name // 用于指定表单的名称,以区分同一个页面中的多个表单域2. 表单控件(表单元素)在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单输入或者选择的控件<input> 表单元素input 是输入的意思,在表单元素中 input 标签用于收集用户信息。在 input 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有多种形式(文本框、复选框、单选框、按钮、掩码后的文本控件等)<input type="属性值">input 类型:text 定义单行的输入字段,用户可以在其中输入文本,默认宽度为20个字符 password 定义密码字段,该字段中的字符被掩码 radio 定义单选按钮 checkbox 复选框 file 定义输入字段和“浏览”按钮,供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 submit 定义提交按钮,提交按钮会把表单数据发送到服务器 button 定义可点击按钮(多数情况下,用于通过js启动脚本) reset 定义重置按钮,重置按钮会清除表单中的所有数据2.1. 文本框<input type="text" name="username" value="文本框默认内容" placeholder="占位">其他属性:name提交 GET 或 POST 的字段名value文本框默认内容placeholder占位符,当输入文字时,占位符消失。2.2. 密码框<input type="password">2.3. 单选框radio 单选框必须 name 一致才可以实现单选效果<form> 性别: 男 <input type="radio" name="sex" value="0"> 女 <input type="radio" name="sex" value="1"> </form>只有加了 value 才可以通过 name 字段将值提交给后台2.4. 复选框<form> <input type="checkbox" name="furniture" id="" value="0">冰箱 <input type="checkbox" name="furniture" id="" value="1">电视 <input type="checkbox" name="furniture" id="" value="2">柜子 <input type="checkbox" name="furniture" id="" value="3">空调 </form>同组复选框,name 值需要统一,value 值用于提交数据2.5. 下拉框select 下拉表单元素在页面中,如果有多个选项,可以使用 select 标签控件定义下拉列表 <select name="location" id="location"> <option value="">BJ</option> <option value="">TJ</option> <option value="" selected="selected">SH</option> </select>默认选中可以用 selected 属性多选分组<form> <select name="location"> <optgroup label="省份"> <option value="SD">山东省</option> <option value="HB">河北省</option> <option value="JL">吉林省</option> </optgroup> <optgroup label="行业"> <option>服务业</option> <option>制造业</option> <option>零售业</option> </optgroup> </select> <input type="submit" value="提交"> </form>2.6. 文本域textarea 文本域标签当用户输入文字较多的情况下,可以使用 textarea 标签,在表单元素中, textaera 标签是用于定义多行文本输入的控件,textarea 标签没有 value 属性。<textarea name="" id="" cols="30" rows="10">文字</textarea>2.7. 上传文件<input type="file" name="file" id="">2.8. 按钮提交按钮将表单中内容通过 GET 方式 或 POST 提交到服务端,提交按钮可以用 input 标签,也可以使用 button 标签,实现的效果是一样的。<input type="submit"> <button>按钮</button>复位按钮将表单内容复位,如果有 value 值,则复位为 value 值。<input type="reset">普通按钮无效果,一般用于绑定 js 事件实现特殊效果<input type="button" value="点击按钮">3. input 其他属性name 定义 input 元素的名称,重要,GET 或 POST 的 key 值 value 定义 input 元素的默认值 checked 默认被选中 maxlength 规定输入字段中字符的最大长度value 是表单元素的默认值<form> 用户名: <input type="text" name="username" value="请输入用户名"> </form>name 和 value 是每个表单元素都有的属性值,主要是给后台人员使用name 表单元素的名字,要求单选按钮和复选框要有相同的 name 值checked 属性主要针对于单选按钮和复选框,可以设置默认勾选某个表单元素4. label 标签<label> 标签为 input 元素定义标注(标签)label 标签用于绑定一个表单元素,当点击 label 标签内的文本时,浏览器就会自动将焦点转移到或者选择对应的表单元素上,用来增加用户体验 <label for="username">用户名: </label> <input type="text" name="username" id="username" value="请输入用户名">需要在 label 加上指定 id,input 标签也同样需要标记对应id九、框架frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。重要事项:您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!将页面分为几个部分,分别调用不同的页面左右结构用 cols 属性分割上下结构用 rows 属性分割1. 框架<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html>2. 框架嵌套<html> <frameset rows="25%,75%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%, 75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html> 3. 框架内链接跳转<html> <frameset rows="25%,75%"> <frame src="/example/html/frame_a.html" name="top"> <frameset cols="25%, 75%"> <frame src="/example/html/frame_b.html" name="left"> <frame src="/example/html/frame_c.html" name="right"> </frameset> </frameset> </html><a href="power.html" target="right">链接</a>当点击链接后,链接则会在右侧 frame 中打开。4. 内嵌框架将框架放在一个元素内部,如 div 内部:<div> <iframe src="a.html"> </iframe> </div>十、H51. 语法简单头部声明更加简单,如 <!doctype html> ,以及字符集声明 <meta charset="utf-8">2. 语法更宽松可以省略结束标签li, dt, dd, p, optgroup, option, tr, td, th可以完全省略的标签html, head, body3. 标签语义化增加了很多标签,使标签更加有意义。<header> 头部<nav> 导航栏<article> 文章内容<section> 网页中的一块区域<aside> 侧边栏<footer> 底部4. 新增表单属性placeholder 占位显示required 必填autofocus 自动获取焦点<form action=""> <input type="text" name="username" autofocus="autofocus" required="required" placeholder="请输入用户名"> <input type="submit"> </form>5. H5 新增 input 类型email 限制邮箱 date 日期 week 星期 month 月 time 时间 color 颜色 range 滑块范围 number 数量6. H5 多媒体标签以前网页中嵌入多媒体文件,需要使用 <embed></embed> 标签进行引用:<embed src="video.mp4" type="">embed 属性:autostart = "true/false" 自动播放loop = "正整数/true/false" 循环播放hidden = "true" 设置多媒体控制面板是否隐藏在 H5 中有了新的标签:<audio><video><audio src="audio.mp3" controls autoplay></audio>controls 控制面板autoplay 自动播放loop 循环播放兼容性解决方案<video controls autoplay> <source src="video1.mkv"> <source src="video1.mp4" </video>补充:字体标签HTML 改变文字颜色和字体,建议用CSS改变任何样式<font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font> <p style="color:#FF0000";>Red paragraph text</p> <table bgcolor="red"></table>
2024年07月14日
15 阅读
0 评论
3 点赞