HTML知识总结

什么是HTML

HTML：超文本标记语言（hyper type makeup language）
W3C(万维网联盟)：成立于1994年，世界上最权威的web领域的组织
W3C中的标准：1 结构化语言：HTML，XML

2 表现语言：CSS

3 行为标准：DOM（文档对象语言）， ECMAScript（js规范语言）

HTML中的一些基本信息

注释：快捷键：CTRL+/

<!DOCTYPE html>:告诉浏览器用什么规范
<head>:heml 头部
    <meat charset="utf8" />:描述性语言，meat一般用来描述网站的一些信息，用来做seo
    <meat name="搜索关键词" content="陈浪涛 ">

HTML的一些基本标签

h1:标题标签
p：段落标签
hr：分割线标签
br：换行标签
strong：字体加粗标签
em：字体斜体标签
&nmsp:空格标签
&gt:大于标签
&gl:小于标签
&copy:版权标签

HTML的图像标签(单标签)

<img src="#" alt="图像加载不出来的文字" title="悬停文字" width=  px height=  px/>
相对路径：../代表上一级目录
绝对路径：不推荐使用
常见的图片格式：jpeg，gif，png，bmp（位图）

HTML的超链接标签（双标签）

<a href="网页标签或者锚点标签或者配合IFrame內联框架标签使用和邮件链接" target="_self或者_blank"> </a>
锚点链接：id="顶部"  <a href="#顶部" target="_blank">返回顶部</a>（只跳到本页）
		如果想实现从本页直接跳到其他页面指定的锚点处：<a href="1.html #顶部" 					target="_blank"></a>
邮件链接：<a href="mailto:" target="_self"></a>
配合iframe框架标签使用(前提是iframe的src是空)：（实现点击链接就可以在本页以小窗口形式来展网页）
<iframe src="" name="video"> </iframe>
<a href="1.html" target="video"></a>

_self:在当前页面打开新页面
_blank:在新页面打开新页面

iframe內联框架

<iframe src="" name="框架标识名" frameborder=  px 等属性（其中naem属性可以配合a标签使用）>  </iframe>
作用：在以一个网页中嵌入一个网页

媒体标签

<video src="视频地址" controls autoplay>  </video>
<audio src="音频地址" controls autoplay>  </audio>

controls:为视频和音频设置进度条，设置了才可以播放
autoplay:设置自动播放

页面的结构分析

header：网页的头部
footer：网页的脚部
section:web中的一块独立的区域
artical：web中的文本区域
aside：侧边栏的内容
nav：导航栏辅助内容

表单总结

表单的属性

type：text,password,submit,reset,image,radio,checkbox,button,email,url,number,file,search,range
name:表单的名字（在单选框和多选框中可以用来分组，以防单选框可以多选）
value：为表单设置一些默认值
size：可以设置表单的大小（当type为text和password时候，单位时字符，其他为像素）
maxlength：可以设置输入的最大字符数
checked：在单选框和多选框中可以默认选中指定的值
selected:可以默认选中下拉框的值
readonly（只读），hidden（隐藏），disabled（禁用），palceholder（提示信息），required（必须填）

所有类型的按钮的使用示范

	格式：
	<p>
     描述的文字（radio和checkbox在后面加描述）<input type="" name="" value="" (后面可以自选)/>
	</p>
	特殊：
 	<input type="number" max="最大值" min="最小值" step="一次跨越的值的大小"/>(type="range"同)
	<input type="image" scr="path"/>(和type="submit"一样可以实现提交表单)
	规范：
	一般type  name   value三者缺一不可
	一般表单配合label和p标签使用，可以实现点描述文字也可以填写表单

下拉框

<select>
    <option value="选项值">选项值</option>
    <option value="选项值">选项值</option>
    <option value="选项值">选项值</option>
</select>

文本域

<textarea name="" clos="一行的字符数" rows="一列的字符数">  </textarea>

表单的综合使用（制作登录表单）

<form action="" method="post/get">
    <p>
        <label for="id的值">描述文字</label>
        <input type="" name="" value="" id=""/>
    </p>
    
</form>
post提交方式：相对安全，可以上传大文件，但在network中可以看见账户和密码
get提交方式：不安全，可以在网址看见账户和密码，不可以上传大文件，但高效
action：可以时一个处理提交的selvert，也可以时一个网址

列表

有序列表

<ol>
    <li>值</li>
    <li>值</li>
    <li>值</li>
</ol>

无序列表

<ul>
    <li>值</li>
    <li>值</li>
    <li>值</li>
</ul>

自定义列表

<dl>
    <dt>标题</dt>
    <dd>值</dd>
    <dd>值</dd>
</dl>
多用于网页的底部

表格

<table>
    <tr>
    	<td>值</td>
        <td>值</td>
        <td>值</td>
    </tr>
    <tr>
    	<td>值</td>
        <td>值</td>
        <td>值</td>
    </tr>
    <tr>
    	<td>值</td>
        <td>值</td>
        <td>值</td>
    </tr>
</table>
这是一个3行3列的表格
tr：一行
td：一行中的一个单元格（列）

posted @ 2022-04-18 00:07 在赶路的我阅读(39) 评论(0) 收藏举报

刷新页面返回顶部