HTML基本概念及基本标签

HTML基本概念及基本语法

1.HTML的基本概念

1.1  B/S、C/S基本概念

• B/S（Browser/Server）:指的是浏览器端与服务器端工作模式，优点相对节省本地存储空间，不足是需要占用大量网络宽带【网速】
• C/S 【Client/Server】 :指客户端与服务器端工作模式，无需占用大量网络宽带，相对节省网络宽带资源，不足是需要占用大量本地存储空间

1.2 HTML 简介

• HTML：Hyper Text Markup Language【超文本标记语言】
• 超文本：超出文本之外，还可以包含图片，音频，视频等资源
• 标记语言：由标记标签或转义字符表表示
• 标签形式：<></>
• 作用：制作网页静态页面，可以直接在浏览器中直接运行。大多数浏览器厂商都会提供HTML引擎

2. HTML基本语法

• HTML检查浏览器控制台

  • 　　F12 【检查】：进入浏览器控制台，F5【网络监听】，查看报错原因
  • 　　进入控制后台选项

  • • Elements：浏览器引擎解析HTML后代码

    • Console：控制台

    • Sources：HTML源代码

    • NetWork：网络监听

2.1 HTML 基本语法介绍

• HTML标签分类：1.成对标签<></>有开始和结束，2.自结束标签
• HTML不区分大小写，浏览器引擎解析后HTML均为小写
• HTML可以嵌套，但是不能交叉嵌套，只能在成对标签内中心部嵌套
• 标签中必须有值，且数值用双引号括起来
• 注释不能嵌套

2.2 HTML常用标签

• <h1></h1> 至 <h6></h6>  制作标标题，自带换行效果

• <br> 或 <br/> 网页中实现换行
• <div></div> 分区布局，块级元素，自带换行效果
• <span></span>  分区布局，内联元素，不带换行效果
• <p></p> 拆分段落，内容自成一段落，块级元素，自带换行效果
• <hr>或<hr/> 在网页中制作水平线
• HTML转义字符【实体字符】
  • 　　以&开头以；结尾
  • 普通空格：&nbsp;
  • 中文空格：&emsp;
  • 大于号：&gt;
  • 小于号：&lt;
  • 版权号：&copy；

2.3HTML重点标签

• <img src="#  ">  插如图片
  • src：必须属性，设置插入图片路径
  • title：设置鼠标移入悬停时的，提示文本信息
  • alt：设置图片路径有误时，提示文本信息
• <a href="# "></a> 设置超链接
  • href：设置连接目标资源路径
  • target：设置连接目标资源方式
    • _blank：设置目标资源以新选项卡打开
    • _self：设置目标资源以当前选项卡打开【默认值】
• <ol type=" "><li></li></ol> 设置有序列表
• • type：设置有序列表类型
  • a|A：排序类型，大小写字母风格
  • i | I：罗马数字风格
  • 1：数字排序【默认】
• <ul type=""><li></li></ul>无序列表
  • type：设置无序列表类型   【可以自定义】
  • disc：实心圆形
  • circle：空心圆形
  • square：实心方形
  • none：无列表类型
• 项目中路径问题：建议使用绝对路径 @{/}   ../上一级目录
• <table></table> 设置表格   border：制作表格边框，wedth="xxpx":宽，height=”xxpx“：高，align：制作水平对齐方式，left：左对齐，light：右对齐  center：居中
  • <tr></tr>      制作表的行数　　　　
  • <th></th>　制作表头
  • <td></td>　制作单元格
  • rowspan：跨行【被跨行跨列依然存在，需要删除】
  • colspan：跨列
• 　　　　　　

<table border="1" width="500px" height="300px" align="center">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr align="center">
            <td colspan="2">2122</td>
<!--            <td>22</td>-->
            <td rowspan="2">2333</td>
        </tr>
        <tr align="center">
            <td>31</td>
            <td>32</td>
<!--            <td>33</td>-->
        </tr>
    </table>

3. HTML中表单

3.1表单语法

• 使用form标签制作表单

• 使用input&select&button&textarea标签制作表单项

示例代码

<form action="" method="">
    <input type="">
    <select>
        <option></option>
    </select>
    <button></button>
    <textarea></textarea>
</form>

3.2 form标签中属性

• action：设置表单提交路径
• method：设置表单提交方式
  • get：请求参数在地址栏中，相对不安全
  • post：请求参数在请求体中，相对安全

3.3 input 标签中属性

• type：设置表单项类型

  • text：单行文本框

  • password：密码框

  • submit：提交按钮【单击提交按钮，会触发表单提交事件】

  • radio：单选框【单选按钮】

  • checkbox：多选框

  • file：文件域【文件上传时使用】

  • hidden：隐藏域【需要数据，但不希望数据显示时，使用隐藏域】

  　　

• name：设置表单项名称

  • 注意：如需要提交数据的表单项，必须设置name属性值【如不设置无法提交数据】

  • 注意：一组单选框或多选框，必须设置相同的name属性值【否则无法实现单选效果】

• value：设置表单项value值
  • 　　如为按钮设置value属性值。属性值显示按钮的显示文本
  • 如为文本框&密码框设置value值，属性值显示在当前表单项中，为其中默认值
    • 　　用户输入用户名&密码，其实就是为value属性赋值
• checked：设置单选框&多选框默认值
• <select name><option value><></select>：下拉 列表【下拉框】

示例代码

<form action="regist_success.html" method="get">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="pwd"><br>
    确认密码：<input type="password"><br>
    性别：<input type="radio" name="gender" value="man" checked="checked">男
            <input type="radio" name="gender" value="women">女
    <br>
    爱好：<input type="checkbox" name="hobby" value="敲代码" checked>敲代码
            <input type="checkbox" name="hobby" value="剧本杀">剧本杀
            <input type="checkbox" name="hobby" value="唱跳rap">唱跳rap
    <br>
    喜爱明星：
    <select name="star">
        <option value="lx">刘翔</option>
        <option value="llj">李连杰</option>
        <option value="hg">胡歌</option>
        <option>成龙</option>
    </select>
    <br>
    文件域：<input type="file">
    <br>
    隐藏域：<input type="hidden" name="id"  value="1001">
    <br>
    textarea【多行文本框】：
    <textarea cols="50" rows="20" readonly>dddddsss</textarea>
    <input type="checkbox">同意
    <br>
    <button>注册</button>
    <input type="submit" value="注册">
    <input type="reset">
</form>