html5——前端笔记 我会带着你远行 2023-09-26 17:49 73阅读 0赞 #### html #### * 一、html5 * * 1.1、理解html结构 * 1.2、h1 - h6 (标题标签) * 1.3、p (段落和换行标签) * 1.4、br 换行标签 * 1.5、文本格式化 * 1.6、div 和 span 标签 * 1.7、img 图像标签 * 1.8、a 超链接标签 * 1.9、table表格标签 * * 1.9.1、表格标签 * 1.9.2、表格结构标签 * 1.9.3、合并单元格 * 1.10、列表 * * 1.10.1、ul无序列表 * 1.10.2、ol有序列表 * 1.10.3、自定义列表 * 1.11、表单标签 * * 1.11.1、form 表单域 * 1.11.2、input 表单元素 * 1.11.3、label 标签 * 1.11.4、select表单元素 * 1.11.5、textarea 表单元素 * 1.12、注释和特殊字符 ## 一、html5 ## ### 1.1、理解html结构 ### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 最简单的html页面 </body> </html> html页面: `<!DOCTYPE>`不是一个 HTML 标签,它就是 文档类型声明标签,这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页 1. 声明位于文档中的最前面的位置,处于 标签之前。 2. 不是一个 HTML 标签,它就是 文档类型声明标签。 `lang`语言种类,用来定义当前文档显示的语言。 1. en定义语言为英语 2. zh-CN定义语言为中文 `<meta charset=" UTF-8" />`字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量 统一写成标准的 “UTF-8”,不要写成 “utf8” 或 “UTF8”。 ![在这里插入图片描述][4ac234cabb6940529897b634f13f780e.png] ![在这里插入图片描述][d3818ef8cccc4a06892448e1176cd563.png] ### 1.2、h1 - h6 (标题标签) ### 作为标题使用,并且依据重要性递减。 特点: 1. 加了标题的文字会变的加粗,字号也会依次变大。 2. 一个标题独占一行。 代码示例: ![在这里插入图片描述][1350c9eb83f54e489cafce844f5ccc11.png] ### 1.3、p (段落和换行标签) ### `<p>`标签用于定义段落,它可以将整个网页分为若干个段落。 特点: 1. 文本在一个段落中会根据浏览器窗口的大小自动换行。 2. 段落和段落之间保有空隙。 代码示例: ![在这里插入图片描述][61dbc3608a1a4c50850140b840f6d4e2.png] ### 1.4、br 换行标签 ### `<br />`强制换行。 特点: 1. `<br />` 是个单标签。 2. `<br />`标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。 代码示例:两个换行 ![在这里插入图片描述][3b051413d84e4c1ab66214577b84b56a.png] ### 1.5、文本格式化 ### 在网页中,有时需要为文字设置**粗体**、*斜体* 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。 标签语义: 突出重要性, 比普通文字更重要. <table> <thead> <tr> <th>语义</th> <th>标签</th> </tr> </thead> <tbody> <tr> <td>加粗</td> <td><code><strong><strong/></code></td> </tr> <tr> <td>倾斜</td> <td><code><em><em/></code></td> </tr> <tr> <td>删除线</td> <td><code><del><del/></code></td> </tr> <tr> <td>下划线</td> <td><code><ins><ins/></code></td> </tr> </tbody> </table> ![在这里插入图片描述][24486d8e5c3b4c21990b577af7e3bbc4.png] ### 1.6、div 和 span 标签 ### `<div>` 和 `<span>` 是没有语义的,它们就是一个盒子,用来装内容的。 特点: 1. `<div>`标签用来布局,但是现在一行只能放一个`<div>`大盒子 2. `<span>` 标签用来布局,一行上可以多个`<span>`小盒子 ![在这里插入图片描述][999e27a8a1a84df4a4908ba008c1ec0a.png] ### 1.7、img 图像标签 ### `<img>` 标签用于定义 HTML 页面中的图像。 <img src="图像URL" /> 属性: <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>str</td> <td>图片路径</td> <td>必须属性</td> </tr> <tr> <td>alt</td> <td>文本</td> <td>替换文本。图像不能显示的文字</td> </tr> <tr> <td>title</td> <td>文本</td> <td>提示文本。鼠标放到图像上,显示的文字</td> </tr> <tr> <td>width</td> <td>像素</td> <td>设置图像的宽度</td> </tr> <tr> <td>height</td> <td>像素</td> <td>设置图像的高度</td> </tr> <tr> <td>border</td> <td>像素</td> <td>设置图像的边框粗细</td> </tr> </tbody> </table> 代码示例: ![在这里插入图片描述][ae8cb4b3eea2481383ffc64a033058b6.png] **相对路径** 与 **绝对路径** `相对路径`:以引用文件所在位置为参考基础,而建立出的目录路径。 ![在这里插入图片描述][b8dd48751b7c47129eddd3d04afd87d5.png] `绝对路径`:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。 例如,“D:\\web\\img\\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。 ### 1.8、a 超链接标签 ### <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> <table> <thead> <tr> <th>属性</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>href</td> <td>用于指定链接目标的url地址,(必须属性) 当为标签应用href属性时,它就具有了超链接的功能</td> </tr> <tr> <td>target</td> <td>用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。</td> </tr> </tbody> </table> **链接分类:** 1. a标签 target 打开方式有如下: \_blank:新窗口打开。 \_parent:在父窗口中打开链接。 \_self:默认,当前页面跳转。 \_top:在当前窗体打开链接,并替换当前的整个窗体(框架页)。 2. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。 3. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href=“index.html”> 首页 。 4. 空链接: 如果当时没有确定链接目标时,< a href=“\#”> 首页 。 5. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。 6. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接. 7. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. * 在链接文本的 href 属性中,设置属性值为 \#名字 的形式,如`<a href="#two"> 第2集 </a>` * 找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:`<h3 id="two">第2集介绍</h3>` 代码示例: ![在这里插入图片描述][1619de43c58b4315bf700106ba4d6207.png] ### 1.9、table表格标签 ### #### 1.9.1、表格标签 #### <table align="center" border="1"> <!-- 表头--> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <!-- 数据--> <tr> <td>何某某</td> <td>23</td> <td>男</td> </tr> <tr> <td>某某何</td> <td>23</td> <td>女</td> </tr> </table> ![在这里插入图片描述][1c81563b9b9b41b6a4fe318046c68efa.png] 1. `<table> </table>`是用于定义表格的标签。 2. `<tr> </tr>` 标签用于定义表格中的行,必须嵌套在 `<table> </table>`标签中。 3. `<td> </td>`用于定义表格中的单元格,必须嵌套在`<tr></tr>`标签中。 4. 字母 td 指表格数据(table data),即数据单元格的内容。 5. `<th>`标签表示 HTML 表格的表头部分(table head 的缩写),一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示. **表格属性:** 表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置. ![在这里插入图片描述][d8f6bd43825741bda8aab8d4b9017fbc.png] #### 1.9.2、表格结构标签 #### 因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分。 在表格标签中,分别用:`<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域`. 这样可以更好的分清表格结构 ![在这里插入图片描述][c629935f947e410195954fa089002ea8.png] 代码示例: <table align="center" border="1"> <!-- 表头--> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <!-- 数据--> <tbody> <tr> <td>何某某</td> <td>23</td> <td>男</td> </tr> <tr> <td>某某何</td> <td>23</td> <td>女</td> </tr> </tbody> 1. `<thead></thead>`:用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。 2. `<tbody></tbody>`:用于定义表格的主体,主要用于放数据本体 。 3. 以上标签都是放在`<table></table>`标签中。 #### 1.9.3、合并单元格 #### 合并单元格方式: * **跨行合并:** rowspan=“合并单元格的个数” ,最上侧单元格为目标单元格, 写合并代码 * **跨列合并:** colspan=“合并单元格的个数”,最左侧单元格为目标单元格, 写合并代码 ![在这里插入图片描述][9cbd835496ca4b53a0441d908b0c253e.png] ![在这里插入图片描述][899be7f98d1243dfbd10ee68353666db.png]代码示例:`<td rowspan="2">何某某</td>` ![在这里插入图片描述][5c1e7207909a4d388ab69e15cd4063c5.png] ### 1.10、列表 ### #### 1.10.1、ul无序列表 #### `<ul>` 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用`<li>` 标签定义无序列表的基本语法格式如下: ![在这里插入图片描述][43693c272b694ad9b8e011ca5e4618e2.png] 1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。 2. `<ul></ul>`中只能嵌套 `<li></li>`,直接在 `<ul></ul>` 标签中输入其他标签或者文字的做法是不被允许的。 3. `<li> 与 </li>` 之间相当于一个容器,可以容纳所有元素。 4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。 #### 1.10.2、ol有序列表 #### 有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。 在 HTML 标签中,`<ol>`标签用于定义有序列表,列表排序以数字来显示,并且使用`<li>` 标签来定义列表项。 有序列表的基本语法格式如下: ![在这里插入图片描述][88cf913e8a604c48a0d714f06bf2eb61.png] 1. `<ol></ol>`中只能嵌套`<li></li>`,直接在`<ol></ol>`标签中输入其他标签或者文字的做法是不被允许的。 2. `<li>`与 `</li>`之间相当于一个容器,可以容纳所有元素。 3. 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。 #### 1.10.3、自定义列表 #### 自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。 使用场景 如下面 ![在这里插入图片描述][3175b7eee09242fcb1d1cd8bda9d0301.png]代码示例: ![在这里插入图片描述][9759ee0744274f899477008c1325673c.png] 1. `<dl></dl>`里面只能包含 `<dt>` 和 `<dd>`。 2. `<dt>` 和 `<dd>`个数没有限制,经常是一个`<dt>` 对应多个`<dd>`。 ### 1.11、表单标签 ### #### 1.11.1、form 表单域 #### 表单域是一个包含表单元素的区域。 ![在这里插入图片描述][43e91eb62dd94496a0264e4833025f89.png] 在 HTML 标签中,`<form>`标签用于定义表单域,以实现用户信息的收集和传递。 `<form>` 会把它范围内的表单元素信息提交给服务器 <form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form> **常用属性:** <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>url地址</td> <td>用于指定接收并处理表单数据的服务器程序的url地址</td> </tr> <tr> <td>method</td> <td>get / post</td> <td>用于设置表单数据的提交方式,其取值为get 或 post</td> </tr> <tr> <td>name</td> <td>名称</td> <td>用于指定表单的名称,以区分同一个页面中的多个表单域</td> </tr> </tbody> </table> #### 1.11.2、input 表单元素 #### 在 `<input>` 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。 <input type="属性值" /> type 属性的属性值及其描述如下: <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>button</td> <td>定义可点击按钮</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义输入字段 和 ”浏览“ 按钮,供文件上传</td> </tr> <tr> <td>hidden</td> <td>定义隐藏的输入字段</td> </tr> <tr> <td>image</td> <td>定义图像形式的按钮</td> </tr> <tr> <td>password</td> <td>定义密码字段,该字段中的字符被掩码</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>reset</td> <td>定义重置按钮。重置按钮会清除表单中的所有数据</td> </tr> <tr> <td>submit</td> <td>定义提交按钮。提交按钮会把表单数据发送到服务器</td> </tr> <tr> <td>text</td> <td>定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符</td> </tr> <tr> <td>color</td> <td>从拾色器中选取颜色</td> </tr> <tr> <td>date</td> <td>定义 date 日期控件,可选择年月日</td> </tr> <tr> <td>datetime-local</td> <td>定义 datetime 日期控件,可选择年月日时分秒</td> </tr> <tr> <td>time</td> <td>定义用于输入时间的控件,可选时分秒</td> </tr> <tr> <td>email</td> <td>定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证)</td> </tr> <tr> <td>number</td> <td>定义用于输入数字的字段(您可以设置可接受数字的限制)</td> </tr> <tr> <td>range</td> <td>定义用于精确值不重要的输入数字的控件(比如 slider 控件)</td> </tr> </tbody> </table> 除 type 属性外,标签还有其他很多属性,其常用属性如下: <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>由用户自定义</td> <td>定义input元素的名称</td> </tr> <tr> <td>value</td> <td>由用户自定义</td> <td>规定input元素的值</td> </tr> <tr> <td>checked</td> <td>checked</td> <td>规定此input元素首次加载时应当被选中</td> </tr> <tr> <td>maxlength</td> <td>正整数</td> <td>规定输入字段中的字符的最大长度</td> </tr> </tbody> </table> 1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用. 2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值. 3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素. 4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用. 代码示例: ![在这里插入图片描述][7566d9afb3724ed79efd57be17ac65ee.png] #### 1.11.3、label 标签 #### `<label>`标签为 input 元素定义标注(标签)。 `<label>` 标签用于绑定一个表单元素, 当点击 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验 <label for="sex">男</label> <input type="radio" name="sex" id="sex" /> 核心:`<label>` 标签的 for 属性应当与相关元素的 id 属性相同 代码示例: ![在这里插入图片描述][d0fcd613e9e24c3c81b6fb2d346bb789.png] #### 1.11.4、select表单元素 #### 使用场景: 在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用`<select>`标签控件定义下拉列表。 <select> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> 代码示例: ![在这里插入图片描述][5a7c38ac0bc84816ac86ff3a7d6bf39b.png] 1. 中至少包含一对 。 2. 在 中定义 selected =“ selected " 时,当前项即为默认选中项。 #### 1.11.5、textarea 表单元素 #### 使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 `<textarea>` 标签。 在表单元素中,`<textarea>` 标签是用于定义多行文本输入的控件。 使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。 <textarea rows="3" cols="20"> 文本内容 </textarea> 1. 通过 标签可以轻松地创建多行文本输入框。 2. cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。 ### 1.12、注释和特殊字符 ### html中注释:以`<!--”开头,以“ -->`结束。 `<!-- 注释语句 -->` 快捷键: ctrl + / 特殊字符: ![在这里插入图片描述][9f330d0e04ee4b6896e3cb3f8f1c24b9.png] [4ac234cabb6940529897b634f13f780e.png]: https://img-blog.csdnimg.cn/4ac234cabb6940529897b634f13f780e.png [d3818ef8cccc4a06892448e1176cd563.png]: https://img-blog.csdnimg.cn/d3818ef8cccc4a06892448e1176cd563.png [1350c9eb83f54e489cafce844f5ccc11.png]: https://img-blog.csdnimg.cn/1350c9eb83f54e489cafce844f5ccc11.png [61dbc3608a1a4c50850140b840f6d4e2.png]: https://img-blog.csdnimg.cn/61dbc3608a1a4c50850140b840f6d4e2.png [3b051413d84e4c1ab66214577b84b56a.png]: https://img-blog.csdnimg.cn/3b051413d84e4c1ab66214577b84b56a.png [24486d8e5c3b4c21990b577af7e3bbc4.png]: https://img-blog.csdnimg.cn/24486d8e5c3b4c21990b577af7e3bbc4.png [999e27a8a1a84df4a4908ba008c1ec0a.png]: https://img-blog.csdnimg.cn/999e27a8a1a84df4a4908ba008c1ec0a.png [ae8cb4b3eea2481383ffc64a033058b6.png]: https://img-blog.csdnimg.cn/ae8cb4b3eea2481383ffc64a033058b6.png [b8dd48751b7c47129eddd3d04afd87d5.png]: https://img-blog.csdnimg.cn/b8dd48751b7c47129eddd3d04afd87d5.png [1619de43c58b4315bf700106ba4d6207.png]: https://img-blog.csdnimg.cn/1619de43c58b4315bf700106ba4d6207.png [1c81563b9b9b41b6a4fe318046c68efa.png]: https://img-blog.csdnimg.cn/1c81563b9b9b41b6a4fe318046c68efa.png [d8f6bd43825741bda8aab8d4b9017fbc.png]: https://img-blog.csdnimg.cn/d8f6bd43825741bda8aab8d4b9017fbc.png [c629935f947e410195954fa089002ea8.png]: https://img-blog.csdnimg.cn/c629935f947e410195954fa089002ea8.png [9cbd835496ca4b53a0441d908b0c253e.png]: https://img-blog.csdnimg.cn/9cbd835496ca4b53a0441d908b0c253e.png [899be7f98d1243dfbd10ee68353666db.png]: https://img-blog.csdnimg.cn/899be7f98d1243dfbd10ee68353666db.png [5c1e7207909a4d388ab69e15cd4063c5.png]: https://img-blog.csdnimg.cn/5c1e7207909a4d388ab69e15cd4063c5.png [43693c272b694ad9b8e011ca5e4618e2.png]: https://img-blog.csdnimg.cn/43693c272b694ad9b8e011ca5e4618e2.png [88cf913e8a604c48a0d714f06bf2eb61.png]: https://img-blog.csdnimg.cn/88cf913e8a604c48a0d714f06bf2eb61.png [3175b7eee09242fcb1d1cd8bda9d0301.png]: https://img-blog.csdnimg.cn/3175b7eee09242fcb1d1cd8bda9d0301.png [9759ee0744274f899477008c1325673c.png]: https://img-blog.csdnimg.cn/9759ee0744274f899477008c1325673c.png [43e91eb62dd94496a0264e4833025f89.png]: https://img-blog.csdnimg.cn/43e91eb62dd94496a0264e4833025f89.png [7566d9afb3724ed79efd57be17ac65ee.png]: https://img-blog.csdnimg.cn/7566d9afb3724ed79efd57be17ac65ee.png [d0fcd613e9e24c3c81b6fb2d346bb789.png]: https://img-blog.csdnimg.cn/d0fcd613e9e24c3c81b6fb2d346bb789.png [5a7c38ac0bc84816ac86ff3a7d6bf39b.png]: https://img-blog.csdnimg.cn/5a7c38ac0bc84816ac86ff3a7d6bf39b.png [9f330d0e04ee4b6896e3cb3f8f1c24b9.png]: https://img-blog.csdnimg.cn/9f330d0e04ee4b6896e3cb3f8f1c24b9.png
还没有评论,来说两句吧...