WEB前端学习-基础语法

最新推荐文章于 2023-09-14 20:14:23 发布

qq_38994739

最新推荐文章于 2023-09-14 20:14:23 发布

阅读量485

点赞数 2

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_38994739/article/details/108146040

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

WEB前端学习-基础语法

一、基本语法

所有标记的标准属性：
id ：唯一标识
title：鼠标移到上面提示的文字
class ：css中使用
style：css中使用

1.文本标记

1、标题元素
语法：<hn> </hn> n表示数字1到6，表示一级标题到六级标题。
**特点：字体加粗效果，字体大小变化，上下文之间有空白间距，**独占一行。
属性：align 水平方向的对齐方式
取值：left center right

2、段落元素
语法： 段落元素 
特点：上下文之间有空白间距，字体正常**，独占一行**
属性：align：left center right

3、换行
语法： 或者 

4、水平线
语法：<hr> 或者 <hr/>

5、文本样式标记
 : 加粗 Bold
 :下划线 Underline
 :倾斜 Italics
<s></s> : 删除线 Strikethrough、

6、特殊字符
  ：空格
© ：版权符号
< ： < less than
> ：> greater than
¥ ：￥

7、div 和 span 元素
语法：<div> 内容 </div>
用途：网页布局
特点：独占一行

语法：`<span> 内容 </span>`
作用：包裹文本，自定义样式
特点：多个元素在一行中显示，默认从左到右排列

将元素分成2类：块级元素和行内元素；
块级元素：默认单独成行，从上往下排列。比如：div , p , hn, 列表等
行内元素：默认多个行内元素在一行中显示，从左往右排列。比如：b.u, i, s, span, img, a等
嵌套：一般来说是块级元素去嵌套行内元素，块级元素之间可以相互嵌套，但是p标记不能自己嵌套自己。行内元素之间也可以相互嵌套。

2.图像和链接

1、URL
URL:uniforn resource locator统一资源定位器，俗称路径。
路径表现形式：
1、绝对路径；
2、相对路径；
同级目录：直接引用
3、根相对路径

2、图像
语法：
属性：src，指定图片路径
alt，当图片加载出错时的提示文字
width，设置图片的宽度，以px为单位
height，设置图片的高度，以px为单位

3、链接
语法：内容
属性：href，指定链接地址（相对路径）
target，打开新网页的方式
取值：_blank 从新的标签页中打开
_self 默认值，从自身页面中打开。
特点：字体蓝色下划线，鼠标一上去变小手，点击过后字体变成紫色
比如，图片添加链接

3、列表

作用：将具有相似特征或者具有先后顺序的内容按照从上到下（从左到右）的顺序排列。
组成：由列表类型 和 列表项 组成
	列表类型： 有序列表：<ol> </ol>
						无序列表：<ul> </ul>
	列表项：<li> </li> .list item

1、有序列表
语法：

内容
内容
…

属性：type，定义有序列表排序方式
取值：1 数字，默认值
A 大写字母排序
a 小写字母排序
I 大写罗马数字
i 小写罗马数字
1、无序列表
语法：

内容
内容
…

属性：type，定义无序列表标识类型
取值： disc：实心圆
cricle：空心圆
square：实心方块
none：不显示标识

二、网页标准结构

<!doctype html>
<html>
	<head>`在这里插入代码片`
		<meta> charset="UTF-8" >
		<title> 标题 </.title>
		<style> </style>
 	</head>

		<body>
			<h1 align="center">一级标题</h1>
			<!-- 设置二级标题靠右显示 -->
			<h2 align="right">二级标题 </h2>
			<h3 align="left"> 三级标题 </h3>
			<!-- 段落标记-->
			<p align="center"> 段落标记 </p>
			
			<!--显示尖括号标记-->
			&lt;p&gt;

		</body>
</html>