前端学习-HTML5基础

1 HTML语法规范

1)成对出现,也称为双标签;2)HTML标签都出现在<>里;3)也有一些单标签,例如:<br/>

 标签关系

双标签关系可以分为两类:包含关系和并列关系。

1)包含关系。

<html>

        <body></body>

</html>

2)并列关系。

<head></head>

<body></body>

2 HTML基本结构标签

<html>

        <head>

                <title></title>

        </head>

        <body>

                网页的主要内容

        </body>

</html>

注:网页的基本结构包括html,head,title,body四个基本元素。

3 网页开发工具

visual studio code(安装!)

安装插件(安装后要重启才可以生效)

1)在浏览器中打开预览 open in browser

2)自动重命名配对的HTML/XML标签 Auto Rename Tag

3)追踪至样式 CSS Peek

VSCode 工具生成骨架标签新增代码

1)<!DOCTYPE> 文档类型声明,告诉浏览器使用哪种版本显示网页

<!DOCYTPE html> 指文档使用HTML显示网页,这个标签必须放在文档的最前面!不属于html标签,就是文档类型声明标签

2)<html lang="en"> 表明当前页面的显示语言,其中“en”指英文,“zh-CN”指中文。

3)<meta charset="UTF-8"> 规定HTML文档使用哪种字符编码。‘UTF-8’指万国码。

4 HTML常用标签

1)标题标签 <h1> - <h6> 

标题一共六级选,文字加粗一行显,由大到小依次减,从重到轻随之变。

注:标题都会变粗,且会独占一行,重要性从一级到23456级依次递减。

2)段落标签<p>

代码中的换行符通过浏览器后并不会分段,要想分段只能使用段落标签。同样代码中的多个空格通过浏览器后只会显示成一个空格。

特点:段落和段落之间会留有一定的空隙;文本文字会按照浏览器窗口的大小自动换行。

3)换行标签<br />

强制换行。br 后有个空格才是 / 。

特点:单标签;<br />只是简单的开始新的一行,没有垂直间距,而段落之间会自动插入垂直间距。

4)文本格式化标签(重点记住粗体和斜体,其余可以查)

        粗体 <strong> <b>

                strong比b语义更强烈,推荐使用strong

        斜体 <em> <i>

                em比i语义更强烈,推荐使用em

        删除线 <del> <s>

                del比s语义更强烈,推荐使用del

        下划线 <ins> <u>

                ins比u语义更强烈,推荐使用ins

5)盒子标签 <div> 和 <span>

这两个标签没有语义,就只是盒子,用来装东西。

特点:<div> 一个标签占一行;<span>标签一行可以放多个。

6)图像标签 <img>

单标签。用于定义HTML页面中的图像。

例如:<img src="图像URL" />,src指图片的路径。

图像属性

  • src 图像路径。需要连着图像后缀名。必须要有这个属性!
  • alt 图像替换文本。当图片显示不出来时,会自动展示图像alt中存放的文字。
  • title 提示文本。鼠标放到图像上时提示的文本。
  • width 设置图像的宽度。
  • height 设置图像高度。注:一般宽度和高度只改变一个,另一个会等比例缩放。避免图片失帧。
  • border 设置图片边框属性。eg:border="15"。一般会在CSS里设置图像边框。

注意‼️

1)图像标签可以有多个属性,必须写在标签名的后面。

2)图像属性之间是不分前后顺序的。属性之间必须用空格分割。

3)属性采用键值对的形式,即key="value"

路径

1)目录文件夹:普通文件夹。存放着网页所需要的相关素材。

     注:在vs code新建文件夹时,可以先打开目录文件夹来简化操作。

2)根目录:打开目录文件夹的第一层就是根目录。

3)相对路径:图片相对于HTML页面的位置

  • 同一级路径:在同一个目录下,直接用图片名字即可。
  • 下一级路径/:在下一个目录里。eg.src="images/img.jpg"
  • 上一级路径../:在上一个目录里。eg.src="../img.jpg"

4)绝对路径:从电脑的盘开始。绝对路径的符号\

    注1:绝对路径换个电脑后就会不可使用。所以一般建议写相对路径。

    注2:也可以将完整的网络地址当作绝对路径。

7)超链接标签<a>

语法格式:

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

target默认为"_self",在当前页面打开。将其设置为"_blank"可以新建窗口打开页面。

链接分类:

  • 外部链接。必须以http://开头。
  • 内部链接:网站内部页面之间的相互链接。和引用图片一样,写相对路径即可。
  • 空链接:href="#"
  • 下载链接: href 地址链接的是文件.exe .zip 等压缩包文件形式,会下载这个文件。
  • 网页元素的链接:除了文字,图片、表格等网页中的各种元素都可以添加超链接。
  • 锚点链接:点击链接后,可以快速定位到页面中的某个位置。实现方式:先给指定元素添加链接href="#名字";给想跳转到的元素标签上添加id="名字"。

5 HTML中的注释和特殊字符

1)注释

以<!-- 这里注释-->的形式,快捷键:ctrl+/

2)特殊字符(重点记着空格,大于和小于,其余可以现查)

  • 空格:&nbsp;
  • 小于号<:&lt;
  • 大于号>:&gt;

6 标签下

6.1 表格标签

<table>:定义表格

<tr>:定义表格的行,必须嵌套在table中。

<td>:定义表格中单元格,必须嵌套在tr中。table data 

<th>:表头单元格,里面的文字会居中加粗。table head

1)表格属性:(要写到table标签里)

  • align:设置表格相对对齐方式。属性值:center、left、right
  •  border:设置表格的边框。默认无边框。属性值:1或者""
  • cellpadding:单元格内文字和单元格边框之间的距离。默认为1。
  • cellspacing:单元格和单元格之间的距离,默认为2。
  • width:设置表格宽度
  • height:设置表格高度

2)表格结构标签

<thead>:表格表头区域。包含<th>,不能替换th。

<tbody>:表格主体区域,包括除了表头一行之外的其他行。

注:这两个都包含在table标签里。

3)合并单元格

跨行合并:rowspan="合并单元格的个数"

跨列合并:colspan="合并单元格的个数"

目标单元格(合并代码):跨行上侧为目标单元格,跨列左侧为目标单元格。

4)合并单元格三部曲:

  • 确定跨行还是跨列
  • 找到目标单元格,在其中写上合并代码。eg. <td rowspan="2"></td>
  • 删除多余单元格

6.2 列表标签

列表是用来布局的。

1)无序列表

<ul>
<li><\li>

<\ul>

注1:无序列表之间各个列表项之间没有顺序;

注2:ul标签里面只能放li标签;

注3:li标签里可以放任何标签。 

注4:默认每个列表项之间有小黑点,小黑点是可以改变的,也可以用CSS把它用去掉。

2)有序列表

<ol>
<li><\li>

<\ol>

注1:ol标签里面只能放li标签;

注2:li标签里可以放任何元素;

注3:默认每个列表项之间有数字序号,是可以改变的,也可以用CSS把它用去掉。

3)自定义列表definition list

自定义列表通常用于对术语或名词进行解释和描述。形似大哥领着小弟玩。

<dl>
<dt><\dt> defition title

<dd><\dd> defition data

<\dl>

注1: dl里只能包括dt和dl,形似带路,带头,弟弟。dt和dd里可以包括任意类型标签。

注2: dt和dd个数没有限制,经常是一个dt对应多个dd

6.3 表单标签

表单就是为了收集用户信息。表单主要由表单域、表单控件、提示信息三部分组成。

1)表单域<form>

表单域是一个包含表单元素的区域,它的作用是把表单元素信息提交给服务器。

属性:

  • action:指定接收表单数据的服务器url地址。属性值是URL地址。
  • menthod:提交方式。属性值为GET或POST
  • name:表单域的名字。

2)表单控件

input输入表单元素:用于收集用户信息。input是个单标签。

属性:

  • type属性:决定表单元素的外观。正常文本text,密码password,单选radio,复选框checkbox,提交submit,reset清除表单里的所有数据,button普通按钮,file文件域,可上传文件。
  • name属性:表单元素的名字。当想实现单选和多选时,各个选项的表单名字要用同一个。
  • value属性:表单的值。传入后台时,会把表单的value值传到后台。
  • checked属性:单选按钮和复选框可以设置默认选中某按钮。checked ="checked "
  • maxlength属性:字段中字符的最大长度。

注:name和value是每个表单元素都要有的属性值,主要是给后台人员使用。

<label>标签(增加用户体验)

用于绑定一个表单和文字。点击label标签内容,会自动聚焦到表单元素上。将label标签的for属性和表单元素的id属性设置相同。

eg. <label for="nan">男</label>

<input type="radio" name="sex" id="nan"/>

select下拉表单元素

如果有多个选择让用户选择时。

<select>

<option></option>

</select>
注1: select里至少包含一对option

注2: selected= "selected " 表示当前项目为默认选中项。

textarea 文本域

需要大量多行输入文字时。常用于留言板、评论等。

属性:(仅了解,一般用不到)

  • cols:每行可以输入的字符数
  • rows:可以输入几行

7 查阅文档

推荐网址:

  • 百度
  • W3C/W3school
  • MDN: http://developer.mozilla.org/zh-CN/

8 网页地址栏图标

要想实现网页地址栏里的小图标,需要3步: 

  1. 制作小图标PNG图片
  2. 利用图标转换工具,如:比特虫,将PNG格式的图标转换为48*48的favicon.ico格式的图标
  3. 将图标引入<head></head>页面。一般会放在文件根目录下
/*记得修改文件路径*/
<link rel="shortcut icon" href="favicon.ico" />

9 网站TDK三大标签SEO优化

SEO(搜索引擎优化),指利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

  1. title:网站名(产品名)-网站的介绍(尽量不超过30个字)
  2. description:简要说明网站主要是做什么的。多采用“我们是...”、“我们提供...”等语句。
  3. keyword:页面关键字,搜索引擎的关注点之一。采用关键字1,关键字2,关键字3的样式,一般关键字为6-8个。

    

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值