前端学习随笔之H5


1.<!DOGTYPE>标签

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

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

  1. <!DOGTYPE>声明位于文档中的最前面位置,处于html标签之前。
  2. <!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>```标签用于定义超链接,作用是从一个页面链接到另一个页面。
  1. 链接的语法格式:
<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表示显示的行数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值