前端之html的查漏补缺

时间  2019-12-08
标签 前端 html 补缺 栏目 HTML 繁體版
原文   原文链接
 
 
1、<head>部分
<!-- 声明该文档是html5的文档 -->
<!DOCTYPE html>
<!-- lang="en"是说明该网页主要的语言是英文 -->
<!-- <html lang="zh-CN"> -->
<html lang="en">
<head>
    <!-- 不写这个若是有中文可能会乱码 -->
    <meta charset="utf-8">
    <title>html</title>
    <!-- 定义css样式 -->
    <style type="text/css"></style>
    <!-- 定义js代码或引入外部js文件 -->
    <script type="text/javascript"></script>
    <!-- 引入外部样式表文件 -->
    <link rel="stylesheet" type="text/css" href="">
    <!-- 定义页面原信息 -->
    <meta/>
    <meta name="keywords" content="关键字,meta,keywords,搜索">
    <meta name="description" content="简单介绍html的元素">
</head>
<body>
 
</body>
</html>
 
1.几个经常使用标签：
标签
意义
<title></title>
定义网页标题
<style></style>
定义内部样式表
<script></script>
定义JS代码或引入外部JS文件
<link/>
引入外部样式表文件
<meta/>
定义网页原信息
 
2. Meta标签介绍：
<meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：
meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不一样的属性又有不一样的参数值，这些不一样的参数值就实现了不一样的网页功能。
a. http-equiv属性：至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型--><meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档--><meta http-equiv="x-ua-compatible" content="IE=edge">
b. name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name=" description " content="老男孩教育Python学院">
 
 
2、<body>部分
 
 
 
表单属性：
属性
描述
accept-charset
规定在被提交表单中使用的字符集（默认：页面字符集）。
action
规定向何处提交表单的地址（URL）（提交页面）。
autocomplete
规定浏览器应该自动完成表单（默认：开启）。
enctype
规定被提交数据的编码（默认：url-encoded）。
method
规定在提交表单时所用的 HTTP 方法（默认：GET）。
name
规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate
规定浏览器不验证表单。
target
规定 action 属性中地址的目标（默认：_self）。
 
 
 
input
type属性值
表现形式
对应代码
text
单行输入文本
<input type=text" />
password
密码输入框
<input type="password"  />
date
日期输入框
<input type="date" />
checkbox
复选框
<input type="checkbox" checked="checked"  />
radio
单选框
<input type="radio"  />
submit
提交按钮
<input type="submit" value="提交" />
reset
重置按钮
<input type="reset" value="重置"  />
button
普通按钮
<input type="button" value="普通按钮"  />
hidden
隐藏输入框
<input type="hidden"  />
file
文本选择框
<input type="file"  />
 
 
 
<!-- 声明该文档是html5的文档 -->
<!DOCTYPE html>
<!-- lang="en"是说明该网页主要的语言是英文 -->
<!-- <html lang="zh-CN"> -->
<html lang="en">
<head>
    <!-- 不写这个若是有中文可能会乱码 -->
    <meta charset="utf-8">
    <title>html</title>
    <!-- 定义css样式 -->
    <style type="text/css"></style>
    <!-- 定义js代码或引入外部js文件 -->
    <script type="text/javascript"></script>
    <!-- 引入外部样式表文件 -->
    <link rel="stylesheet" type="text/css" href="">
    <!-- 定义页面原信息 -->
    <meta/>
    <meta name="keywords" content="关键字,meta,keywords,搜索">
    <meta name="description" content="简单介绍html的元素">
</head>
<body>
<div>
    <!--
    html标签的几个分类：
        1. 单标签和双标签
        2. 内联标签和块儿级标签(是否独占一行)
            内联: span img a b i
            块儿级:div h1~h6 p hr ul li ol
            
            嵌套的规则:
                1. 内联的不能套块儿级
                2. p不能套块儿级标签
                
        3. 展现用的和交互用的
        
        4. table标签
        
        5. 列表
            1. ul
            2. ol
            3. dl
            
        6. 特殊符号
            1. &nbsp;
            2. &copy;
            3. &reg;
            4. &lt;
            5. &gt;
 
 
    -->
 
    <p id="图片相关的设置">
        <img src="" alt="当图片显示不出来会打印这句话" title="鼠标移到图片上会打印这句话">
    </p>
 
    <p id="页面内的跳转">
        <a href="#test">跳到最后</a>
        <a href="" id="test"></a>
    </p>
 
<!--
    总结input属性：
        text
        textarea 大段文本
        password
 
        radio 单选框
        checkbox 多选框
        select 下拉菜单
        option 具体的下拉选项
        optgroup 分组的下拉框（label="上海"）
 
        date 日期
        datetime 时间
 
        file 文件
 
        button 普通按钮，多用js给它绑定事件
        reset 重置
        submit 提交
 
 
 
-->
 
    <p id="emmet插件的使用">
        <!-- 在pycharm中按tab键会进行快捷操做,其它编辑器中要安装emmet插件 -->
        h1*4>a.c$#id${content$}
    </p>
    
    <p>
        <label for="username">username：</label>
        <input type="text" name="" id="username">
        <input type="password" name="密文输入">
        <input type="hidden" name="隐藏">
        <input type="text" value="默承认以修改">
        <input type="text" name="" placeholder="占位符">
        <input type="" readonly value="默认不能修改">
        <input type="text" value="不能被选中" disabled>
    </p>
 
    <p id="单选框">
        性别:
        <!-- label的第一个用法 -->
        <input type="radio" checked name="gender" id="man">
        <label for="man">男</label>
        <input type="radio" name="gender" id="woman">
        <label for="woman">女</label>
    </p>
 
    <p id="复选框">
        爱好：
        <!-- label的第二个用法 -->
        <label><input type="checkbox" name="">篮球</label>
        <label><input type="checkbox" name="">足球</label>
        <label><input type="checkbox" name="">皮球</label>
    </p>
 
    <p id="下拉分级">
        <!-- 加入multiple就变成了多选的下拉框 -->
        <select multiple>
                <optgroup label="河南">
                    <option>许昌</option>
                    <option>洛阳</option>
                    <option selected>郑州</option>
                    <option>商丘</option>
                </optgroup>
                <optgroup label="广东">
                    <option>广州</option>
                    <option>惠州</option>
                </optgroup>
        </select>
    </p>
 
    <p id="文本框输入">
        <textarea cols="30" rows="10"></textarea>
    </p>
 
    <p id="上传文件">
        头像:
        <input type="file" name="">
        <!--
            method="post" enctype="multipart/form-data" autocomplete="off" 关闭自动补全 novalidate
        -->
    </p>
 
    <P id="input按钮">
        <input type="submit" value="提交">
        <input type="button" value="按钮">
        <input type="reset" value="所有重置">
    </P>
 
    <p id="选择时间">
        生日:
        <input type="date" name="">
    </p>
    
    
</div>
<div>
 
 
 
</div>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程