HTML笔记

最新推荐文章于 2025-07-30 17:44:28 发布

HJ_June

最新推荐文章于 2025-07-30 17:44:28 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端学习

本文链接：https://blog.youkuaiyun.com/HJ_June/article/details/128600641

<hr>用于打分割线

<br>用于回车.

<pre>是<p>的代替品，<pre>不会忽略空格和回车.

<b>和<strong>用于强调字体

<mark>用于强调字体，而<del>用于给指定字体划线，<ins>用于划下划线

<blockquote cite="">用于引用其他网站的信息并在cite属性里指出信息来源

<q>用于打出引号

<abbr>用于划出波浪线

CSS的三种使用方法：

本元素定义：在每个元素的内部使用style属性定义

内部定义：在<head>里用<style>进行定义

外部定义：在<head>里用链接进行处理

外部定义的方法：

href是地址，一般用相对地址链接程序的另一个文件夹,或者是在网络上获取css.

链接其他网页<a>,target属性用于指定打开的位置，默认值是_self(本页打开),可以改为_blank(新开一页)

<a>还有一个功能是页面跳转，在href属性里填入id值就行

href=#C4 跳转到id="C4"的位置

<img>包括scr（地址）和alt（若图片加载失败，显示alt的文本）.

img可以塞进<a>里，点击按钮就可以跳到另一个页面.

float属性可以使得图片在左侧或者右侧悬浮

示例:style="float:right;width:;height:;"在右侧悬浮.

表格

<table>做开始，<tr>做一行<th>用于给列或行的属性做定义，<td>用于显示输出的元素

colspan可以用于定义th占的列数，rowspan用于定义th占的行数.

nth-child()选择器用于选择表的行数，括号里填even是偶数行，odd是奇数行

如下，colgroup用于对列进行操作，其中span属性用于表示操作的列数

(下面的代码表示，前三列不操作，第四第五列背景颜色为粉色)

 
 <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>

列表

<ul>(unordered list)<ol>(ordered list)<dl><description list>

<li>是表的元素,<dt>是<dl>的元素,<dd>用于描述<dt>.

表可以嵌套在<li>里.

<ul>和<ol>的差别是，前者只有一个点来导航，后者有数字，字母，罗马数字来进行排序

style属性用于定义使用的排序类型，1是数字，A是大写字母，a是小写字母，I是大写罗马数字，i是小写罗马数字.

start用于指定开始排序的位置，比如start=“50”表示从50开始排序。

块元素和行内元素

块元素需要占据一块空间,如<p>和<div>

行级元素则不需要，他们一般在使用在行内,如<span>,<a>.

HTML的类

class="my his"这个代码表示使用my类css和his类css，使用了2个类的css.

编写的类前面有个点，如.his{}和.my{}.

class和id的差别

class是用于css的，而id是用于页内定位，方便传参和js操作。

iframe页内子页面

通过iframe可以在本页显示另一个页面而不需要跳转.如图：

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

如上，其中src是目标页面，后面以及展示区域的大小以及标题.

如果要去除边框，只需编辑css中的border值为none.

此外，使用下面的代码可以把子页面跳转到另一个页面.

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

JavaScript在页面中的使用

内部js用<script>定义，基本格式如下：

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("image").src = "picture.gif";
</script>

如上，意思是找id为demo的元素，将其文本替换为“Hello JavaScript！”，然后替换字体大小，再改变id为image的元素的src属性.

如果用户关闭了js支持或者使用的浏览器不支持js，用<noscript>标签在id对应的元素中打印文本.