HTML实用笔记二_html &trade-CSDN博客

本文链接：https://blog.csdn.net/m0_48268538/article/details/108331648

标签（元素）

头部标签

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta信息。
可以添加在头部区域的元素标签为:

title元素

	<title></title>

    <!-- 定义了浏览器工具栏的标题 

        当网页添加到收藏夹时，显示在收藏夹中的标题 

        显示在搜索引擎结果页面的标题 
    -->

link元素

<link> 标签定义了文档与外部资源之间的关系。 
<link> 标签通常用于链接到样式表:

<link rel="stylesheet" type="text/css" href="mystyle.css">

style元素

< style > 标签定义了HTML文档的样式文件引用地址

meta元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口
<meta> 一般放置于 <head> 区域

为搜索引擎定义关键词:

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

为网页定义描述内容:

<meta name="description" content="....">

定义网页的作者:

<meta name="author" content="....">

每30秒钟刷新当前页面:

// 相当于http的文件头作用，它可以向浏览器传回一些有用的信息 <meta http-equiv="refresh" content="30">

基本标签

常用标签

	<!-- 段落标签 -->
    <p>段落标签</p>

    <!-- 标题标签 h1~h6 -->
    <h1></h1>

    <!-- 加粗 -->
    <strong></strong>

    <!-- 斜体 -->
    <em></em>
    <i></i>

    <!-- 删除 -->
    <del></del>

    <!-- 地址 -->
    <address></address>

    <!-- 容器 -->
    <div></div>

    <!-- 换行符 -->
    <br>

    <!-- 水平线 -->
    <hr>

列表

<!-- 有序列表 -->
    <ol type="数字/字母/罗马数字" reversed="reversed" start="2">
        <li></li>
        <li></li>
        <li></li>
    </ol>

    <!-- 无序列表 -->
    <ul>    <!-- 默认值(实心圆)type="disc" square(方) circle(空心圆) -->
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- 定义列表 -->
    <dl>
        <dt>定义项目</dt>
        <dd>对定义项目的描述</dd>
    </dl>

html编码

	<!-- 空格 -->
    &nbsp;  

    <!-- less than小于 < -->
    &lt;

    <!-- great than大于 > -->
    &gt;

    <!-- 版权 © -->
    &copy;

    <!-- 双引号 -->
    &quot;

	<!-- 注册商标 -->
	&reg;

	<!-- 商标 -->
	&trade;

html注释

写备忘录
调试代码是否有错

图片（img）

<!-- ① 网上url -->
    <!-- ② 本地的相对地址 -->
    <!-- ③ 本地的绝对地址 -->
    <img src="图片地址" alt="图片占位符（图片地址出错时，展示图片信息）" title="图片提示符">

超链接（anchor）

	<!-- 
		# (空链接)
        _blank (在新的页面打开)
    -->
    <a href="链接url" target="_blank"></a>

    <!-- 锚点链接 -->
    <div id="a1" style="height: 2000px;">童装</div>
    <div id="a2" style="height: 2000px;">生活用品</div>
    <a href="#a1">童装</a>
    <a href="#a2">生活用品</a>

    <!-- 打电话 -->
    <a href="tel:电话号码">打电话</a>

    <!-- 发邮件 -->
    <a href="mailto:邮箱">发邮件</a>

    <!-- 协议限定符 -->
    <a href="javascript:alert('让你手欠')">你点我试试</a>

表格(table)

    <!-- 表格边框，默认0 -->
    <table border="1" width="500px">
        <!-- 表格标题 -->
        <caption>表格标题</caption>
        
        <!-- 表头 -->
        <thead align="right">
            <!-- 行 -->
            <tr>
                <!-- 列 -->
                <th>姓名</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>照片</th>
            </tr>
            </tr>
        </thead>

        <!-- 表体 -->
        <tbody align="center">
            <!-- 行 -->
            <tr>
                <!-- 列 -->
                <td>张胜男</td>
                <td>12</td>
                <td>北京</td>
                <!-- 合并行 -->
                <td rowspan="3"></td>
            </tr>
            <tr>
                <!-- 列 -->
                <td>张胜男</td>
                <td>16</td>
                <td>北京</td>
            </tr>
            <tr>
                <!-- 列 -->
                <td>张胜男</td>
                <td>15</td>
                <td>北京</td>
            </tr>
        </tbody>

        <!-- 表尾 -->
        <tfoot>
            <tr>
                <td>表尾123</td>
                <td>表尾456</td>
                <!-- 合并列 -->
                <td colspan="2">表尾789</td>
            </tr>
        </tfoot>
    </table>

    <!-- 表格属性 -->
    <!-- cellspacing:单元格与单元格边框之间的空白间距，默认2px -->
    <!-- cellpadding:单元格内容与单元格边框之间的空白间距，默认1px -->
    <!-- width：表格宽度 -->
    <!-- height:表格高度 -->
    <!-- align:表格在网页中的水平对齐方式 -->

表单(form)

一系列集合，主要从来收集数据

input元素

    <!-- 
        action:提交地址,发送给谁
        method:提交方式（get/post）

        type:输入框类型
        name:属性名
        value:属性值
        placeholder:显示提示的文本，文本框没有内容时显示
    -->
    <form action="" method="">
        <!-- 文本框 -->
        <input type="text" name="" value="" placeholder="">

        <!-- 密码框 -->
        <input type="password" name="" id="">

        <!-- 
            单选框 
            checked(默认选中) 
            需要写name的值
            要想提交出成功，必须要有属性名和属性值
        -->
        <input type="radio" name="" id="" checked>

        <!-- 多选框 -->
        <input type="checkbox" name="" id="" checked>

        <!-- 提交 -->
        <input type="submit" value="提交">

        <!-- 重置 -->
        <input type="reset" value="重置">
        
        <!-- 按钮 -->
        <input type="button" value="">

        <!-- 
            数字输入框 
            min:最小值
            max:最大值
            step:一次增加/减少的值

        -->
        <input type="number" min="" max="" step="" name="" id="">

        <!-- 日期选择框，有兼容性问题 -->
        <input type="date" name="" id="">

        <!-- 小时，分钟选择框 -->
        <input type="time" name="" id="">

        <!-- 搜索框，有兼容性问题 -->
        <input type="search" name="" id="">

        <!-- 邮箱 -->
        <input type="email" name="" id="">

        <!-- 电话号码 -->
        <input type="tel" name="" id="">

        <!-- 文件上传 -->
        <input type="file" name="" id="">


        <!-- 颜色选择 ，一般配合js使用-->
        <input type="color" name="" id="">

        <!-- 滑块 ，一般配合js使用-->
        <input type="range" name="" id="">
    </form>

注意小bug

    <form action="">
        <p>
        username:<input type="text" name="username" value="请输入用户名" style="color: #999;" onfocus="if(this.value == '请输入用户名'){this.value = '';this.style.color='#424242'}" onblur="if(this.value == ''){
            this.value ='请输入用户名';this.style.color='#999'}">
        </p>
        <p>
            password:<input type="password">
        </p>
        <input type="submit">

        <!-- 
            有个小bug
                当用户名输入和提示信息一致时，失去焦点后再重新获取焦点时，输入的信息消失不见
        -->
    </form>

select元素

通常和option标签使用

    <form action="" method="">
        <!-- 下拉菜单 selected（默认选中） -->
        <select name="" id="">请选择
            <option value="" selected>北京</option>
            <option value="">上海</option>
            <option value="">广州</option>
        </select>

        <!-- 分组 -->
        <select name="" id="">
            <optgroup>分组标题
                <option value="">详细分组内容1</option>
                <option value="">详细分组内容2</option>
                <option value="">详细分组内容3</option>
                <option value="">详细分组内容4</option>
            </optgroup>
        </select>

        <!-- 
            文本域 
            cols:列数
            rows：行数
        -->
        <textarea name="" id="" cols="30" rows="10" ></textarea>
        <!-- 
            注意：设置textarea是否允许调整尺寸（resize:none）
			textarea{resize:both(默认值)/none/horizontal(水平方向)/vertical(垂直方向)}
        -->
    </form>

按钮元素

当type值为【reset】【button】【submit】时，input表示按钮

发送数据要注意数据的主题（数据名）和数据的内容（数据值），缺一不可，没有这个就发送不了数据

配合表单元素的其他元素

lable:通常配合单选和所选使用

    <form action="">
        <!-- 
            1>显示关联 
                可以通过for属性让lable元素关联某一个表单元素，for属性书写表单元素id的值
        -->
        <p>
            请选择性别：
            <input type="radio" name="gender" id="radMale">
            <label for="radMale">男</label>
            <input type="radio" name="gender" id="radFemale">
            <label for="radFemale">女</label>
        </p>

        
        <!-- 2>隐式关联 -->
        <label><input type="radio" name="gender">男</label>
        <label><input type="radio" name="gender">女</label>

    </form>

datalist（数据列表）：该元素本身不会显示到页面，通常用于和普通文本框配合

<form action="">

    <p>
        请选择你常用的浏览器：
        <input type="text" list="userAgent">
    </p>
    <datalist id="userAgent">
        <option value="Chrome">Chrome</option>
        <option value="IE">IE</option>
        <option value="Opera">Opera</option>
        <option value="Safari">Safari</option>
        <option value="Firefox">Firefox</option>
    </datalist>

</form>

form：通常会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器，对于开发静态页面没有什么意义

	<!-- 
        autocomplete:自动记录，有两个值【默认on】off，
        注意：①需要配合提交按钮一块使用；②必须写name
		autofocus:自动获得焦点
		novalidate: 属性是一个布尔属性,规定当提交表单时不对表单数据（输入）进行验证
    -->
    <form action="" autocomplete="" novalidate>
        姓名：<input type="text" name="user" autofocus >
        <input type="submit">
    </form>


	<!-- 
        multiple:多文件上传
        required:必填项，内容不能为空
    -->
    <form action="" autocomplete="">
        <input type="file" multiple >
        <input type="text" required >
        <input type="email" novalidate >
    </form>

fieldest：表单分组

	<form action="">
        <fieldset>
            <legend>基本信息</legend>
            <p>
                姓名：<input type="text" name="username" >
            </p>
            <p>
                邮箱：<input type="email" id="">
            </p>
        </fieldset>
        <fieldset>
            <legend>按钮</legend>
            <input type="submit" value="提交">
        </fieldset>
    </form>

美化表单元素

1> 新的伪类

	①focus(元素聚焦时的样式)

	② checked(单选框或多选框选中的样式)

表单状态

    <!-- 
        readonly:是否只读，布尔属性，不会改变表单显示样式
        disabled:是否禁用，布尔属性，会改变表单显示样式
    -->
    <form action="">
        <p>
            username:<input type="text" readonly value="用户名">
        </p>
        <p>
            user:<input type="text" disabled value="username">
        </p>
    </form>

iframe元素

1.通常用于在网页中嵌入另外一个页面
2.iframe是可替换元素
	特点
		①通常是行级元素
		②通常显示的内容取决于元素的属性
		③css不能完全控制其中的样式
		④具有行级块的特点

    <!-- 注：在iframe链接的百度页面打开淘宝地址 -->

    <a href="https://www.taobao.com" target="myframe">淘宝</a>
    <iframe name="myframe" src="http://www.baidu.com" frameborder="0" width="800px" height="500px"></iframe>

    <!-- height 和 width 属性用来定义iframe标签的高度与宽度。 
        属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
        frameborder 属性用于定义iframe表示是否显示边框。 
        设置属性值为 "0" 移除iframe的边框:
    -->

在页面中使用flash

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

    <!-- object和embed 可替换元素 
            data=""：表示嵌入的资源
            type=""表示嵌入的资源类型 使用的格式是MIME格式 比如资源是JPEG图片 image/jpeg
    -->
    <object data="资源路径" type="资源类型（图片、视频、音频）">
        <!-- 表示传参数，比如name="quality" value="hight"意思是说画面质量高 -->
        <param name="quality" value="hight">
        <embed src="路径资源" type="资源类型">

            <!-- 注意： 
                    有些浏览器兼容object，有些浏览器兼容embed，所以一般将embed放入object，这样即使object不兼容，也会执行embed
            -->
    </object>

其他元素

    <!-- 缩写词 -->
    <abbr title="Casecading Style Sheet">css</abbr>是用于为页面添加样式

    <!-- 提供给浏览器或者搜索引擎阅读的时间 -->
    <time datetime=""></time>

    <!-- 加粗 -->
    <b></b>

    <!-- 双引号（一小段引用文本） -->
    <p>
        《权力的游戏》有句经典的台词：<q>在权力的斗争中，非生即死，没有中间状态</q>
    </p>

    <!-- 一大段引用文本 -->
    <blockquote cite="引用文本路径"></blockquote>