【HTML】重点知识内容~快速上手

推荐前端学习路线如下:

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架(Vue、React)、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。

HTML基本结构:



      根

      头部  放置页面相关信息

      身体  放置内容

<title>     标题</code></pre> 
  <h1>网页结构展示:</h1> 
  <pre><code class="language-html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- meta  元  charest 字符集   utf-8 字符编码 -->
		<title>
		
	
	
		【HTML】重点知识内容~快速上手
	

常用标签:

h1~h6

表示一级到六级标签 文本标题标签自带加粗,有自己的文本大小,并且独占一行,有默认间距

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

p

标识一个段落(段落与段落之间有段间距);

默认情况,在网页上,页面上的内容不会按照我们写的代码进行换行。`回车` 会被渲染成一个 `空格`;

这是一段文字

这是一段文字

img

image的缩写,img是一个单标签,功能是在一个网页上展示一个图片。

属性

  • src
    source的缩写,表示图片的源,在src可以设置图片地址
  • alt
    当图片加载失败时显示对应的alt中的文本内容
  • title
    当鼠标放在图片上时,显示一段提示文字
  • width 宽
  • height 高

src

可以是绝对路径,也可以是相对路径

  • 绝对路径
    可以使用电脑中的文件的路径 E:\H5\02_HTML\代码\xxx.jpg
    也可以使用网络路径 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png 未来我们的网页上,最后上线,几乎都是网络地址
  • 相对路径
    一般情况下,我们在做静态页面时,页面中的背景图,图标等不常更改的资源。一般存放在项目中,做相对路径引入。

相对路径记住两个概念 ./ 和 ../,分别表示当前目录和上一级目录。一般我们在正常的项目结构中。

推荐一个使用方法,在src中直接输入 ./ 接下来根据提示选择对应的文件夹及对应的文件

- 项目文件夹
  - css
  - img
  - js
  - 网页1.html
  - 网页2.html

大小设置

我们可以给图片添加width和height两个属性,设置图片的宽高

  • 数字
  • 百分比

注意!!!宽高只要设置一边,就会等比缩放,如果都设置,除非都是等比例缩放,否者会变形

图片加载失败时显示的文字

文字的样式属性(强调属性)

em i

可以让文字倾斜,em表示强调,i表示文字斜体。在项目中,很多人把 i 作为图标展示的标签。

stong b

可以让文字加粗,stong表示强调,b表示文字加粗。

br

可以在网页中实现换行,就像是一个回车。
如果我们在项目开发中,主动频繁使用 br,说明写的有问题

hr

分割线,在网页上实现一条横线,也很少使用

倾斜
倾斜
加粗
加粗


特殊标签:

23   上标
02   下标
     删除线
         下划线
          删除线

特殊符号

    空格
>     大于号
<     小于号
©   版权

a

超链接,在网页上,存在着很多的超链接。一定要会用

属性

  • href 必填属性
    超链接跳转路径的设置,可以是网址,也可以是相对路径
  • target 设置窗口的打开方式; _blank 页面打开时在新的窗口中打开,如果不设置,则在当前窗口打开; _self 默认值,打开本窗口
  • title
    当鼠标放在超链接上时,显示一段提示文字
超链接
超链接

列表

  • 有序列表
  • 无序列表
  • 定义列表

无序列表在网页中应用最多

有序列表

type类型:

type="A/a/I/i/1"

start="4"

定义开始位置,属性值必须是数字。

无序列表

type类型:

type="disc" 实心圆

type="circle" 空心圆

type="square"  方形

type="none"   没有

定义列表

标题 关键词(可以插图片和文本)
对内容的详细解释

表格(table)

这是一个重要的标签,但是前期我们所做的面向用户的网站中,不常用。

插件:表格宽*高=table>tr*n>td*n

在写表格时,thead , tbody , tfoot 可以省略不写。

表格的属性

-width=""            表格的宽度

-height=""           表格的高度

-border=""           表格的边框

-bordercolor=""      表格边框的颜色

-bgcolor=""          背景颜色

-cellspacing=""      单元格之间的间距

-cellpadding=""      内容到边框的间距

-aligen=""  left  center  right     水平对齐方式  

-valign="" top bottom  middle  basline    垂直对齐方式

跨行

如果我们想让某一个单元格,跨多行,给这个td添加 `rowspan` 可以实现跨行操作

-rowspan="所要合并单元格的行数"   合并行

跨列

如果我们想让某一个单元格,跨多列,给这个td添加 `colspan` 可以实现跨列操作

-cowspan="所要合并单元格的列数"   合并列

form表单

表单标签未来不太常用,因为form已经逐渐被ajax替代了。但是我们前期写页面时,还是要使用

我们应该把所有的表单内元素包裹在一个form中(非必须)

method 方式,方法,定义表单提交的方法。

get是获取

method="get" 从服务器上获取数据,在数据传输的过程中,用可以在地址栏上看到过程,默认传递方式,安全性比较低。

post 是传递数据

method="post" 向服务器传送数据,在数据传递过程,用户在地址栏上看不到,安全性比较高。

action设置数据传递之后给谁?

input(行内块、置换元素)

input有很多种形态,需要通过type属性进行控制

type

  • text
    文本输入框,最常用,让用户在文本框中输入我们想要获取的内容
  • password
    密码,让文本以密文显示(不安全)
  • radio
    单选(必须加一个name属性,且同组的属性值必须一样),多个选项只选其一时使用,如性别
  • checkbox
    多选,当有多个选项需要选择时,如爱好
  • submit
    提交按钮,自动显示提交两个字,可以通过value修改
  • reset
    重置按钮,自定显示重置两个字,可以通过value修改
  • button
    普通按钮,没有功能,需要通过value配置显示文本
  • file
    文件上传,可以进行本地文件的上传功能

value

一般情况下,value用来获取对应用户输入的值,用来帮助系统显示内容。

name

如果我们要使用表单提交,则所有的表单内元素都需要加name属性

    点击文字即可选中
       方便修改文本样式

placeholder

设置提示信息

button

普通按钮,如果把button放在表单里,则button自动会有提交功能


            两种的作用相同

select > option

下拉选择框,需要用select包裹多个option

textarea

文本域,用于输入多行文本时使用

表单内元素的状态

  • blur
    失去焦点
  • focus
    获取焦点
  • checked 给radio和checkbox添加,用于设置对应选项的选中状态,添加则表示选中
  • selected 给option添加,用于设置默认被选中的选项
  • readonly 只读,添加到输入框,无法修改内容,只能查看
  • disabled 添加到元素上,则对应元素禁用,样式变灰

页面划分

用来划分页面区域的
修饰独立小部分内容

两者没有固定的格式表现。对他应用样式(CSS)时,他才会产生视觉上的变化。

【HTML】重点知识内容~快速上手_第1张图片

你可能感兴趣的:(HTML,笔记合集,前端,html,javascript)