01-03常用标签

  • HTML入门
  • DOCTYPE
  • 常用标签
  • 表格table
  • 表单form

HTML入门

软件大致分为两种:CS架构软件和BS架构的软件

C/S和B/S

C/S架构是指客户端/服务器【Client/Server】架构,桌面应用程序采用的多是这种结构,比如我们使用的QQ、Foxmail等

B/S结构是浏览器/服务器【Browser/Server】的简称,通过浏览器就可以访问,比如我们使用淘宝、京东、百度等

BS/CS的优缺点

(1) C/S : 更加安全(面向相对固定的用户群),速度更快(专用服务器),但是需要单独安装客户端,而且每次升级都要重新安装客户端
(2) B/S : 用浏览器代替客户端,不用单独安装,客户端不必维护。但是安全性和稳定性相对CS架构的软件较弱

Java主要用于开发BS架构的软件

DOCTYPE

概念:DOCTYPE是Document Type(文档类型/申明 = DOCTYPE声明)的简写,DOCTYPE不属于HTML标签。在页面中用来指定页面所使用的HTML版本

常用的DOCTYPE

  1. HTML 5
DOCTYPE html>
DOCTYPE 声明必须是HTML文档的第一行,位于 <html> 标签之前
网页文件一定要加上DOCTYPE声明,否则浏览器可能会使用自带的混合怪异模式解析,造成不能理解的问题
现在开发都直接使用H5的声明方式 : DOCTYPE html>

常用标签

概念:HTML是以标签来进行描述,学习HTML基本上就是认识HTML标签的含义与作用

分类:

  1. 单标签:<标签名 /> 我们以图片标签为例进行演示学习
  2. 双标签:<标签名>内容 我们以a标签为例进行演示学习

属性认识:

  1. HTML标签中可以定义一个或多个属性,提供更多信息
  2. 属性总是以名称/值对的形式出现,语法为 属性名=“属性值”
  • title标签:用来声明网页的标题,例如我们在浏览器中输入百度,浏览器就会显示百度的标题
<title>百度一下,你就知道title>
  • 标签用于创建段落,用来组织和结构化文本

  • 标签用于将文本设置为粗体显示

  • 标签用于将文本设置为斜体显示

<p>这是一个段落。p>

<p>这是一段 <b>粗体文本b>p>

<p>这是一段 <i>斜体文本i>p>
  • 换行br 标签用于在HTML中插入换行符
这是一行文本。<br>这是另一行文本。

这是一行文本。<br><br>这是另一行文本。
  • hr标签 用于在HTML中插入水平线 它是一个单标签
<p>这是一段文本。p>
<hr>
<p>这是另一段文本。p>
  • 标题h1-h6

    标签用于定义标题级别,从大标题

    到小标题

  • meta标签:HTML中的Meta标签用于向浏览器提供Web页面的元数据,包括页面的标题、描述、关键字、作者、语言以及其他相关信息。它们被放置在head标签内,不会在主页面上显示

常见的Meta标签及其作用:

1. <meta charset="utf-8">:指定页面的字符编码
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">:指定页面在不同设备上的显示方式,以适应不同屏幕尺寸
3.<meta name="description" content="页面描述">:描述网页的内容,对搜索引擎优化SEO很重要
4.<meta name="keywords" content="关键词">:设置网页的关键字,以便于搜索引擎对网页内容的分析
5.<meta name="author" content="作者名">:设置页面的作者
6.<meta http-equiv="refresh" content="5;url=http://example.com/">:设置网页自动跳转,其中5表示间隔5秒,url表示跳转的地址
  • html注释

  • 图片img:img标签用于在网页中展示图像,图片标签使用标签来定义,它是一个单标签。
<img src="./image.jpg" alt="图片无法正常显示的时候显示的文字" title="图标的标题,鼠标指着的时候显示的标题" />

注意:
1./可以不写 也表示相对路径
2.src的路径可以相对路径,也可以是绝对路径
  • 超链接a

用法1:跳转页面

<a href="跳转到的页面路径" target="打开的方式"> 跳转 a>
target="_self":在当前打开,会覆盖原来的页面
target="_blank":新开一个页面显示

用法2:做锚点

<a id="a1">a>  

<a href="#a1"> 回到定点 a>

用法3:其他跳转用法

<a href="https://www.baidu.com">去百度a>
<a href="./1.txt">查看一个文本文档a>
<a href="../img/1.webp">查看一张图片a>


<a href="./取色器.exe">下载a>

表格标签table

rowspan属性用于定义单元格横跨的行数
colspan属性用于定义单元格横跨的列数

标签用于为表格添加标题。

标签用于将表格内容分组为表头、表体和表尾,提高可读性和可访问性

<table border="边框的宽度(整数0-任意数),颜色和类型是默认">



    
一般我们都这样写:
    <table border="1" width="500">
        <tr> 
            <td>编号td>   
            <td>姓名td>
            <td>性别td>
            <td>年龄td>
        tr>
        <tr>
            <td>001td>
            <td>张三td>
            <td>td>
            <td>18td>
        tr><tr>
            <td>001td>
            <td>张三td>
            <td>td>
            <td>18td>
        tr><tr>
            <td>001td>
            <td>张三td>
            <td>td>
            <td>18td>
        tr>
    table>
    
注意:th 和 td区别:表示列,th有默认的样式,td没有,th一般作为表头的列,td做表数据的列**

合并单元格:

<body>
    
    <table border="1" width="600">
        <tr>
            
            <td colspan="3">1td>
        tr>
        <tr>
            <td>1td>
            
            <td rowspan="3">1td>
            <td>1td>
        tr>
        <tr>
            <td>1td>
            <td>1td>
        tr>
        <tr>
            <td>1td>
            <td>1td>
        tr>
    table>
body>

表单标签 form

概念:页面和后台进行数据交互

提交数据是一个键值对:name属性的值作为建,输入框里面内容作为值

  1. text 普通输入框
  2. password 密码输入框
  3. number 数字输入框
  4. time 日期输入框
  5. email 邮箱输入框
  6. url 域名输入框
  7. file 文件选择框
  8. radio 单选框
  9. checkbox 多选框
  10. select option 下拉框
  11. textarea 文本域
  12. submit 提交按钮
  13. button 普通按钮
  14. reset 重置按钮
<form action="提交后台的地址" method="表单提交的方式:get\post">



    
<form action="#" method="get">    action="要提交表单的地址"
 
        
        普通输入框:<input type="text" name="username" placeholder="请输入用户名" /> <br /> 
        密码输入框:<input type="password" name="pwd" placeholder="请输入密码" /><br />
        数字输入框:<input type="number" name="age" /><br />
        日期输入框:<input type="time" step="1" name="date" /><br />
        
        邮箱输入框:<input type="email" name="email" /><br /> 
        域名输入框:<input type="url" name="url" /><br /> 
        文件选择框:<input type="file" name="file" /><br />        

        
        
        性别单选框:<input type="radio" name="gender" value="" checked="checked" id="man" /><label for="man">label>
                  <input type="radio" name="gender" value="" id="women" /><label for="women">label><br />

        爱好多选框:<input type="checkbox" name="ah" value="吃饭" checked />吃饭
                 <input type="checkbox" name="ah" value="睡觉" id="sj" /><label for="sj">睡觉label>
                 <input type="checkbox" name="ah" value="游戏" />游戏
                 <input type="checkbox" name="ah" value="发呆" checked />发呆<br />
        
        地址选择框:<select name="address">
                        <option>-请选择-option>
                        <option value="武侯区">武侯区option>
                        <option value="青羊区" selected>青羊区option>
                        <option value="高新区">高新区option>
                        <option value="天府新区">天府新区option>
                  select><br />
        
        自我评价:<br />
        <textarea cols="30" rows="10">textarea><br />
        
        <input type="submit" value="注册" /> 
        
        <input type="reset" value="重置" />
    form>

百变标签input

- `text`:文本框:用于输入文本内容
- `password`:密码框:用于输入密码,输入的内容会以密文显示
- `checkbox`:多选框:用于选择多个选项,可以勾选多个复选框
- `radio`:单选框:用于选择单个选项,只能选择一个单选按钮
- `submit`:提交按钮:用于提交表单数据
- `reset`:重置按钮:用于重置表单数据
- `file`:上传框:用于上传文件
- `date`:日期选择框:用于选择日期
- `email`:邮件输入框:用于输入电子邮件地址,对输入的内容按照右键格式校验
- `number`:数字输入框:用于输入数字

<input type="text" placeholder="请输入姓名">
<input type="password" placeholder="请输入密码">
<input type="checkbox" id="option1" name="option" value="option1">
<label for="option1">选项1label>
<input type="checkbox" id="option2" name="option" value="option2">
<label for="option2">选项2label>
<input type="radio" id="radio1" name="radio" value="radio1">
<label for="radio1">单选1label>
<input type="radio" id="radio2" name="radio" value="radio2">
<label for="radio2">单选2label>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="file">
<input type="date">
<input type="email" placeholder="请输入电子邮件">
<input type="number" placeholder="请输入数字">
注意:
1. 单选框和多选框需要value属性值区分选的是哪一个?
2. 按钮需要value属性值显示按钮上的文字内容
3. 除了以上两种,其他都可以不要value属性值,但可以通过value属性值设置默认值
3. placeholder是提示语,跟默认值有区别

下拉标签select 用于创建下拉列表,允许用户从预定义的选项中进行选择

<select>
  <option value="option1">选项1option>
  <option value="option2">选项2option>
  <option value="option3">选项3option>
select>

文本域textarea 用于创建多行文本输入框,允许用户输入多行文本内容

<textarea rows="4" cols="50">这是一个多行文本输入框。textarea>

注意:表单提交数据的要求


你可能感兴趣的:(html)