web前端基础-HTML

最新推荐文章于 2024-09-06 19:40:02 发布

侯侯侯先生

最新推荐文章于 2024-09-06 19:40:02 发布

阅读量205

点赞数

分类专栏：前端网页基础篇

本文链接：https://blog.csdn.net/weixin_44142032/article/details/87920424

版权

前端网页基础篇专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言--- 脚踏实地，仰望星空

网站信息页面案例

<h1-6></h1-6>内容标题标签

<hr/>横线，行级标签

<p></p>段落标签

<font></font>字体标签

常用属性：color：颜色；size：字体大小；face：改变字体格式

<b></b>字体加粗；<strong></strong>字体加粗，带语义，比较好

<i></i>字体变斜体；<em></em>字体变斜体，带语义，比较好

网站图片信息页面案例

<img>导入图片

常用属性：src：图片路径；width：图片宽度；height：图片高度；alt：图片加载失败后的提示信息

绝对路径：../ 表示上一级目录；./ 表示当前目录

相对路径：默认自动取当前目录下（与html文件处于同一级目录）

网站友情链接页面案列

<ul>无序列表

</ul>

常用属性：type：square（样式：圆圈、方框）

<ol>有序列表

</ol>

常用属性：type：（样式：数字，字母）；start：起始数字或字母

<a></a>超链接标签

如果是网络地址，需要加http协议。如果是本地的html文件，直接写路径就可以。

常用属性：href：链接的URL；target(目标)：_blank(新的窗口打开页面) _self(默认在当前窗口打开新的页面)

网站首页案例

<table>表格标签

<tr>行级标签

<td></td>列级标签

</tr>

</table>

常用属性：

width：表格宽度；height：表格高度；border：指定表格边框宽度大小；bgcolor：表格背景颜色；align：（right、center、left）靠右、居中、靠左

表格的合并属性：colspan：列合并；rowspan：行合并；

表格的嵌套：在某个区域在嵌套一个新的表格

网站注册案例

<form></form>表单标签，提交数据

属性：action：提交的URL地址

method：提交的方式

get 方式：默认的提交方式，直接在链接后面显示，提交数据大小小，4k

post 方式：安全，提交的数据大，并且不显示

<input />标签

属性：type：

text：文本

password：密码框

redio：单选按钮

checkbox：多选按钮

file：上传文件

button：普通按钮

submit：提交按钮

reset：重置按钮

data：日期按钮

number：只允许输入数字的按钮

tel:手机号

textarea：文本域

cols：高度；rows：宽度；

select：下拉框

option：下拉选项

hidden：隐藏域，用于提交数据

属性：name：作为提交数据时候的参数名字

value：参数的名字对应的内容

id：用来唯一表示输入框的表示，便于后期维护的时候找到它

placeholder：用来表示默认的提示信息。

网站后台页面案例

<frameset></frameset> 网站框架，在使用的时候去掉<body>标签

<frameset cols="15%,*">
       <frame src="aaa.html" />
       <frame src="bbb.html" /> 两个页面按列分成了两块
</frameset>

<frameset rows="15%,*">
       <frame src="aaa.html" />
       <frameset cols="15%,*">
            <frame src="bbb.html" />
            <frame src="ccc.html" name="rightFrame" />
       </frameset>
</frameset>

属性name：给ccc框架起了个名字，并在bbb框架中超链<a>标签中写入target属性（target="rightFrame"）

效果：直接在相应页面部分跳转