0
点赞
收藏
分享

微信扫一扫

网页前端整理(一)

Alex富贵 2022-02-04 阅读 44
前端html

一、HTML

1、HTML概述

HTML(HyperTextMarkupLanguage)就是超文本标记语言,“超文本”就是表示页面可以包含非文字元素,如:图片、链接、音乐等

1.1、基础语法

1.1.1、单标签

  • 无属性单标签
  • 有属性单标签

1.1.2、双标签

  • 无属性双标签
  • 有属性双标签

1.2、整体结构

1.2.1、head

  • title:
    • 页面的名字
    • 页面收藏的名称
  • link
    • 引入css文件
  • script
    • 用来引入js文件或编写js代码

1.2.2、body

  • 想要看到的东西放到body中

2、常用标签

2.1、标题

h1~h6,大小以此递减
自带换行的效果
块级元素

  • PS
    • 加粗只用标题
    • 尽量减少使用h1标签,h1用多了会被搜索引擎拉黑,因为搜索引擎是按标题标签从上到下依次搜索的

2.2、段落标签

p标签,会自动换行
块级元素

2.3、换行标签

单标签,使用<br><be/>其中之一即可

2.4、水平线标签

<hr>单标签
常用属性

  • color 颜色
  • size 粗细
  • width 长度(百分比 或 px)
  • align 对齐方式

2.5、列表标签

2.5.1、无序列表

type的值可选,能改变标号的样式

<ul type="square" >
    <li> 这里是内容1 </li>
    <li> 这里是内容2 </li>
</ul>

在这里插入图片描述

2.5.2、有序列表

type的值也可选,能改变序号的样式

<ol type="1" >
    <li> 这里是内容1 </li>
    <li> 这里是内容2 </li>
</ol>

在这里插入图片描述

2.6、 div & span

2.6.1、div标签(块)

块级元素,用来做页面布局
默认占全部的宽度,有多少内容高度就占多少
可以设置div的宽(width)、高(height)
通过align设置内容的对齐方式

<div style="width:500px; height:100px;" align="center">
    这是一个div 
</div>

2.6.2、span标签(行)

行内元素,不会自动换行
不能设置宽高,有多少内容就占多少空间

<span> 这是一个span </span>

2.7、格式化标签

2.7.1、font

规定文本的字体、字体尺寸、字体颜色

  • color:字体颜色
  • size:字体尺寸
  • face:字体风格
<font color="aqua" size="5" face="楷体">你好</font>

2.7.2、pre

定义预格式化的文本,保留空格和换行符,而文本也会呈现为等宽字体

<pre>Hello World</pre>
&nbsp&nbspHello World

2.7.3、文本标签

  • b:加粗(strong也可以加粗)
  • i:斜体
  • u:下划线
  • del:中划线
  • sub:下标文本
  • sup:上标文本

2.8、a标签

a标签定义超链接,用于从一张页面链接到另一张页面

  • href属性:它指示要链接的目标位置,如果没有href属性,a标签内的内容与普通文本没有区别,也就失去了超链接的功能
  • 跳转到当前页面,那么href的值为#,被链接页面通常显示在当前浏览器窗口中,除非规定了另一个目标(target属性)
  • target
    • _blank:开启新页面显示页面
    • _self:当前页面显示跳转到页面,默认值
  • 作为锚点
    • a标签的name属性<a name="top"></a>
    • 其他标签的id属性值<div id="top"></div>
    • 锚点的使用:<a href="#top"></a>
    • PS:此处的top可以换为任意字符

2.9、图片

<img src=" " alt=" " >

在这里插入图片描述

2.10、表格

table

  • tr:定义表格的行,tr元素包含一个或多个th或td元素
  • td:定义HTML表格中的标准单元格
  • th:定义表格内的表头单元格,th元素内部的文本通常会呈现为居中的粗体文本,而td元素内的文本通常是左对齐的普通文本

常用属性
在这里插入图片描述

  • 合并表格的边框<table border="1" style="border-collapse: collapse;">

tr常用属性
在这里插入图片描述

  • td的colspan和rowspan分别规定单元格横跨的列数和行数
    明天也要加油呀!!!
举报

相关推荐

网页前端(HTML)

网页前端2

网页前端3

前端速成日记一:购物网页

前端跨域整理

前端面经整理

0 条评论