20220621学习HTML笔记

2022-06-21 21:34:31 阅读：123 来源： 互联网

标签：20220621 标签单元格笔记表单 HTML 图像链接属性

文本格式化标签

语义	标签
加粗	`<strong>` `<b>`
倾斜	`<em>` `<i>`
删除线	`<del>` `<s>`
下划线	`<ins>` `<u>`

盒子标签布局

<div> 独占一行，大盒子
<span> 一行可以放多个，小盒子

图像标签

<img 属性=... /> 单标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图像不能显示时显示的文字
title	文本	鼠标放到图片上显示的文字
width	像素	图像宽度
height	像素	图像高度（修改一个，等比缩放）
border	像素	边框粗细

注意点

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即Key=“Value”的格式，属性=“属性值。

超链接标签

<a></a> anchor锚，跳转到另一个页面

属性	作用
herf	跳转目标
target	目标窗口的弹出方式, _self为默认值，_blank在新窗口中打开

链接类型

内部链接:网站内部页面之间的相互链接
直接链接:内部页面名称即可，例如<a href=" index.html">首页</a>
空链接：#
下载链接
网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接:点我们点击链接,可以快速定位到页面中的某个位置。
- 在链接文本的href 属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍</h3>

特殊字符

表格

主要用于展示数据

<table>
  <tr>
    <th>表头，会居中加粗</th>
  </tr>
  <tr>
    <td> table data </td>
  </tr>
</table>

属性

结构标签

<thead></thead> 定义表格头部。内部必须有<tr>标签
<tbody></tbody> 定义表格主题
以上标签都放在<table></table>中

合并单元格目标单元格

目标单元格写合并代码

步骤：

先确定是跨行还是跨列合并。
找到目标单元格.写上合并方式=合并的单元格数量。比如: <td colspan= “2”></td>。
删除多余的单元格。

列表

用来布局

无序列表

<ul>
    <li>榴莲</li>
    <li>菠菜</li>
    <li>大米饭</li>
</ul>

并列
<ul></ul>中只能嵌套<li></li>
<li></li>相当于一个容器，可以容纳任何元素
列表的样式属性一般使用CSS来设置

有序列表

<ol></ol> 会自动添加序号

自定义列表

上面有一个小标题，下面的term对小标题进行解释

<dl>
  <dt>关注我们</dt>
  <dd>关注公众号</dd>
  <dd>联系我们</dd>
</dl>

<dl></dl>里面只能包含<dt>和<dd>。
<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

表单

组成

表单域、表单控件（表单元素）、提示信息

标签：20220621,标签,单元格,笔记,表单,HTML,图像,链接,属性
来源： https://www.cnblogs.com/ITBill/p/16398434.html

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

ICode9