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

推荐前端学习路线如下:

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

HTML基本结构:

<!-- doc document 文档  type 类型   html hyper text markup language 超文本标记语言 -->

<html></html>      根

<head></head>      头部  放置页面相关信息

<body></body>      身体  放置内容

<title><title>     标题

网页结构展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- meta  元  charest 字符集   utf-8 字符编码 -->
		<title></title>
		
	</head>
	<body>
		【HTML】重点知识内容~快速上手
	</body>
</html>

常用标签:

h1~h6

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

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

p

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

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

<p>这是一段文字</p>

<p>
  这是一段文字
</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两个属性,设置图片的宽高

  • 数字
  • 百分比

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

<img src="图片地址" alt="图片加载失败时显示的文字" title="鼠标悬停后显示的内容" width="100" height="100"/>

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

em i

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

stong b

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

br

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

hr

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

<em>倾斜</em>
<i>倾斜</i>
<strong>加粗</strong>
<b>加粗</b>
<br>
<hr>

特殊标签:

2<sup>3</sup>   上标
0<sub>2</sub>   下标
<del></del>     删除线
<u></u>         下划线
<s><s>          删除线

特殊符号

&nbsp   空格
&gt     大于号
&lt     小于号
&copy   版权

a

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

属性

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

列表

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

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

有序列表

<ol type="" start="">
  <li></li>
  <li></li>
  <li></li>
</ol>

type类型:

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

start="4"

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

无序列表

<ul type="">
  <li></li>
  <li></li>
  <li></li>
</ul>

type类型:

type="disc" 实心圆

type="circle" 空心圆

type="square"  方形

type="none"   没有

定义列表

<dl>
  <dt>标题  关键词(可以插图片和文本)</dt>
  <dd>对内容的详细解释</dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
<dl>

表格(table)

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

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

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

  </tfoot>
</table>

在写表格时,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中(非必须)

<form method="post"></form>

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

get是获取

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

post 是传递数据

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

<form action=""></form>

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

 

input(行内块、置换元素)

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

<form>
  <input type="text">
</form>

type

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

value

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

name

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

<input type="radio" name="sex" id="qita"><label for="qita">不明</label>    点击文字即可选中
<label for=""><input type="radio" name="sex" checked>男</label>       方便修改文本样式

placeholder

设置提示信息

button

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

<button>按钮</button>
<input type="button">            两种的作用相同

select > option

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

<select>
  <option value="123">选项2</option>
  <option value="123">选项3</option>
  <option value="123">选项1</option>
  <option value="123">选项4</option>          选项显示在浏览器,123是提交给服务器的数据
</select>

textarea

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

<textarea></textarea>

表单内元素的状态

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

 

页面划分

<div>用来划分页面区域的</div>
<span>修饰独立小部分内容</span>

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

 

 

55361c7d731b45f2b1899a68e8a598aa.jpeg

 

 

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旺旺大力包

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值