恐秋的HTML基本书写方法

最新推荐文章于 2024-07-10 17:49:51 发布

恐竹丶叶凌秋

最新推荐文章于 2024-07-10 17:49:51 发布

阅读量44

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_22809495/article/details/133952577

版权

HTML基本结构标签

》也称之为骨架标签

<html>
    <head>
        <title>页面</title>
    </head>
    <body>
        内容
    </body>
</html>

》》<html>根标签
》》<head>头部标签
》》<titile>文档标题
》》body主体内容标签

骨架的其余标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

》<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

》》当前页面采用HTML5来显示页面
》》文档类型声明标签

》<html lang="en">
》》当前文档显示的语言
》》》en是英文网页
》》》zh-CN是中文网页

》<meta charset="UTF-8">
》》使用UTF-8字符集

HTML常用标签

标题标签

》标题标签分为六个等级
》》<h1>-<h6>
》》》是双标签<h1>一级标题</h1>

段落标签与换行标签

》段落标签<p></p>

》换行标签<br />

文本格式化标签

》加粗标签
》》<strong>加粗</strong>
》》<b>加粗</b>

》斜线
》》<em></em>
》》<i></i>

》删除线
》》<del></del>
》》<s></s>

》下划线
》》<ins></ins>
》》<u></u>

div与span标签

》<div></div>与<span></span>都是盒子
》》div是分割分区
》》》只能独占一行
》》span是距离
》》》一行可以有n多个

超链接

》超链接标签
》》<a></a>
》》<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

》属性
》》href
》》》用于指定链接目标的url地址，(必须属性) 当为标签应用href属性时，它就具有了超链接的功能
》》target
》》》用于指定链接页面的打开方式，其中self为默认值，_ blank为在新窗口中打开方式。
》》》》self在当前页面打来
》》》》_blank在新的页面打开

》链接分类
》》外部链接
》》》<a href="http://www.bilibili.com“ target="_blank">B站</a>
》》内部链接
》》》打开站内的网页
》》》<a href="diergewangye.hrml"></a>
》》空链接
》》》<a href="#"></a>
》》下载链接
》》》<a href="abcd.zip">下载文件</a>
》》元素链接
》》》<a href="http:www//www.bilibili.com"><img src="abcd.jpg"></a>

锚点链接

》可以快速定位到当前页面中的某个位置

》在href属性中，设置属性值为#名字

<a href="#mubiao1">目标</a>  
………………………………………………………………………………  
<h3 id="mubiao1">目标</h3>

表单标签

表单域

》<form></form>实现用户信息的收集以及传递

》语法

<form action="url地址" method="提交方式" name="表单域名称">
各种表单原件
</form>

》实例

<form action="ceshi.php" method="post" name="abcd">
各种表单原件
</form>

》属性
》》action
》》》属性值url地址
》》》作用：用于指定接收并处理表单数据的服务器程序的url地址。
》》method
》》》属性值：get/post
》》》用于设置表单数据的提交方式，其取值为get或post。
》》name
》》》属性值：名称
》》》用于指定表单的名称，以区分同一个页面中的多个表单域。

input表单元素

》文本框输入内容

》语法：<input type="属性值" />
》》单标签

》实例

<body>
    <form>
        用户名：<input type="text"> <br>
    </form>
</body>

》input的属性
》》button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
》》checkbox定义复选框。
》》file定义输入字段和“浏览"按钮，供文件上传。
》》hidden定义隐藏的输入字段。
》》image定义图像形式的提交按钮。
》》password定义密码字段。该字段中的字符被掩码。
》》radio定义单选按钮。
》》reset定义重置按钮。重置按钮会清除表单中的所有数据。
》》submit定义提交按钮。提交按钮会把表单数据发送到服务器。
》》text定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

textarea文本域表单元素

》语法

<form>
    <textarea cols="50" rows="5">

    </textarea>
</form>

》textarea的参数
》》cols每行中的字符数
》》rows显示的行数