笔记-HTML

最新推荐文章于 2024-02-29 22:22:55 发布

liandawubian

最新推荐文章于 2024-02-29 22:22:55 发布

阅读量104

点赞数

分类专栏：笔记文章标签： HTML

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

都不知道什么时候注册的，第一次用csdn做笔记。提前说，不是原创哦，笔记是照着关注的微信公众号Web前端之巅记下来的，大家去关注吧！她的博客地址是https://blog.csdn.net/lvonve/，非常感谢她！很长一段时间都不会有原创的，因为太菜了。

HTML介绍

HTML全称是超文本标记语言(Hyper text markup language)，超文本就是超链接，可以实现页面的跳转，是页面的骨架。

结构

<!DOCTYPE html>                 <!-- 声明文档的类型 -->
<html lang="en">                <!-- 根标签 -->
<head>                          <!-- 头标签 -->
    <meta charset="UTF-8">      <!-- 页面字符编码格式 -->
    <title>Document</title>     <!-- 文档标题 -->
</head>
<body>                          <!-- 主体标签 -->   
</body>
</html>

注释

<!-- 注释内容 -->

超链接

<a href="" title="" target=""></a>

href表示要跳转到的页面，是必须写的，有时并不想跳转，可以将其值设置为javascript:void(0); 或者 javascript:; 。
title是鼠标放到链接上时的提示文本。
target默认值是self,表示在自身页面打开，值为blank表示打开新的页面。

锚链接

锚链接也称为锚点链接，在页面中点击锚点是，可以跳到相应的锚点位置。

<div id="here">
    ... 
</div>
...
<a href="#here"></a>   <!-- 点击跳转到锚点为here的位置 -->

空链

<a href="#"></a>   <!-- 点击跳转到页首位置 -->

超链接优化写法

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 所有的链接都在新窗口打开，必须写在head标签内 -->
    <base target="_blank">
</head>

特殊字符

符号	代码
空格	` `
<	`<`
>	`>`
&	`&`
￥	`¥`
©	`©`
®	`®`
×	`×`
÷	`&devide;;`

列表

无序列表

<ul type="">
    <li></li>
    <li></li>
    <li></li>
</ul>

type的值为square表示小方块，disc表示实心小圆圈，circle表示空心小圆点。

有序列表

<ol type="" start="">
    <li></li>
    <li></li>
    <li></li>
</ol>

type的值可以为1,a,A,i,I
start表示开始的值

自定义列表

<dl>
    <dt></dt>   <!-- 小标题 -->
    <dd></dd>   <!-- 解释标题 -->
    <dd></dd>   <!-- 解释标题 -->
</dl>

音乐标签

<embed src="1.mp3" hidden="true"></embed>

head里面

<meta charset="UTF-8">

ASCII/ANSI/Unicode：英语
GBK ：亚洲通用字符集
GB2312：中文简体
Big5 ：台澳港繁体
UTF-8：世界通用字符集

<meta name="keywords" content="">

告诉搜索引擎你的站点的关键字。SEO优化使用

<meta name="discription" content="">

告诉搜索引擎你的站点的主要内容。这个description是给SEO和用户看的。

<meta name="author" content="名字">

告诉搜索引擎你的站点的制作者

有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
其中的属性说明如下：
all：（默认）文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；
nofollow：文件将不被检索，页面上的链接可以被查询。

<meta http-equiv="reflesh" content="5; http://www.google.com">

重定向:网页自动跳转,网页5秒后自动跳转到谷歌主页

表格

<table width="" height="" cellpadding="" cellspacing="" align="">
    <caption>表头</caption>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

thead,tbody,tfoot可以不写，通常为了搜索引擎优化SEO
cellspacing:单元格之间的距离
cellpadding:内容距离边框的距离
align:三种right,left,center

单元格合并

<td colspan="2">内容</td>

合并一行中的两列为一行

<td rowspan="2">内容</td>

合并一列中的两行我一列

表单

<form action="" method=""></form>

action表示当表单提交时，向何处提交数据
method有get和post两种，get通过地址栏提供信息，安全性差，post通过文件来处理，安全性高。

文本输入框

<input type="text" name="" maxlength="" readonly="" disabled="" value="" placeholder="">

readonly：文本框只读
disabled：文本框未激活
placeholder：引导文字，当文本框无文字并且未获取鼠标焦点时显示引导文字，当获取焦点或者输入文字时隐藏引导文字。

密码输入框

<input type="password" name="pwd">

单选框

<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女

默认选择男，两个单选框的name必须一样

下拉列表

<select multiple="multiple">
     <optgroup lable="分组名称">
        <option>下拉列表选项</option>
        <option selected="selected">下拉列表选项</option>
      </optgroup>
</select>

multiple=”multiple”：将下拉列表设置为多选
selected=”selected”：设置默认选中项目
optgroup 对下拉列表进行分组。
label=”分组名称” 分组名称。

多选框

<input type="text" checked="checked">

多行文本框

<textarea name="" id="" cols="30" rows="10"></textarea>

cols：控制输入字符的长度
rows：控制输入字符的行数

文本上传控件

<input type="file">

文本提交按钮

<input type="submit">

普通按钮

<input type="button" value="">

图片按钮

<input type="image" src="">

重置按钮

<input type="reset">

将信息重置到默认状态

表单信息分组

<form action="" method="">
    <fieldset>
        <legend>分组一</legend>
    </fieldset>
    <fieldset>
        <legend>分组二</legend>
    </fieldset>
</form>

fieldset对表单信息分组
legend表单信息分组名称

html5补充表单控件

<input type="url"> <!-- 网址控件 -->
<input type="date"> <!-- 日期控件 -->
<input type="time"> <!-- 时间控件 -->
<input type="email"> <!-- 邮件控件 -->
<input type="number" step="5"> <!-- 数字控件 -->
<input type="range" step="50"> <!-- 滑块控件 -->

liandawubian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记-HTML

HTML介绍HTML全称是超文本标记语言(Hyper text markup language)，超文本就是超链接，可以实现页面的跳转，是页面的骨架。结构&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;!-- 声明文档的类型 --&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;
复制链接

扫一扫