1.1 HTML概述和CSS的引入

天气欲爆

已于 2022-11-05 11:22:10 修改

阅读量253

点赞数 1

文章标签： css html 前端

于 2022-10-16 14:16:31 首次发布

本文链接：https://blog.csdn.net/m0_63576402/article/details/127342408

版权

html概述

1.什么是html

HTML是超文本标记语言(Hyper Text Markup Language)（因为它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)，还可以从一个文件跳转到另一一个文件,与世界各地主机的文件连接(超级链接文本)） , 它是用来描述网页的一种语言。不像c语言一样，HTML不是一种编程语言,而是一种标记语言(markup language)，标记语言是一套标记标签 (markup tag)。

2.html标签

举个例子：

<p>我爱前端</p>

<p>是一个典型的HTML标签
注意事项：
1.由尖括号包围关键词组成
2.通常成对出现，结束标签比开始标签多一个"/"
3.并不是所有的都有对应的结束标签，比如<input>、<img>等

<input type="text" palceholder="请输入内容" class=""/>
<img src="图片的路径.png" alt="没有显示出来的图片" title=“提示文本，鼠标放到图像上时显示的文字” />

3.标签的嵌套

举个例子：

 <div><p><strong>HTML</strong>是一门伟大的语言</p></div>

在这里，div是p的父元素，是strong的祖父元素

4.不同的标签

4.1行内标签和块级标签

（1）行内标签：比如<img>（插入图片）<span>（范围，根据内容显示宽度和高度）<br/>（换行）<a>（超链接标签）
行内标签是按照从左到右进行排序，多个行内标签在一行显示，当一行列宽完成后会自动换行。
（2）块级标签：

<h1></h1>（标题元素）
<p>（段落元素）
<hr/>（水平线标签）
<ul></ul><ol></ol><li></li>（列表标签）
<div>（层标签）
<table></table>（表格标签）······

块级标签是按照从上到下进行排序的，各自成一行
不同之处：
行内元素不能使用width属性，height属性，margin属性，padding属性。但是行内标签可以使用line-height属性来设置内容和边框的高度，不能设置行高。
块状元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文本和其他行内元素。

4.2音频和视频标签

音频/视频标签<audio> 和 <video>

4.3列表标签ul、ol和dl

<ul>无序列表，默认是竖排，带远点

<ul>
<li>吃饭
<li>写作业
<li>看电视
<li>跑操
</ul>

<ol>有序列表

<ol>
<li>吃饭
<li>写作业
</ol>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

4.4 图像标签和路径

4.4.1相对路径

以引用文件的位置为参考基础，从而建立出来的目录路径，简单的说就是图片相对于HTML页面的位置

路径分类	符号	相对路径
同一级路径		`<img src="文件名.jpg" />`
上一级路径		`<img src="../文件名.jpg" />`
下一级路径		`<img src="images/文件名.jpg" />`

4.4.2绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的
例如：

<img src="C:\Users\Zhou\Pictures\鬼刀\小提琴.jpg" />

记得用open in the browser打开

4.5 链接标签

<a href="http://www.w3school.com.cn/">Visit W3School</a>

4.6 表格标签

<table>
	<tr>
		<td>单元格中的文字</td>
	</tr>
</table>

<table>是定义表格的标签
<tr>定义行，必须镶嵌在table标签内
<td>定义单元格，必须嵌套在tr标签内

更多的标签可以看W3CSchool文档

5.完整的html文件

快捷键英文!自动生成部分标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是文件名</title>
    <link type="text/css" src="文件名.css">
    <script type="text/javascript" src="文件名.js"></script>
    <style>
    p{
    color:pink
    }
    </style>
</head>
<body>
    <p>我是块级标签</p>
    <a>我是行内标签</a>
    <span>我也是行内标签</span>
    <script type="text/javascript">
	document.write("Hello World!")
	</script>//引入javascript
</body>
</html>

6.引入CSS

（1）内部样式：
在head标签添加style标签

<style tyle="text/css">
	p{
		color:red;
	}
</style>

<p>Hello World</p>

（2）外部样式：
在head标签添加link标签，在属性href中填写新建css文件路径–外部样式表
例如：

<link rel="stylesheet" href="index.css">

（3）内联样式：
直接在需要修饰的标签中添加属性style，然后进行修饰

<div style="background-color:#000000"></div>

三大样式对同一属性进行操作的解析规则
（1）内联样式的权重最大
（2）外部样式和内部样式–就近原则
说明：谁离结构近显示谁的修饰结果
例如：

<style type="text/css">
	div{
	background-color:red
	}
</style>
<link rel = "stylesheet" href="index.css">

div{
background-color:pink;
}

结果：
在这里插入图片描述
注：建议先使用外部样式，找不到对应的CSS再使用内联样式
作业：写一个简单的登录页面
提示：使用form和input标签，加入CSS会使页面更加美观哦！

天气欲爆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1.1 HTML概述和CSS的引入

html概述和css的引入
复制链接

扫一扫