HTML

HTM 全称是 Hyper Text Markup Language(超文本标记语言）
HTML并不是一门编程语言，而是一门描述性的标记语言，
用标签来说话如要在浏览器中显示一段文字就应用段落标签p ,如果要在浏览器里显示一张图片就应该使用img ,显示的东西不同使用的标签也会不同

“标签”也可说成 “元素” 是一个意思只是叫法不同，如p标签也可说成p元素
标签一般都是成对出现的，有一个"开始符号" 和一个"结束符号" 结束符号只是比开始符号多加了一个斜杠"/ " 。 和 
如"网站" 定义文字为斜体，浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：如这个就会把文字斜体显示出来

标签可分为2种：一般标签和自闭合标签
一般标签：有开始符号和结束符号，可在内部插入其他标签和文字
自闭合标签: 有开始符号，无结束符号，不可在内部插入其他标签和文字。如<meta/> <link/> <img/> <input/> <hr/>

基本标签
HTML结构（一个页面是是由四部分组成的）
1，文档声明 <!DOCTYPE html>
2. html标签 <html></html> 告诉浏览器这个页面从<html>开始，到</html>结束
3. head标签 <head></head> 网页的头部定义一些特殊的内容，如页面标题定时刷新外部文件
只有6个标签能放在head标签内
4. body标签 <body></body> 网页的身体大部分代码都是在这个标签对内部编写

<!DOCTYPE html>
<html lang="en">
<head>
    <!--UTF-8 防止页面出现乱码，每个HTML页面中都需要添加.
    这句话必须放在title标签及其他meta标签前面 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昔年网</title>
</head>
<body>
    
<h3>静夜思</h3>
<p>床前明月光,疑是地上霜</p>
<p>举头望明月,低头思故乡</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这个标题是浏览器栏目中显示的那个标题(页面标题) 而不是文章标题 -->
    <title>这个是网页的标题</title>
</head>
<body>
    <p>这个是网页的内容</p> <!--段落标签 定义一段文字-->
</body>
</html>

head标签只有5个标签能放在head标签内
第一个：title标签唯一的作用是定义网页标题的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这个标题是浏览器栏目中显示的那个标题(页面标题) 而不是文章标题 -->
    <!-- 网页标题是"昔年网" 无需每个页面都写，但实际开发中要求每一个页面的title都写上title -->
    <title>昔年网</title>
</head>
<body>
    <p>这个是网页的内容</p>
</body>
</html>

第二个：meta标签定义页面的特殊信息，如页面关键字页面描述这些信息不是给人看的，而是搜索引擎蜘蛛看的 (如百度蜘蛛，谷歌蜘蛛)
告诉"搜索蜘蛛"这个页面是干什么的

         keywords 和 description 是最常用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昔年网</title>
    <!-- 网页关键字 -->
    <meta name="keywords" content="绿叶学习网 前端开发 后端开发"/>
    <!-- 网页描述 -->
    <meta name="description" content="这是一个很有活力的网站">
    <!-- 版权声明 -->
    <meta name="copyright" content="本网站的文章都是原创,禁止转载"/>
</head>
<body>
</body>
</html>

meta标签的http-equiv属性只有两个重要的作用，定义网页所使用的编码，定义网页自动刷新跳转

  <!-- 告诉浏览器 该页面使用的编码是utf-8 -->
    <meta http-equiv="Content-Type" content="text/1.html";charset="UTF-8"/>
    <!-- 在HTML5标准中，上面的代码可简写。如果页面乱码 有可能没加上这一句代码 -->
    <meta charset="UTF-8">

<!-- 当前页面在6秒后，自动跳转到百度首页 -->
  <meta http-equiv="refresh" content="6; url=http://www.baidu.com"/>

第三个：link标签引入外部样式文件

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

第四个：style标签定义元素的CSS样式
第五个：script标签定义页面的JavaScript代码也可引入外部JavaScript文件

文本
重要的文本标签：语义：说明
strong : strong强调：粗体
em : emphasized强调 :斜体
sup :superscripted 上标 :上标
sub :subscripted下标 :下标

网页中的"特殊符号" 如大于号 &lt
小于号 &gt
版权符 &copy
注册商标&reg
网页中的"空格" ：按下空格键来实现空格是无效的，需要用代码实现&nbsp ,需要几个空格就标签里加多少个&nbsp(空格&nbsp是个特殊符号）

块元素和行内元素
块元素独占一行，排斥其他元素(包括块元素和行内元素）与其位于同一行
块元素内部科员容纳其他块元素和行内元素
行内元素可以与其他行内元素位于同一行
行内元素内部可以容纳其他行内元素，但不可以容纳块元素

 <div>
        <h2>各种小常识</h2>
    
    <h3>数学
        <p>&nbsp;&nbsp;勾股定理直角三角形:a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
    </h3>
    <hr/>
    <h3>语文
        <p>
            &nbsp;&nbsp;这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字
            这里是一段文字这里是一段文字这里是一段文字这里是
            
        </p>
    </h3>
    <hr/>
    <h3>英语
        <p>&nbsp;&nbsp;No pain,No gain</p>
    </h3>
    <hr/>
    <h3>化学
        <p> &nbsp;&nbsp;H<sub>2</sub>SO<sub>4</sub>是一种重要的工业用料，可以制作化肥</p>
    </h3>
    <hr/>
    <h3>经济
        <p>&nbsp;&nbsp;版权符号:&copy;</p>
        <p>&nbsp;&nbsp;注册商标:&reg;</p>
    </h3>
   
    </div>

列表
列表分为三种:有序列表，无序列表，和定义列表

   <!-- 
        无论是有序列表还是无序列表 ul标签和li标签  ol标签和li标签 必须配合使用，不能单独使用
        都可以用type属性来定义列表项符号 ，这个可以用css里的list-type-type属性来取代
     -->
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>

    <!-- 
    无序列表的2点注意事项
    1.ul元素的子元素只能是li,不能是其他元素
    2.ul元素内部的文本，只能在li元素的内部添加，不能在li元素外部添加
 -->
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>

   <!-- 定义列表 由2部分组成:名词和描述 -->
   <dl>
       <dt>名词</dt>
       <dd>描述</dd>
   </dl>
   <dl>
       <dt>HTML</dt>
       <dd>制作网页的标准语言,控制网页的结构</dd>
       <dt>CSS</dt>
       <dd>层叠样式表,控制网页的样式</dd>
       <dt>JavaScript</dt>
       <dd>脚本语言,控制网页的行为</dd>
   </dl>

问卷调查网页
大标题用h1标签，小标题用h3标签，前两个问题用有序列表，最后一个用无序列表

    <div style="border:solid green 1px">
        <h1>问卷调查</h1>
        <h3>1.你是通过什么途径来到我们网站的</h3>
        <ol type="A">
            <li>百度搜索</li>
            <li>谷歌搜索</li>
            <li>其他途径</li>
        </ol>
        <h3>2.你觉得我们网站的设计怎么样</h3>
        <ol type="A">
            <li>炫酷大方</li>
            <li>比较普通</li>
            <li>非常粗糙</li>
        </ol>
        <h3>3.你觉得这本书怎么样</h3>
        <ul>
            <li>通俗易懂</li>
            <li>内容丰富</li>
            <li>三个字,好到爆</li>
        </ul>
    </div>

表格
表格的组成部分
表格：table标签
行 :tr标签指的是table row(表格行）
单元格:td标签指的是table data cell(表行单元格）
表格标题:caption
表头单元格:th

在表格中有多少组<tr></tr> 就表示有多少行
表格是没有样式边框的

th 和td 在本质上都是单元格，但并不代表两者可以互换
显示：th标签中的内容会以 "粗体"和"居中"显示出来 ,但td标签不会
语义：th用于表头 , 而td标签用于表行

一个表格只有一个标题，也就是只有一个caption标签，一般位于整个表格内的第一行
为了表格语义话，HTML引入了thead表头 tbody表身 tfoot表脚三个标签，加了这三个标签后会让代码更具有逻辑性，还可以很好的结合CSS来分块控制样式

合并行：rowspan 指纵向的N个单元格合并

<td rowspan="跨越的行数"></td>

        table,tr,td,th{border:solid red 1px;}
    
    <table>
        <tr>
            <td>姓名</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">最喜欢的水果</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>草莓</td>   
        </tr>
    </table>

合并列：colspan 指横向的N个单元格合并

<td colspan="跨越的列数"></td>

   table,tr,td,th{border:solid red 1px;}
    
    <table>
        <tr>
            <td colspan="2">前端开发技术</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>jQuery</td> 
            <td>JavaScript</td>   
        </tr>
    </table>

语义化表格

 <!-- 表格语法 -->
    <table>
        <caption>表格标题</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!-- 表身 -->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!-- 表脚 -->
        <tfoot>
            <tr>
                <td>标准单元格5</td>
                <td>标准单元格6</td>
            </tr>
        </tfoot>
    </table>

        table,tr,td,th{
            border:solid red 1px;
        }
    </style>
  
    <table>
        <caption>学生成绩表</caption>
        <!-- 表头 -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>}

        <!-- 表身 -->
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>250</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>520</td>
        </tr>

        <!-- 表脚 -->
        <tr>
            <td>平均分</td>
            <td colspan="2">385</td>
        </tr>
    </table>

图片
图片img标签，要掌握3个属性：src alt 和title
src属性是img标签必不可少的属性图片路径图片地址意思一样，只是叫法不同
alt属性是描述图片的，描述的文字是给搜索引擎看的，当图片无法显示时会显示alt中的文字
title属性也是描述图片的，但这描述的文字是给用户看的，鼠标移动到图片上时候会显示title中的文字
实际中，src 和 alt 这两个是必选属性一定要加，title是可选属性可加可不加

    <img src="图片路径" alt="指定图片的提示文字" title="指定图片的提示文字">

图片格式
在网页中图片的格式有2种，"位图" "矢量图"
位图又叫"像素图" 由像素组成的图片，放大或缩小图片都会失真，位图可以使用ps来处理
常见位图的图片格式有三种(图片后缀可以看出来）.jpg .png .gif
如果想展示色彩丰富而高品质图片，就使用.jpg格式，(体积大，不支持透明)
如果是一般图片，为减少体积或者想要透明效果，就使用.png格式是一种无损压缩保证页面打开速度( 不适合存储颜色丰富的图片）
如果是动画图片，就可使用.gif格式

例子：.jpg格式不支持透明， .png格式支持透明, .gif格式可以做动画

   body{background-color: hotpink; }
        img:nth-child(1),img:nth-child(2){
            width: 200px;
            height: 200px;
        }
  
<img src="./img/1.jpg" alt=""/>
<img src="./img/2.png" alt="" />
<img src="./img/3.gif" alt=""/>

矢量图
.swf格式比较常见指的是Flash动画，矢量图可以使用Illustator软件来处理
在网页中很少用到矢量图，除非是一些字体图标

位图和矢量图的区别
1，位图适用于展示色彩丰富的图片，矢量图就不适合展示色彩丰富的图片
2. 位图的组成单位是"像素" 而矢量图组成单位是"数学向量"
3. 位图受分辨率的影响，图片缩小放大都会失真，而矢量图不受分辨率影响，图片缩小放大不会失真
4. 网页中的图片绝大多数都是位图，而不是矢量图

超链接
a标签来实现超链接，
文本和图片都可以设置超链接，不管哪种超链接都是把文字或图片放到a标签内部来实现

 <!-- 点击百度网文字，会跳转到百度网  target="_blank"在新窗口打开 -->
    <a href="http://baidu.com" target="_blank">百度网</a> 

    <!-- 点击图片，会跳转到百度网 target="_blank"在新窗口打开-->
   <a href="http://baidu.com" target="_blank"><img src="../img/pic_1.jpg" alt="百度网"/></a>

内部链接

在page1.html 里点击超链接跳转到page2.html 或者page3.html ,
这是内部链接，因为三个页面都是位于同一个网站根目录下

   <a href="page2.html">跳转到页面2</a>
    <a href="test/page3.html">跳转到页面3</a>

锚点链接也是内部链接的一种
指的是，点击某一个超链接，然后他就会跳到"当前页面" 的某一部分
想要实现锚点链接，需要定义两个
1，目标元素的id
2, a标签的href属性指向该id
id属性就是元素的名称，id名是随便起的(一般都是英文） id是唯一的，一个页面不允许出现相同的id

 <div>
     <a href="#article">推荐文章</a><br/>
     <a href="#music">推荐音乐</a><br/>
     <a href="#movie">推荐电影</a><br/>
 </div>
 
 <div id="article">
     <h3>推荐文章</h3>
     <ul>
         <li>朱自清-荷塘月色</li>
         <li>余光中-乡愁</li>
         <li>鲁迅-阿Q正传</li>
     </ul>
 </div>
 
 <div id="music">
    <h3>推荐音乐</h3>
    <ul>
        <li>朱自清-荷塘月色</li>
        <li>余光中-乡愁</li>
        <li>鲁迅-阿Q正传</li>
    </ul>
</div>

<div id="movie">
    <h3>推荐电影</h3>
    <ul>
        <li>朱自清-荷塘月色</li>
        <li>余光中-乡愁</li>
        <li>鲁迅-阿Q正传</li>
    </ul>
</div>

表单
表单的重要作用是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理
从外观上划分，表单可以分为8种
单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

表单指的是，文本框按钮单选框复选框下拉列表等的统称
所有的表单标签都放在form标签内部

 <form>
     <!-- 各种表单标签 -->
 </form>

 <form>
     <input type="text" value="这是一个单行文本框"/><br/>
     <textarea>这是一个多行文本框</textarea><br/>
     <select>
         <option>HTML</option>
         <option>css</option>
         <option>JavaScript</option>
     </select>
 </form>

form属性常用属性
name 表单名称，一个页面表单不止一个，没一个form标签就是一个表单，为区别表单 可用name属性来给表单进行命名
method 提交方式，指定表单数据使用哪一种http提交方法，取值有2个，get 和 post post安全性好，实际中也用的妒忌心
action 提交地址 , 指定表单数据提交到哪一个地址进行处理
target 打开方式 , 指定窗口打开的方式，一般只用到_blank
enctype 编码方式，指定表单数据提交的编码方式，一般无需设置，除非要用到上传文件功能

<form name="myForm" method="post" action="index.php" target="_blank">

input标签
单行文本框，密码文本框，单选框，复选框，普通按钮，提交按钮，重置按钮，文件上传，都用input标签

还有value size 属性

  <form>
        <!-- 外观是一样的 加了maxlength 单行文本框最多只能输入5个字符-->
        账号：<input type="text"/><br/>
        账号：<input type="text" maxlength="5"/><br/>

        <!-- 密码框外观和单行文本框一样，但输入内容后就哟区别了，密码框里的内容是不可见的 -->
        <!-- 密码框与文本框具有相同的属性 -->
        密码：<input type="password"/><br/>
        密码:<input type="password" maxlength="5"/>
    </form>

单选框
复选框

 <!-- 默认情况下，想要几项选中就使用checked属性    -->
 <!-- 必须要加上name属性，且取值要一样 ，-->
 <input type="radio" name="组名" value="取值"/><!-- 单选框 --> 对同一组的单选框必须设置一个相同的name
 <input type="checkbox" name="组名" value="取值"/><!-- 多选框 -->

单选框加不加value好像没什么区别，为什么还加上
是为了方便JavaScript或者服务器操作数据，

 <form method="post">
        <!-- 加label标签 是为了让表单元素与后面的文本 关联起来 -->
        性别：
        <label> <input type="radio" name="gender" value="男" checked/>男</label>
        <label> <input type="radio" name="gender" value="女"/>女</label><br/>

        年龄:
        <label><input type="radio" name="age" value="70后">70后</label>
        <label><input type="radio" name="age" value="80后">80后</label>
        <label><input type="radio" name="age" value="90后" checked>90后</label>
    </form>

  <form method="post">
        您喜欢的水果<br/>
        <label><input type="checkbox" name="fruit" value="苹果" checked/>苹果</label>
        <label> <input type="checkbox" name="fruit" value="香蕉"/>香蕉</label>
        <label> <input type="checkbox" name="fruit" value="梨子" checked/>梨子</label>
        <label> <input type="checkbox" name="fruit" value="西瓜"/>西瓜</label>
    </form>

按钮

  <form method="post">
        <!-- 
         这3个按钮外形都一样，但实际功能却不一样
         普通按钮:一般情况下都是配合JavaScript来进行各种操作的
         提交按钮:一般都的用来给服务器提交数据的
         重置按钮:一般是用来清楚呢用户在表单中输入的内容的 
                 只能清空他所在form标签内表单中的内容，
                 对当前所在form标签之外的表单清除无效  
         -->
        <input type="button" value="按钮"/><!-- 普通按钮 -->
        <input type="submit" value="按钮"/><!-- 提交按钮 -->
        <input type="reset" value="按钮"/><!--  重置按钮 -->
    </form>

        window.onload=function(){
            var oBtn=document.getElementsByTagName("input");
            oBtn[0].onclick=function(){
                alert("我爱中国");
            }
        }

    <form method="post">
    <input type="button" value="表白">
    </form>

文件上传

 <form method="post">
    <input type="file">
    </form>

多行文本框

    <form method="post">
        个人简介<br/>
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
    </form>

下拉列表

 <form method="post">
        <!-- 
         select常用的2个属性：multiple 设置下拉列表可以选择多项  默认下拉列表只能选一项
                             没有属性值，是HTML5的最新写法和单选框中checked属性是一样的
                             size  设置下拉列表显示几个列表项，取值为整数  size="5" 
         option常用属性有2个:selected 是否被选中
                            value    选项值 是配合JavaScript以及服务器进行操作的                    
         -->
      <select multipl>
          <option value="HTML">HTML</option>
          <option value="CSS">CSS</option>
          <option value="jQuery" selected>jQuery</option>
          <option value="JavaScript">JavaScript</option>
          <option value="Vue.js">Vue.js</option>
          
      </select>
    </form>

   <form method="post">
     昵称：<input type="text" /><br/>
     密码：<input type="password"/><br/>
     邮箱：<input type="text">
     <select>
         <option>qq.com</option>
         <option>163.com</option>
         <option>999.com</option>
     </select><br/>
     性别：
     <label><input type="radio" name="gender" value="男"/>男</label>
     <label><input type="radio" name="gender" value="女"/>女</label>
     <br/>
     爱好：
     <label><input type="checkbox" name="hobby" value="旅游"/>旅游</label>
     <label><input type="checkbox" name="hobby" value="摄影"/>摄影</label>
     <label><input type="checkbox" name="hobby" value="运动"/>运动</label>
     <br/>
     个人简介:<br/>
     <textarea rows="5" cols="20">自我介绍</textarea>
     <br/>
     上传个人照片：
     <label><input type="file"/></label>
     <hr/>
   <input type="button" value="立即注册"/>

    </form>

框架，可以使用iframe标签来实现一个内嵌框架

 <iframe src="链接地址" width="数值" height="数值"></iframe>

src: 定义链接页面的地址必选属性
width 和 height 可选属性定义框架的宽高

当前页面嵌入另外一个页面也可同时嵌入多个页面

   <iframe src="https://www.baidu.com/" width="500" height="500"></iframe>
   <iframe src="https://www.sohu.com/" width="500" height="500"></iframe>

posted @ 2020-12-29 13:21 沁莹阅读(252) 评论(0) 收藏举报

刷新页面返回顶部

沁莹

HTML

公告