关于如何快速入门HTML

最新推荐文章于 2021-07-20 23:24:51 发布

「已注销」

最新推荐文章于 2021-07-20 23:24:51 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/Odile66655/article/details/74874806

版权

在学习HTML之前，你的具备以下知识。

网页是有网页源码、HT ML、CSS、javaScript

B/S:浏览器服务器模式

C/S:客户端服务器模式

简单的HTML知识：

如何新建一个html页面：1.新建文本文档 2.改后缀为（.html）

标签：有单边标签和双边标签组成。

定义：就是一个事物的定义加以修饰。

全局架构标签如下：
<html>
<head>
<title>全局架构</title>
<meta charset="utf-8"/>
</head>

<body>
内容

</body>
</html>

常用的标签(文本)
标题：h1-h6
加粗: <b></b> <strong></strong>
斜体:<i></i><cite></cite><em></em>
下划线：<u></u>
删除线：<s></s>
上标：<sup></sup>
下标：<sub></sub>
字体：<font face="" size="" color=""></font>

常用标签（格式）
段落:<p></p>
强制不换行：<nobr></nobr>
原样输出：<pre></pre>
无序列表：<ul type="square">属性type 属性值circle disc
<li></li>
<li></li>
<li></li>

</ul>
有序列表：<ol type="1" start="3">属性type 属性值1，A,a，I 属性start 属性值4（数字）
<li></li>
<li></li>
<li></li>
<li></li>

</ol>

无序列表 <dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>

</dl>

推荐一个学习工具：w3cschool

url:统一资源定位符
基本组成方式：协议://地址端口号文件参数

超链接标签<a></a>
属性：href 目标地址
title 光标放上去之后有提示的功能
target 打开目标地址的方式（_self _blank _top _parent）

图片标签<img/>
属性：src 图片文件路径
title 图片加载失败或者是光标放在上面的时候会有提示
width 设置图片的宽度
height 设置图片的高度

路径：
/表示目录层级

相对路径：
./ 代表当前目录
../ 代表上一级目录
绝对路径：
/本地磁盘的根目录
通过url指定的路径找到

表格<table></table>
属性：bgcolor border 边框 bordercolor 边框颜色 width height cellspacing cellpadding align
<tr></tr> 行align valign
<td></td> 列 align valign colspan 合并列 rowspan 合并行
<th></th> 和<td></td>效果类似表的标题
<caption></caption> 表的表头

分帧：一个网页中包含另外一个网页
属性：src 网页要加载的路径
frameborder 边框有无3d效果（0/1）
name 相当于本网页的连接地址
frameset
取代body定义框架页，定义框架的尺寸
注意事项：有frameset就不能有body
里面的每个网页应该是frame
属性：cols列 rows行
frame:属性 scrolling （yes/no/auto）有无滚动条
如何写form表单：
1.先写<form>
2.再写form的属性 method（get、post） action 跳转地址（提交按钮写name属性）
target打开的方式
3.写<input>标签
<input>的属性 type ，name
type属性的属性值有很多：
text 文本<input type="text" name="username"/><br />
submit 提交按钮<button>注册1</button>

<input type="submit" name="va" value=""/>
password 密文形式<input type="password" name=""/><br />
radio 单选按钮 <input type="radio" name="" value="0" id="" /><label for=""></label>
checkbox 多选按钮<input type="checkbox"name="" value="ball"/>
4.下拉列表
<select name="" >
<option value="shandong"></option>
<option value="henan"></option>
<option value="shanxi"></option>
</select><br/>
5.文本编辑器
<textarea cols="100" rows="10" name="text"> </textarea>
6.在头部进行页面的自动刷新
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/ >
在css里面使用
<link rel="stylesheet" type="text/css" ? href="路径" />