HTML/CSS 学习笔记（一）

最新推荐文章于 2024-07-05 14:58:38 发布

dongdongdongjiang

最新推荐文章于 2024-07-05 14:58:38 发布

阅读量220

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_38829431/article/details/72764386

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html的头标签的使用
* html两部分组成 head和body
** 在head里面的标签是头标

** title标签：表示在标签上显示的内容

** <meta>标签：设置页面的一些相关内容
- <meta name=”keywords” content=”“>
- <meta http-equiv=”refresh” content=”3;url=”>
refresh，表示页面刷新，content后面的3代表3秒后刷新，分好后的url代表转到的网页地址

** base标签：设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target=”_blank”/>

** link标签：引入外部文件
** CSS可以使用link标签引入css文件
框架标签的使用
* <frameset>
- rows按照行进行划分
** <frameset rows=”80, *”> rows有两个值，80代表第一行是80，*代表剩下的页面都是第二行

- cols：按照列进行划分
** <frameset cols=”80, *”>

* <frame>
- 具体显示的页面
- <frame name=”lower_left” src=”b.html”>

* 使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉，这样就违背了一些规范，所以框架标签很少使用

<html>
 <head>
  <title>框架标签</title>
 </head>
    <frameset rows='80,*'>
        <frame name='top' src='a.html'>
        <frame name='bottom' src='b.html'>
    </frameset>
</html>

这是a.html

这里写图片描述

这是b.html

这里写图片描述

效果

这里写图片描述

上下分完以后，再将下面的部分分开。就是用嵌套结构，把下面的部分写成<frameset><frame name=”” src=”“></frame></frameset>这里的name要定义好，超链接时候可以指定页面打开的位置

<html>
 <head>
  <title>框架标签</title>
 </head>
    <frameset rows='80,*'>
        <frame name='top' src='a.html'/>
        <frameset cols='200,*'>
            <frame name='bottom_left' src='b.html'/>
            <frame name='bottom_right' src='c.html'/>
        </frameset>
    </frameset>
</html>

这里写图片描述

当分别点击超链接1，超链接2，超链接3的时候，右下角的框就会出现相应的页面

内容总结

html操作思想（* * * * ）
* 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
font标签属性：size 取值范围 1-7 color：英文单词，十六进制数
标题标签<h1></h1>…<h6></h6>：h1到h6越来越小，自动换行
注释<!- -html的注释- ->
列表标签
* * <dl><dt></dt> <dd></dd></dl>
* * 有序 <ol><li></li></ol>
* * 无序 <ul><li></li></ul>
图像标签（* ** *）
<img src=”图片的路径” width=”” height=”” alt=”“>
* *alt的浏览器兼容性差，不建议使用
路径（相对路径）（**）
**在同一级目录：直接写
**在下一级目录： images/1.jpg
**在上层目录：../
超链接标签
<a href=”路径”>显示在页面上的内容</a>
* * 打开方式 target=“_self _blank ”默认是当前页面打开
表格标签
<table>
<tr>
<td></td>单元格
</tr>
</table>
<th>：加粗和居中
-技巧：先数有多少行，数每行里面有多少个单元格
表单标签
* <form></form>
属性：action：提交到的地址 method：提交方式：常用的有两种 get和post，注意两者的区别
* 输入项里面写name（必须写，否则表单提交不上去）
* 普通输入项：<input type=”text”/>
* 密码输入项：<input type=”password”/>
* 单选框：<input type=”radio”/>name属性要相同，同时记得还有一个value值用于区分提交表单中的选择项（不写value时候区分不了选的是什么）
* 复选框：<input type=”checkbox”/>
* 下拉框：<select name=”“><option value=”“></option></select>
* 文本域：<textarea cols=”“rows=”” name=”“></textarea>
* 文重置：<input type=”reset”/>
* 使用图片提交：<input type=”image” src=”图片的路径”/>
* 隐藏项：<input type=”hidden”/>
* 普通按钮：<input type=”button”/>
div和span
div自动换行，span一行表示
框架标签
会使用即可