我的个人博客:欢迎来逛逛
使用 如下所示:我们为下面的文章的几块定义了 使用 注意 然后再具有id的标签元素中,我们便可以改变他为指定的样式 id对大小写敏感! id至少包含一个字符,并且不能包含空格 class与id的区别:同一个class可以由多个HTML元素使用,但是一个id只能被页面的唯一一个HTML元素使用 使用id来进行跳转,类似于书签的跳转: 也可以跳转到另一个界面。 在 JavaScript 中使用 id 属性 使用 height和width属性来指定显示的网页的宽度和高度,frameborder来隐藏边框 我们的内联框架是 google.com,然后我们为其设置了一个name,之后在 JavaScript的简单介绍: 文件的相对路径: 使用相对路径是个好习惯。cities
一类,所以我们便可以在中统一设置 他们的类样式,如
.cities
所示
<html>
<head>
<style>
.cities{
background-color: rgb(249, 255, 207);
color: rgb(33, 113, 120);
margin: 20;
padding: 20;
}
style>
head>
<body>
<div class="cities">
<h2>This is the Titleh2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
p>
div>
<div class="cities">
<h2>Parish2>
<p>
Paris is the capital and most populous city of France.
p>
<p>
Situated on the Seine River, it is at the heart of the le-de-France region, also known as the region parisienne.
p>
<p>
Within its metropolitan area is one of the largest population centers in Europe,
with over 12 million inhabitants.
p>
div>
<div class="cities">
<h2>Tokyoh2>
<p>
Tokyo is the capital of Japan,
the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
p>
<p>
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
p>
<p>
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
p>
div>
body>
html>
来定义行内的类,设置此属性,能够为某一行的内容设置样式。
<html>
<head>
<style>
.cities{
background-color: rgb(249, 255, 207);
color: rgb(33, 113, 120);
margin: 20;
padding: 20;
}
.red{
color: red;
}
.yellow{
color: brown;
}
style>
head>
<body>
<div class="cities">
<h2>This is the Titleh2>
<p>
London is the capital city of England.
<span class="red"> is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.span>
p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
p>
div>
<div class="cities">
<h2>Parish2>
<p>
Paris is the capital and most populous city of France.
p>
<span class="red">
Situated on the Seine River, it is at the heart of the le-de-France region, also known as the region parisienne.
span>
<p>
Within its metropolitan area is one of the largest population centers in Europe,
with over 12 million inhabitants.
p>
div>
<div class="cities">
<h2>Tokyoh2>
<p>
Tokyo is the capital of Japan,
the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
p>
<p>
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
p>
<span class="yellow">
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
span>
div>
body>
html>
HTML id属性
id
用于为html指定唯一的id属性。id在html中是唯一的,id属性用于为特定样式表进行样式的设置。id
的写法:前面是一个#
号,后面跟的是id名称
,然后再花括号中定义css属性DOCTYPE html>
<html>
<head>
<style>
#ylh{
background-color:rgb(199, 149, 114);
color: black;
text-align: center;
font-size: 50px;
}
.red{
color: red;
}
style>
head>
<body>
<h1>id属性h1>
<p>设置id属性来指定样式p>
<h2 id="ylh">Londonh2>
<div>
<p>
London is the capital city of England.
<span class="red"> is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.span>
p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Longinus.
p>
div>
body>
html>
<a href="C1">点击跳转到第一章a>
...
<h2 id="C1">
第一章: xxxxx
h2>
....
<a href="C1">点击跳转到第一章a>
<a href="F:\code\html\test2.html#C1">跳转到另一个界面的标签a>
HTML内联框架
在网页内创建网页:
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">iframe>
标签中我们又指定了网页跳转的target,因此最终我们的网站将会在内联框架中显示
<iframe src="https://google.com" name="helloylh" width="500" height="500" frameborder="0">iframe>
<a href="https://helloylh.com" target="helloylh">点击这里a>
HTML Javascript
DOCTYPE html>
<html>
<body>
<h1>我的第一段JavaScripth1>
<button type="button" onclick="document.getElementById('Time').innerHTML = Date()">点击显示时间button>
<p id="Time">p>
body>
html>
我的第一段JavaScript
点击显示时间
标签用来定义客户端脚本,即可以包含脚本语句,也可以通过src属性指向外部脚本文件。
<p id="demo">p>
<script>
document.getElementById('demo').innerHTML = "";
script>
DOCTYPE html>
<html>
<body>
<h1>javascript举例h1>
<p>javascript修改文字p>
<button type="button" onclick="button_function1()">点击我,修改下面的内容button>
<button type="button" onclick="button_function2()">点击这里,修改下面的文字的样式button>
<p id="demo1">这是原来的内容!p>
<p id="demo2">这是一段话p>
<script>
function button_function1(){
document.getElementById('demo1').innerHTML = "";
}
function button_function2(){
document.getElementById('demo2').style.fontSize = '50px';
document.getElementById('demo2').style.color = 'red';
document.getElementById('demo2').style.background = 'black';
}
script>
<noscript>抱歉,您的浏览器不支持javascriptnoscript>
body>
html>
HTML文件路径
相对路径
内容
“picture/images.png”
同一级文件夹下的picture文件夹的images.png图片
“images.png”
当前文件夹下的images.png图片
“/picture/images.png”
根目录下的pciture文件夹下的images.png图片
“…/images.png”
上一级文件夹下的images.png图片
HTML头部
是所有头部元素的容器,可以将以下标签添加到
中: