HTML基础学习(二)

最新推荐文章于 2024-08-12 21:44:16 发布

IT农夫.z

最新推荐文章于 2024-08-12 21:44:16 发布

阅读量167

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/weixin_45189070/article/details/130821726

版权

1. HTML块元素

HTML中，所有的标签都是预定义的，也就是说，所有的标签都有各自的特点属性，根据这些特点，可以将标签分为块级标签和行级标签

块级标签
块级标签编译后在浏览器中默认没有高度，其高度由其添加的内容决定，其宽度默认为屏幕的宽度，也就是说，块级标签默认占一行。
行级标签
行级标签编译后在浏览器中默认没有宽度和高度，其宽高均由添加的内容决定，也就是说，行级标签在其内容不满一行时，不会换行。

2. <div>元素

<div>元素是块级元素，他是可以用于组合其他HTML元素的容器
<div>元素用于定义文档中的分区或节，可以把文档分成独立的不同的部分
<div>标签若不带样式，单独使用，则与段落标签<p>相似，没有特定的含义

3. <span>元素

<span>是行级标签，可用作文本的容器
单独使用时，没有特定的含义
主要用来给一行文字中的某个字设置单独的样式

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}	
</style>
</head>

<body>
	<div class="cities">
		<h2>成长</h2>
		<p>年轻的时候，总想着改变自己去讨好别人，从别人那里寻找存在感。慢慢长大后才明白，只有做自己的时候，才是最可爱最舒服，也才是最值得被爱的。</p>
		<p>When I was young, I always wanted to change myself to please others and find a sense of existence from others. Slowly grow up to understand, only to be yourself, is the most lovely, the most comfortable, is the most worthy of love.</p>
	</div> 
</body>
</html>

效果：
在这里插入图片描述

3. ID属性

ID属性用于为HTML元素指定唯一的id
一个HTML界面中不能存在多个有相同id的元素
id属性用于指向样式表中的特定样式声明。JavaScript也可以使用它来访问和和使用拥有特定id的元素(getElementById())
语法：#id名称{css属性}
id名称对大小写敏感
id必须至少包含一个字符并且不能包含空白字符
id属性还可以用来创建HTML书签

4. 内联框架

iframe：用于在网页内显示网页

<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>
1. 移除边框：
	frameborder="0"

使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

5. JavaScript

JavaScript使HTML界面更具动态性和交互性
实例：

<!DOCTYPE html>
<html>
<body>
	<h1>我的第一段 JavaScript</h1>
	<button type="button"
		onclick="document.getElementById('demo').innerHTML = Date()">
	点击我来显示日期和时间
	</button>
	<p id="demo"></p>
</body>
</html>

6.路径

绝对文件路径：
绝对文件路径是指向一个因特网文件的完整URL：

例如：

<img src="https://www.baidu.com.cn/images/picture.jpg" alt="百度">

相对路径：
相对路径指向了相对于当前页面的文件

<img src="picture.jpg">			picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">	picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg">	picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg">		picture.jpg 位于当前文件夹的上一级文件夹中

7. 头部

<head>元素是所有头部元素的容器，<head>内的元素可以包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等。
<title>标签定义文档的标题，必须有！
title元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

<link> 定义文档与外部资源之间的关系，最常用于链接样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<style> 用于为HTML文档定义样式信息
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta>标签始终位于 head 元素中。

8. 布局

圣杯布局：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        .top{
            width: 100%;
            height: 80px;
            margin-bottom: 10px;
        }
        .middle{
            width: 100%;
            height: 500px;
            margin-bottom: 10px;
        }
        .middle div{
            float: left;
        }
        .middle div:nth-child(1),.middle div:nth-last-child(1){
            width: 30%;
            height: 100%;
            background-color: #339fff;
        }
        .middle div:nth-child(2){
            width: 40%;
            height: 100%;
            background-color: #2279ee;
        }
        .bottom{
            width: 100%;
            height: 80px;
        }
        .color1{
            background-color: #339fff;
        }

    </style>
</head>
<body>
    <!--顶部-->
    <div class="top color1"></div>
    <!--中部-->
    <div class="middle">
        <!--左-->
        <div></div>
        <!--中-->
        <div></div>
        <!--右-->
        <div></div>
    </div>
    <!--底部-->
    <div class="bottom color1"></div>
</body>
</html>

9. 响应式设计

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
- Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
- Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：