ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

html学习笔记

2022-06-30 09:33:42  阅读:148  来源: 互联网

标签:控件 定义 表格 标签 笔记 表单 学习 html 列表


一些标签

文本格式化标签

在网页中,有时需要为文本设置粗体、斜体或下划线效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。

标签 显示效果
<b></b> <strong></strong> 文字以 粗体 方式显示(XHTML 推荐使用 strong)
<i></i> <em></em> 文字以 斜体 方式显示(XHTML 推荐使用 em)
<s></s> <del></del> 文字以 加删除线 方式显示(XHTML 推荐使用 del)
<u></u> <ins></ins> 文字以 加下划线 方式显示(XHTML 不赞成使用 u)

表格标签

创建表格

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>    
    ...
</table>
  1. table 用于定义一个表格。

  2. tr 用于定义表格中的一行,必须嵌套在 table 标签中,在 table 中包含几对 tr,就有几行表格。

  3. td 用于定义表格中的单元格,必须嵌套在 标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。

注意:

1. <tr></tr> 中只能嵌套<td></td>
2.<td></td> 标签,他就像一个容器,可以容纳所有的元素

表格属性

属性名 含义 常用属性值
border 设置表格的边框(默认 border =“0” 无边框) 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2像素)
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素)
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right

表头标签

表头一般位于表格的第一行或第一列,其文本加粗居中。

设置表头:只需用表头标签 替代相应的单元格标签 即可。

表格结构

<table>
    <thead>表格的头部</thead>
    <tbody>表格的主体</tbody>
    <tfoot>表格的页脚(有兼容性问题)</tfoot>
</table>

必须位于

标签中,一般包含网页的 logo 和导航等头部信息。

位于
标签中,一般包含网页中除头部和底部之外的其他内容。

位于
标签中,定义了一组表格中各列的汇总行。

表格标题

表格的标题:caption

定义和用法

caption 元素定义表格标题。

<table>
    <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。我们只能对每一个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

​ 将多个内容合并的时候,就会有多余的东西,把他删除。例如:把3个 td 合并成一个,那就多余了两个,需要删除。

​ 公式: 删除的个数 = 合并的个数 - 1

​ 合并的顺序 先上 先左

特殊字符标签

HTML 为这些特殊字符准备了专门的替代代码

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 amp;
人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2(上标2) &sup2;
³ 立方3(上标3) &sup3;

base 标签

MDN 的解释:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base

base 可以设置整体链接的打开状态

base 写到 <head></head> 之间

把所有链接都默认添加 target="_blank"

target

描述
_self 载入结果到当前浏览器上下文。(该值是元素的默认值)。
_blank 载入结果到一个新的未知名的浏览上下文。
_parent 载入结果到父级浏览上下文(如果当前页是内联框)。如果没有父级结构,该选项的行为和 _self 一样。
_top 载入结果到顶级浏览上下文(浏览上下文是当前上下文的最顶级上下文)。如果没有父级,该选项的行为和 _self 一样。

锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。

创建锚点链接分为两步:

<!-- 1. 使用“<a href="#id名">链接文本</a>”创建链接文本(被点击的) -->
<a href="#two">链接</a>

<!-- 2. 使用相应的 id 名标注跳转目标的位置 -->
<h3 id="two">第2集</h3>

列表标签

无序列表 ul

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    ......
</ul>

1. `<ul></ul>` 中只能嵌套 `<li></li>` ,直接在 `<ul></ul>` 标签中输入其他标签或者文字的做法是不被允许的。
 2. `<li></li>`之间相当于一个容器,可以容纳所有元素。

有序列表 ol

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表单标签

在网页中,需要跟用户进行交互,收集用户资料,此时也需要表单。

在 HTML 中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件

​ 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息

​ 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域

​ 相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过定义处理表单数据所用程序的 url 地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

input 控件

在上面的语法中,<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义很多其他的属性,其常用属性如下表所示。

属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件的名称
value 由用户自定义 input 控件中的默认文本值
size 正整数 input 控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数

label 标签

label 标签为 input 元素定义标注(标签)。

作用:用于绑定一个表单元素,当点击 label 标签的时候,被绑定的表单元素就会获得输入焦点

绑定元素如下:

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">    

textarea 控件(文本域)

如果需要输入大量的信息,就需要用到 <textarea></textarea> 标签。通过 textarea 控件可以轻松的创建多行文本输入框,其基本语法格式如下:

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

下拉菜单

使用 select 控件定义下拉菜单的基本语法,格式如下:

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    <option>选项5</option>
    ......
</select>

注意

  1. <select></select> 中至少应包含一对 <option></option>。
  2. 在 option 中定义 select=“selected” 时,当前项即为默认选中项。

表单域

在 HTML 中,form 标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

常用属性:

属性 描述
action 在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的 url 地址
method 用于设置表单数据的提交方式,其取值为 get 或 post
name 用于指定表单的名称,以区分同一个页面中的多个表单

注意:每个表单都应该有自己的表单域

标签:控件,定义,表格,标签,笔记,表单,学习,html,列表
来源: https://www.cnblogs.com/frontpen/p/16425656.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有