前端复盘2——html

最新推荐文章于 2024-05-10 08:44:12 发布

Rae LIU

最新推荐文章于 2024-05-10 08:44:12 发布

阅读量223

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_58801665/article/details/127430886

版权

最近学到了js，返回整理一下之前html、css的内容，大部分自学内容来自W3school的教程。

一、涉及一些js知识的html内容

1.用js设置按钮进行内容转换：

首先，设置一个id，方便之后引用，同时设置转换前的文本内容；

接着设置一个button按钮元素，用document.getElementById引用id表明要改变的内容对应在id为xiaoniu的地方；

最后设置innerHTML，即改变后的内容。

具体如下：
<p id="xiaoniu">改变前的内容</p>
<button type="button" οnclick='document.getElementById("xiaoniu").innerHTML = "改变后的内容"'>请点击</button>

2.用js改变HTML属性值

首先，定义一个函数叫light，其中自变量为x，输出为pic，当x为0时输出灯亮图，当x不为0时输出灯暗图，同时设置将图片放置在id=image1的位置；

接着，设置函数转变前的图片，并且将id设置为image1，为函数改变图片的位置提供索引；

最后，设置按钮，点击开灯时，函数light的变量值赋为0，输出灯亮图片，反之相反。

具体如下：

二、head元素可以包含许多元素，具体如下：

1.title(标题，提供页面被添加到收藏夹时显示的标题)，<head><title>标题</title></head>

2.base(为页面中的超链接提供默认地址和默认目标，也就是跳转的页面，具体使用尚未见到)
3.link(用来链接样式的，引入外部样式即style的样式超链接)
4.style(定义整个网页的样式)<style type="text/css"> body{background-color:yellow} p{color:blue font:12px} </style>
5.meta(提供html的元数据，即对机器可读的数据)，一些搜索引擎是利用meta元素的name和content来找到相应页面的，还有keywords。

如响应式设计

表示用UTF-8字符编码（基本涵盖了所有字符、符号），设置界面内容的宽度等于设备宽度（这点非常重要，可以灵活调节界面大小）
6.script元素，如js

三、布局，主要靠style来设置

设置style给每个部分定义其位置颜色字体边距等，然后用div和id赋予布局。有一些东西，无法用div和id来定义布局，比如表格table，那么可以用class进行布局

注：clear后可以填none,left,right,both等，表示可以允许浮动对象出现在元素两侧，不允许出现在左侧、右侧，不允许出现在左右两侧；此外text-align是这个元素中文本的位置，即段落中文本的对齐方式，而float是这一整个元素，即一整个段落漂浮的位置。

</head>

<div id="section">
<h1>死亡诗社</h1>
<p>
把非生命的一切都击溃，以免当我生命终结，发现自己从未活过
</p>
</div>

<div id="footer">
source:lnn
</div>

四、页面中输入代码

code标签定义计算机代码文本，kbd标签定义键盘文本，samp定义计算机代码示例，pre定义预格式化文本（因为code输出的代码文本会去掉多余的空行和空格，所以需要采用pre保留原格式。另外：在code,kbd,samp标签中的字体那些一律不受style定义的影响，它们已经采取了固定大小和间距

<code>
<pre>
var person={
   firstName:"Yan",
   lastName:"L",
   age:22
}
</pre>
</code>

这样输出才会保留原格式，不会自动去掉换行

五、html5新语义元素：实现了跨应用、跨企业的统一

语义元素：通过语义可以了解其用途的元素

article定义文章，一般用于博客、论坛、新闻
aside定义侧栏，定义页面内容以外的内容
details定义用户可以查看的细节
figcaption定义figure元素的标题
figure规定自包含内容如图表、照片等
header定义页眉，footer定义页脚
main定义主内容
mark定义重要的或强调的文本
nav定义导航，可以加超链接
section定义节
summary定义details元素的可见标题
time定义日期时间

示例：

<html>
<style>
header{
   background-color:grey;
   color:black;
   text-align:center;
   font-size:10px
   }
nav{
   background-color:white;
   color:grey;
   float:center;
   font-size:12px
   }
section{
   background-color:white;
   color:green;
   width: 800px;
   float:left;
   font-size:20px
   }
aside{
   background-color:white;
   color:yellow;
   folat:right;
   font-size:10px
   }
footer{
   background-color:grey;
   color:black;
   clear: both;
   text-align:center;
   font-size:10px
   }
</style>
<body>
<header>
页眉一般放在最上，居中
</header>
<nav>
   <p>类别1</p>
   <p>类别2</p>
   <p>类别3</p>
</nav>
<section>
   <h1>类别1</h1>
   <p>类别1的节内容</p>
</section>
<aside>这是侧栏</aside>
<footer>
页眉放在最下边，居中
</footer>
</body>
</html>