前端开发 — HTML

HTML

HTML 超文本标记语言

HTML特征:

• 对换行和空格不敏感
• 空白折叠

1.1 HTML标签

标签也称为标记。

标签的种类：

• 1.双闭合标签
• 2.单闭合标签

1.1.1 head标签

• meta 提供基本网站元信息的标签

  <meta charset="UTF-8">  <!--标签的属性：使用的编码—'utf-8'-->
  

• title 显示网站的标题

• link 链接css资源文件、网站图标

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

• script 链接脚本js(JavaScript)文件

  <script src="js/index.js">
  

• style 内嵌样式

1.1.2 body标签

1.1.2.1 标题标签

h1~h6标题标签

例：

标题1

1.1.2.2 段落标签

p标签 段落标签

<p>
    人们感动于老英雄淡泊名利无私奉献的精神，敬佩老党员一辈子深藏功名、坚守初心的境界大家纷纷表示。
</p>

&nbsp；空格字符

1.1.2.3 超链接标签

a （anchor 锚点）超链接标签

• href :
  • 链接到一个新的地址
  • 回到顶部
  • 跳转邮箱
  • 下载文件
• title 鼠标悬浮上的标题
• style 行内样式
• target 目标
  • 默认是_self ，在当前页面中打开新的链接
  • _blank 在新的空白页面打开新的链接

<a href="https://www.apeland.cn" style="text-decoration:none;color:red; " title="小圆圈">小猿圈</a>
<!--text-decoration:none  去掉链接的下划线-->

<h6 id="top"></h6>
<a href="#top">回到顶部</a>  <--跳转到  id="top" 处-->

1.1.2.4 图片标签 img

• src 链接的图片资源的地址
• title 鼠标悬浮时显示的标题
• style
• alt 图片加载失败的时候显示的标题

<img src="images/timg.jpg" alt="校花" width="200" height="300"><--width 图片宽度，height 图片高度-->

图片可以和超链接合用 a + img:

<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&" title="美眉">
    <img src="images/timg.jpg" alt="校花" width="200">
</a>

1.1.2.5 字体标签

<u> </u> 下划线

<b> </b> 加粗

<strong> </strong> 加粗

<em> </em> 斜体

<i> </i> 斜体

1.1.2.6 特殊字符

•  ：空格 （non-breaking spacing，不断打空格）
• <：小于号（less than）
• >：大于号（greater than）
• &：符号&
• "：双引号
• '：单引号
• ©：版权©
• ™：商标™

1.1.2.7 列表标签

• 1.ul无序列表标签

  ul — unordered list

  • 它的子标签是li

  • type属性：（默认实心圆）

    • square 方形
    • circle 圆心

     <h3>我的teacher</h3>
        <ul type="square">
            <li>
                <a href="">小米手机</a>
            </li>
            <li>女神</li>
            <li>太白</li>
            <li>mjj</li>
            <li>江老板</li>
        </ul>
    

• 2.ol有序列表标签

  ol — ordered list

  • 它的子标签也是li
  • type属性：(默认1，2，3……)
    • a
    • A
    • i
    • I
  • start属性：定义开始的位置

  <h3>我的课程</h3>
  <ol type="i">
      <li>python</li>
      <li>web前端</li>
      <li>java</li>
      <li>linux</li>
  </ol>
  

1.1.2.8 表格标签 table

• th定义表头
• tr定义表行
• td定义表单元格数据

<!--border 外边框，cellspacing外边框间的间隙，width宽度填充整个屏幕-->
<table border="1" cellspacing="0" width="100%">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
        <td>sex</td>
    </tr>
    <tr>
        <td>1</td>
        <td>沛齐</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

1.1.2.9 表单标签form

<1.>form表单

• action 定义表单被提交时发生的动作,提交给服务器处理程序的地址(ip、端口);如果是空的字符串，它表示当前服务器地址

• method

  • 作用：定义表单提交数据时的方式

  • 提交的方式：

    • get

      默认值，明文提交，所提交的数据是可以显示在地址上，安全性低

      提交数据有大小限制，最大为2KB

    • post

      隐式提交-所提交的内容，不会显示到地址栏上，安全性高

      无大小限制

<2.>表单控件分类

(1).input 组元素

• 1.type 控件的类型

  • text 单行文本输入框，明文显示用户输入的数据

    <p id="username">
        <input type="text" name="name" value="">
    </p>
    

  • password 密码框，密文显示用户输入的数据

    <p id="password">
         <input type="password" name="pwd">
    </p>
    

  • radio 单选框

    • 产生互斥效果，给每个单选按钮设置相同的name属性值
    • 如何默认选中，给单选按钮添加checked属性

    <p>
        <input type="radio" name="sex" checked = 'checked'>男
        <input type="radio" name="sex">女
    </p>
    

  • checkbox 多选框

    默认选中添加checked属性

    <p>
        <input type="checkbox" name="a" value="唱歌"> 唱歌
        <input type="checkbox" name="b" value="跳舞"> 跳舞
        <input type="checkbox" name="c" value="音乐"> 音乐
    </p>
    

  • file 上传文件所用

    <input type="file">
    

  • datetime

  • submit 功能固定化，负责将表中的表单控件提交给服务端 — 提交按钮

    <!--默认为提交按钮-->
    <input type="submit">
    <--登录按钮-->
    <input type="submit" value="登录">
    

• 2.name 控件的名称，提交服务器的键值对的 name

• 3.value 控件的值，提交服务器的键值对的 value

（2).select 下拉列表 ： multiple

• name 下拉列表的名字

• 默认选中添加checked属性

• option value

  <select name="fav" multiple>
      <option value="smoke">吃饭</option>
      <option value="drink" selected>睡觉</option> <!--默认选中项-->
      <option value="tangtou">打豆豆</option>
      <option value="tangtou">唱</option>
      <option value="tangtou">跳</option>
      <option value="tangtou">rup</option>
      <option value="tangtou">音乐</option>
      <option value="tangtou">烫头</option>
      <option value="tangtou">烫头</option>
  </select>
  

(3).textarea标签

textarea 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸

• name
  
  value
• cols 列
• rows 行

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

1.1.2.10 div标签

div（division：分割）标签称为盒子标签

div标签：把网页分割成不同的独立的逻辑区域

<div class="top_l">
    <a href="#">小米商城</a>|
    <a href="#">MIUI</a>|
    <a href="#">lot</a>
</div>

如何让文本垂直和水平居中？

• 让行高等于盒模型的高度实现垂直居中
• 使用text-align:center；实现文本水平居中

<style>
    div{
        width:200px;
        height: 60px;
        background-color: red;
        text-align:center;
        line-height: 60px;
    }
</style>
<div>
 wusir
</div>

1.1.2.11 span标签

span标签: 小区域标签,在不影响文本正常显示的情况下，单独设置对应的样式

<div class="top_l">
    <a href="#">小米商城</a>
    <span class="sep">|</span>
    <a href="#">MIUI</a>
    <span class="sep">|</span>
    <a href="#">lot</a>
    <span class="sep">|</span>
    <a href="#">云服务</a>
</div>

<style>
    span.active{
        font-weight:bold;
    }
</style>
<p>
    <span class='active'>央视网消息</span>（新闻联播）：中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。
</p>

1.1.2.12 lable标签

lable标签：它中的for属性跟表单控件的id属性有关联

<form action="">
    <label for="username">用户名：</label>
    <input type="text" id="username">
    <label for="pwd">密码：</label>
    <input type="text" id="pwd">
</form>

1.1.2.13 br标签、hr标签

<br> 换行标签

<hr> 分割线标签

1.2 HTML标签的嵌套关系

1.块级标签（又叫行级标签）

• 1.独占一行
• 2.可以设置宽高，如果不设置宽，默认是父标签的100%宽度

常用的块级标签有: h1~h6 、ul 、ol 、li 、form 、table 、tr 、p 、div

2.行内标签（也叫内联元素）

• 1.在一行内显示
• 2.不可以设置宽高，如果不设置宽高，默认是字体的大小

常用的行内标签有: b 、strong 、i 、em 、a 、td 、span

3.行内块标签

行内块是属于行内标签的

• 1.在一行内显示
• 2.可以设置宽高

行内块标签：input 、img

4.在网页中：行内转块和行内块是非常实用的

• 我们可以通过display属性进行强制修改规则。
• 显示方式 display :
  • inline 显示行内
  • inline-block 显示行内块
  • block 显示块

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: yellow;
        display: inline;
    }
    a{
        width: 100px;
        height: 40px;
        background-color: red;
        /*显示方式： block 显示块，inline 显示行内  inline-block 显示行内块*/
        display: inline-block;
        /*文本排列方式：left-靠左 center-居中 right-靠右*/
        text-align: center;
        /*行高：一行的高度。当行高=盒子模型的高度 实现垂直居中*/
        line-height: 40px;
        /*文本修饰：none-无修饰(去除下划线)，underline-下划线 ，line-through 删除线 ，over line-上划线*/
        text-decoration: underline;
        color: #333333;
    }
</style>
<body>
    <p class="box">wusir</p>
    <a href="">百度一下</a>
	<del>aaaaa</del>  /*删除线*/
</body>

5.嵌套关系：

• 1.块级标签可以嵌套块级和行内以及行内块
• 2.行内标签尽量不要嵌套块级
• 3.p标签不要嵌套div，也不要嵌套p，可以嵌套 a / img / 表单控件