前端学习随笔之H5

最新推荐文章于 2024-06-15 11:43:41 发布

Amoricc

最新推荐文章于 2024-06-15 11:43:41 发布

阅读量209

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44244332/article/details/117166622

版权

1.<!DOGTYPE>标签

<!DOGTYPE>表示文档类型说明，作用就是告诉浏览器使用哪种版本的HTML来显示网页

<!DOCTYPE html>

上述代码表示当前页面采取的是HTML5版本来显示网页。
注意：

<!DOGTYPE>声明位于文档中的最前面位置，处于html标签之前。
<!DOGTYPE>不是一个HTML标签，它是文档类型声明标签。

2.lang语言种类

用来定义当前文档显示的语言：

<html lang="en">

简单来说，定义为en就是英文网页，定义为zh-CN则为中文网页。

3.字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。在head标签内，可通过meta标签的charset属性来规定HTML文档应使用何种字符编码。

 <meta charset="UTF-8">

charset常用的值包括:GB2312、BIG5、GBK和UTF-8,，其中UTF-8也被称为万国码，基本包括了全世界所有国家需要用到的字符。没有加上它则会出现乱码。

4.段落标签和换行标签

在HTML标签中，p标签用于定义段落，它可以将整个网页区分为若干个段落。

 <p>我是一个段落标签</p>

特点：
1.文本在一个段落中会根据浏览器啊窗口自动换行。
2. 段落和段落之间保有空隙。

若希望某段文字进行强制换行，就用到了换行标签：<br/>

5.文本格式化标签

文字以特殊的方式显示，标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	使用`<strong>`语义更加强烈
倾斜	`<em></em>`或`<i></i>`	使用`<em>`语义更加强烈
删除线	`<del></del>`或`<s></s>`	使用`<del>`语义更加强烈
下划线	`<ins></ins>`或`<u></u>`	使用`<ins>`语义更加强烈

6.div标签和span标签

<div>和<span>标签是没有语义的，他们就是一个盒子，用来装内容的

 <div>div是division的缩写，表示分割、分区</div>
 <span>span意为跨度、跨距</span>

注意：
<div>是块级元素，一人独占一行而<span>则为行内元素

7.图像标签和路径

7.1 图像标签

<img>标签用于定义HTML页面中的图像。它是一个单标签：

 <img src="" alt="" />

其中src是img标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时的文字
title	文本	提示文本。鼠标放到图像上显示的文字
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像的边框粗细

注意：
设置宽度和高度时，设置其中一个值，另外一个值会进行等比例进行变化。

7.2 相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础而建立的目录路径。例如图片相对于HTML页面的位置
同一级路径，下一级路径用符号“/"，上一级路径用符号” ./“。
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如带有盘符的路径或完整的网络地址

8.超链接标签

```<a>```标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式：

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

其中href为必须属性，用于指定链接目标的url地址；target默认值为_self,_blank为在新窗口打开。
2. 链接可以分为外部链接，内部链接，空连接,下载链接，网页元素链接，锚点链接
其中内部链接是指网站内部之间的相互链接，直接链接内部页面名称即可。
空连接表示没有确定的链接目标，如下表示：

<a href="#">文本或图像</a>//也可将href属性设为javascript:;

下载链接：若href里面地址是一个压缩包或者文件，会将文件下载。
网页元素链接：

<a href=""><img src="" alt=""></a>

锚点链接：点我们的点击链接可快速定位到页面中的某个位置，其步骤如下：
1.在链接文本的href属性中设置属性值为#名字的形式，如：

<a href="#two">第二季</a>

2.找到目标位置标签在里面添加一个id属性为刚才的名字，如:

<h3 id="two">第二季介绍</a>

9.特殊字符

空格：$nbsp; <:$lt; <:&gt; &:&amp; ￥:&yen; ©:&copy;
注册商标:&reg; 摄氏度:&deg; ±:&plusmn; 乘号：&times；
除号:&divide; 平方2:&sup2; 立方3：&sup3;

10.表格标签(重点）

主要作用：用于显示和展示数据，让数据显示规整，可读性好。
基本语法：

<table>
    <tr>
      <td>单元格内的文字</td>
      ...
    </tr>
    ...
  </table>

其中：<table></table>是用于定义表格的标签
<tr></tr>标签用于定义表格中的行，必须嵌套在table内。
<td></td>标签用于定义表格中的单元格，必须嵌套在tr内，字母td指表格数据(table data),即数据单元格的内容，单元格里面可以放入任何元素，文字链接图片等都可以。
表头单元格标签<th></th>表示表格的表头部分，通常位于表格第一行，突出重要性。

表格结构标签：为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分，使用<thead>标签表格的头部区域；<tbody>标签表格的主体区域：

  <table>
    <thead>
      <tr>
        ...
        <th></th>
        ...
      </tr>
    </thead>
    <tbody>
      ...
      <tr>
        ...
        <td></td>
        ...
      </tr>
      ...
    </tbody>
  </table>

表格相关属性：
align：left/center/right 规定表格相对周围元素的对齐方式。
border:1或"" 规定表格单元是否拥有边框，默认为"",表示没有边框。
cellpadding:像素值规定单元边沿与其内容之间的空白，默认1像素。
cellspacing:像素值规定单元格之间的空白，默认2像素。
width：像素值或百分比规定表格的宽度。
注意这些属性都要写到表格标签table里去。

合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”，最上层单元格为目标单元格。
跨列合并：colspan=“合并单元格的个数”，最左侧单元格为目标单元格。

合并单元格步骤：
1.先确定跨行还是跨列，跨行是rowspan,跨列是colspan.
2.找到目标单元格，写上合并方式，写到对应的td标签属性内。
3.注意要删除多余的单元格

11.列表标签(重点）

表格是用来显示数据的，那么列表就是来布局的。列表最大的特点就是整洁，整齐，有序，让布局更加自由。

01.无序列表：

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

无序列表各个列表项之间无顺序级别之分是并列的
02.有序列表

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

ol标签用于定义有序列表，列表排序以数字来显示。
03.自定义列表
自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
dl标签用于定义描述列表(或定义列表)，该标签会与dt标签（定义项目/名字）和dd标签（描述一个项目/名字）一起使用。语法格式如下：

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

12.表单标签(重点）

使用表单是为了收集用户信息，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息三部分构成：
01.表单域
表单域是一个包含表单元素的区域。<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器，语法格式如下：

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

其中action用于指定接受并处理表单数据的服务器程序的url地址。method有get和post两个属性值用于设置表单数据的提交方式。name用于指定表单的名称，以区分同一个页面中的多个表单域。
02、表单元素控件
input输入表单元素
input标签用于收集用户信息，格式如下：

 <input type="属性值" />

在input标签中，type属性有很多种值，根据type的不同值，输入字段有不同的形式。常用的几种如下：

 button:定义可点击按钮 
 checkbox：定义复选框 
 file：定义输入字段和“浏览按钮”供文件上传。
 hidden：定义隐藏的输入字段。
 image：定义图像形式的提交按钮 
 password：定义密码字段 
 radio：定义单选按钮
 reset：定义重置按扭，重置按钮会清楚表单中的所有数据     
 submit：定义提交按钮，会把表单数据发送到服务器 
 text：定义单行的输入字段用户可在其中输入文本，默认为20个字符。

除了type属性之外，input标签还有其他常用属性如下：
name属性: 属性值由用户自定义用来定义元素的名称。注意:单选按钮中必须有相同的名字name才可以实现多选一的效果。复选框也要用相同的name值。
value属性：属性值由用户自定义用来规定input元素的值。
checked属性：属性值为checked 常用来规定此input元素首次加载时应当被选中。
maxlength：属性值为正整数规定输入字段中的最大长度。
label标签：<label>经常和表单元素一起来搭配使用。label标签为input元素定义标注(标签）。
使用场景：label标签用于绑定一个表单元素当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。
核心：label标签的for属性应当与相关元素的id属性相同。
select下拉表单元素
使用场景：在页面中如果有多个选项让用户选择，并且想要节约页面空间时。
语法：

    <select name="" id="">
      <option value="">选项1</option>
      <option value="">选项2</option>
      <option value="">选项3</option>
      ...
    </select>

在option中可定义selected属性，让当前项即为默认选中项。
textarea文本域元素
文本域标签用于输入内容较多的情况，在表单元素中textarea标签用于定义多行文本输入的控件。
语法：

    <textarea name="" id="" cols="30" rows="10">
      文本内容
    </textarea>

其中cols表示每行中的字符数，rows表示显示的行数

Amoricc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习随笔之H5

前端学习随笔之H51.<!DOGTYPE>标签<!DOGTYPE>表示文档类型说明，作用就是告诉浏览器使用哪种版本的HTML来显示网页<!DOCTYPE html>上述代码表示当前页面采取的是HTML5版本来显示网页。注意：<!DOGTYPE>声明位于文档中的最前面位置，处于html标签之前。<!DOGTYPE>不是一个HTML标签，它是文档类型声明标签。2.lang语言种类用来定义当前文档显示的语言：<ht
复制链接

扫一扫