HTML学习内容

  1. 先编写一个简单的HTML;
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <!--
    作者:offline
    时间:2018-10-21
    描述:body
    作用:body中的内容会显示的浏览器中
    -->
    hello,这是我的第一个网页
    </body>
    </html>

运行后浏览器便会显示:hello,这是我的第一个网页

  1. HTML头文件
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!--
    作者:offline
    时间:2018-10-21
    描述:head头文件
    作用:用来告诉浏览器解释该页面的编码是UTF-8
    -->
    <title></title>
    </head>
    <body>

    </body>
    </html>

补充<meta>标签
(1)定义和用法
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

(2)HTML 与 XHTML 之间的差异

在 HTML 中,<meta> 标签没有结束标签。

在 XHTML 中,<meta> 标签必须被正确地关闭。

(3)提示和注释:

注释:<meta> 标签永远位于 head 元素内部。

注释:元数据总是以名称/值的形式被成对传递的。

(4)必须属性:content 定义与 http-equiv 或 name 属性相关的元信息
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

     content 属性始终要和 name 属性或 http-equiv 属性一起使用。

     可选属性:http-equiv   把 content 属性关联到 HTTP 头部。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称  /值对。

当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

   例如:
                 <meta http-equiv="charset" content="iso-8859-1">
             charset 属性规定在外部脚本文件中使用的字符编码。如果外部文件中的字符编码与主文件中的编码方式不同,就要用到 charset 属性。默认的字符编码是 ISO-8859-1。

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />      这个便是告诉服务器准备一个HTML文档,编译类型是UTF-8;

                name  把 content 属性关联到一个名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
                    如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

             例如:
             <meta name="keywords" content="HTML,ASP,PHP,SQL">
             name中的keywords为文档定义一组关键字,而content便是分别罗列   了这一组的关键字;

              scheme   定义用于翻译 content 属性值的格式。用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

3.文本标签

(1)<style> 标签
用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何 呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的 值是 "text/css"。<style></style>
style 元素位于 head 部分中。
(2) h1-h6标签,可定义标题,从h1开始到h6逐步减小;<h1></h1>
(3) 水平线标签<hr/>;
(4) 段落标签<p></p>;
(5) 段落缩进标签<blockquote></blockquote>;
(6) 上下标标签sup和sub <sup><sup/><sub><sub/>;
(7) 原样输出标签<pre></pre>;
(8) 字体标签 <font></font>;
color属性指定字体颜色
size属性:指定字体大小
face属性:字体的类型(宋体,黑体/默认是宋体)
(9) 粗体标签<strong></strong>
(10)斜体标签<em></em>
(11)列表标签
A:有序列表
有序列表标签<ol> <li></li> </ol>默认列表为数字排序
有一type属性
B:无序列表
无序列表标签<ul> <li></li> </ul>默认列表为disc实心圆点排序
有一type属性
(12)块标签 <div></div>在HTML中直接设置属性, 在css<style></style>标签中设置div{属性内容}属性,然后可直接调用<div></div>标签进行实现;
(13)行内标签<span></span>在HTML可直接用,在css<style></style>标签中设置#spanid{属性内容}属性,然后可直接调用<span id=spanid></span>标签进行实现(定义id名前加#);被用来组合文档中的行内元素,span没有固定的格式表现。当对它应用样式时,它会产生视觉上的变化。
div标签(div+Css进行网页布局 :盒子模型)和span标签(span标签:表单验证)可以更加有效的使用;

    上述内容表示如下:

    <!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者:offline
时间:2018-10-21
描述:style标签
-->
<style>
div{

            background-color: #E4B9C0;
        }
        #span{font-size:24px;}
    </style>
</head>
<body>

  <!--
    作者:offline
    时间:2018-10-21
    描述:h6-h1标签
  -->
<h6>标题1</h6>
<h5>标题2</h5>
<h4>标题3</h4>
<h3>标题4</h3>
<h2>标题5</h2>
<h1>标题6</h1>

  <!--
    作者:offline
    时间:2018-10-21
    描述:水平线标签
  -->
<hr />
<!--
    作者:offline
    时间:2018-10-21
    描述:段落标签p
-->
<p>
    生活如酒,或芳香,或浓烈,因为诚实,它变得醇厚;生活如歌,或高昂,或低沉,因为守信,它变得悦耳; 生活如画,或明丽,或素雅,因为诚信,
    它变得美丽。
</p>
<p>
    若能掬起一捧月光,我选择最柔和的;若能采来香山红叶,我选择最艳丽的;
    若能摘下满天星辰,我选择最明亮的。也许你会说,我的选择不是最好,但我的选择,我相信。
</p>
<!--
    作者:offline
    时间:2018-10-21
    描述:blockquote段落缩进标签
-->
<blockquote>
    生活如酒,或芳香,或浓烈,因为诚实,它变得醇厚;生活如歌,或高昂,或低沉,因为守信,它变得悦耳; 生活如画,或明丽,或素雅,因为诚信,
    它变得美丽。
</blockquote>
<hr />
<!--
    作者:offline
    时间:2018-10-21
    描述:上下标标签sup sub
-->
数学公式:y=x^2    y=x<sup>2</sup>    化学公式:水H2O    H<sub>2</sub>O
<hr />
<!--
    作者:offline
    时间:2018-10-21
    描述:原样输出标签pre
-->
<pre>
    function  pow(){
        alert("弹框")
    }
</pre>
<hr />
<!--
    作者:offline
    时间:2018-10-21
    描述:字体标签font
-->

<font color="aqua" size="7" face="微软雅黑">王某人</font>
<br />
<!--
作者:offline
时间:2018-10-21
描述:粗体strong和斜体em
-->
<strong>不去不去怕了怕了</strong>
<em>不去不去怕了怕了</em>
<hr />
<!--
作者:offline
时间:2018-10-21
描述:列表标签
-->
你喜欢那种类型的美女?
<ol>
<li>萝莉</li>
<li>御姐</li>
<li>青春</li>
<li>可爱</li>
</ol>
你不喜欢那种男人?
<ol type="A">
<li>臭狗蛋子</li>
<li>大猪蹄子</li>
</ol>
<hr />
<ul>
你身为一个中国人自豪吗?
<li>自豪</li>
<li>自豪</li>
<li>自豪</li>
<li>非常自豪</li>
</ul>
<ul type="circle">
你有知己吗?
<li>有</li>
<li>没有</li>
<hr />
</ul>
<!--
作者:offline
时间:2018-10-21
描述:块标签div
-->
<div>可直接配合上面调用style内设置的div属性调用</div>
<br />
<div style="background-color: #5BC0DE">也可以直接设置</div>
<hr />
<!--
作者:offline
时间:2018-10-21
描述:行内标签
-->
<span id="span">使用id调用</span><br />
<span>当然</span><br />
<span style="font-size: 24px;">也可以直接设置</span>
</body>
</html>

运行可看;

  1. 超链接标签<a></a>

    常用属性:
    href属性:需要连接到的资源文件或者地址;
    target属性:打开资源文件的方式 _self 当前窗口打开 _blank 新建一个窗口打开;
    超链接的作用:
    1)连接到资源文件或者资源地址
    2)作为锚连接来使用

                        如果是在同一个html页面下:
                                1)打锚点
                                    <a 指定name锚点名称属性="属性值"></a>
    
                                2)创建一个连接到锚点的超链接
                                    <a href="#锚点名称">点我</a>
    
                        在不同html页面下的使用:
                                1)在另一个页面上先打锚点
                                    <a name="锚点名称"></a>
                                2)在当前页面下创建一个连接到锚点的超链接
                                    <a href="文件名称或者地址#锚点名称">点我</a>
    
               <!DOCTYPE html>

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <a href="http://www.baidu.com">连接百度</a&gt;
    <a href="maodian.html#list" target="_self">跳转1</a>
    <a href="maodian.html#list" target="_blank">跳转2</a>
    </body>
    </html>

再建立一个新HTML,命名maodian.html

打锚点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="list"></a>
我的天哪!!
</body>
</html>

5.图像标签 : img 空标签体
<img/>
属性:
src:链接到的资源图片
width:图片的宽度 两种方式:一种指定px(像素) 第二种:百分比
title:悬停状态,会显示文字
alt:当图片失效的时候,用来解释说明该图片
height:图片的高度px

            <!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--img src="img/111111111111.jpg" width="50%" title="微博" alt="微博图标" /-->
<img src="img/111111111111.jpg" width="500px" title="微博" alt="微博图标" height="350px"/>
</body>
</html>

6.转义字符

转义字符可搜索转义字符标;
现举例几个:< 小于号 ;> 大于号 ;  空格 ; & 和号 ; " 引号;® 注册商标 ; © 版权所有 ; 。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>标题</h3>
<h3>标题 </h3>;
西部开源<sup>®</sup>   2007-2018<sup>©</sup>
</body>
</html>

7.表格标签table

表格标签:<table></table>  
                    一个表格要想有效果:必须有边框的属性
                    border :边框  (1px)
                    align:当前表格在浏览器中的对其方式
                    属性值:left   center  right
                    width:表格的宽度
                    height:表格的高度
                    bgColor:背景色

                    <caption></caption>:定义表格标题,放在table标签后
                    行标签:tr
                    表头标签:th(特点:自动居中,并且自动适当加粗)
                    单元格(列):td

                    rowspan:行合并
                    colspan:列合并

         例如:
                     <!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" align="center" width="400px" height="300px" bgcolor="#FFFF00">
<caption><h1>XXX学校的成绩表</h1></caption>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr align="center">
<td rowspan="2">王某人</td>
<td>计算机1班</td>
<td>100</td>
</tr>
<tr align="center">
<td>计算机二班</td>
<td>80</td>
</tr>
<tr align="center">
<td>刘某人</td>
<td>数学一班</td>
<td>0</td>
</tr>
<tr align="center">
<td colspan="2">平均分</td>
<td>60</td>
</tr>
</table>
</body>
</html>

8.表单标签

form两个重要的属性:
action:提交的地址(可以是资源文件或者URL:统一资源定位符)
method:提交方式:常用的两种:post get

            文本输入框:<input type =text/>

            注意事项:在表单标签中,name属性一定要指定,作为后台提交

            onsubmit:表示当前表单是否提交成功,
            true:表示提交成功
            false:表示提交失败

            文本输入框
            <input type ="text" />
            name属性:必填项(给后台标记的)  
                value表示输入框的内容
            密码输入框:非明文的形式显示出来
            <input type ="password" />
            name属性:必填项(给后台标记的)

            单选框:<input type="radio" />
            name属性:必填  将性别看成同一组信息

            复选框:
            <input type="checkbox" />
            name属性:必填:将这些复选框看成同一组信息

           !!!(重点)隐藏域:<input type="hidden" name="hi" />
           注意事项:不会显示一些效果,但是他可以携带数据

          上传照片:
          <input type="file" name="photo">

          文本域:<textarea></textarea>
          属性:name属性必填
          rows:文本雨中有多少行
          cols:一行能写多少个字符

         下拉菜单
         <select name="必填">
         <option>请选择</option>
         </select>

         按钮:<input type="button" />
         指定value属性
         type="submit"  提交
         type ="reset" 重置

                上述标签的简单实现:
                <!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="NO6.html" method="post" οnsubmit="return checkALL()">
用户名: <input type="text" name="username" value="wangyugui"/><br />
密码: <input type="password" name="pwd" value="123456" /><br />
性别: <input type="radio" name="xingbie" value="男"/>男
<input type="radio" name="xingbie"/>女<br />
爱好: <input type="checkbox" name="hobby" value="吃鸡"/>吃鸡
<input type="checkbox" name="hobby" value="看书"/>看书
<input type="checkbox" name="hobby" value="运动"/>运动
<input type="checkbox" name="hobby" value="听歌"/>听歌<br />

            <input type="hidden" name="hi" id="hidenId" /><br />
        上传照片:<input type="file" name="photo" /><br /> 
        自我描述:<textarea name="text" rows="10" cols="20">开始表演</textarea><br />
        籍贯:    <select name="jg">
                     <option value="请选择">请选择</option>
                     <option value="湖南">湖南</option>
                     <option value="湖北">湖北</option>
                     <option value="山西">山西</option>
                     <option value="陕西">陕西</option>
                 </select>
                 <input type="button"value="这是个按钮" /><br />
                 <input type="submit"value="提交" />  
                 <input type="reset" value="重置" />
    </form>
</body>

</html>

9.面试题?:表单标签中method提交方式post和get的区别?!!!!

                get方式提交:
                            1)将用户的信息展示到了地址栏中(不安全)
                            2)get方式提交,提交的文件大小有限制,不超过64kb

                post提交方式:
                            1)post提交方式不会将用户的信息显示到地址栏中
                            2)该提交方式提交文件大小无限制!                   

转载于:https://blog.51cto.com/13678296/2307043

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值