1. 首页
  2. 文章中心
  3. 学习笔记

HTML标签学习笔记1.软件架构2.HTML

101 阅读 0 评论
我是靠谱客的博主 直率钢铁侠，这篇文章主要介绍HTML标签学习笔记1.软件架构2.HTML，现在分享给大家，希望可以做个参考。

1.软件架构

1.1 C/S ：Clinet/Server 客户端/服务器端

  • 在本地有一个客户端程序，在远程有一个服务端程序
  • 如：QQ、腾讯…
  • 优点：用户体验好
  • 缺点：开发、安装，部署维护麻烦

1.2 B/S：Brower/Server 浏览器/服务器端

  • 只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
  • 优点：开发、安装，部署维护简单
  • 缺点：如果应用过大，用户体验会受到影响。对硬件要求高

资源分类

  • 静态资源：
    • 使用静态网页开发技术发布的资源
    • 所有用户访问，得到的结果是一样的
    • 如：文本，图片，音频，视频，HTML，CSS，JavaScript…
    • 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的引擎，可以展示静态资源。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5Yf0XBm-1644481492595)(C:Users11626AppDataRoamingTyporatypora-user-imagesimage-20220208140957088.png)]

HTML：拥挤搭建基础页面，展示页面的内容

CSS：用于美化界面，布局界面

JavaScript：控制界面元素，让页面有动态的效果

  • 动态资源：
    • 使用动态网页及时发布的资源
    • 所有用户访问，得到的结果可能不一样
    • 如：jsp/servlet，php，asp…
    • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OwxsUC5i-1644481492596)(C:Users11626AppDataRoamingTyporatypora-user-imagesimage-20220208141106596.png)]

2.HTML

概念：

  • Hyper Text Markup Languaage 超文本标记语言
  • 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6KK3Ie9-1644481492597)(C:Users11626AppDataRoamingTyporatypora-user-imagesimage-20220208183116852.png)]

  • 标记语言：由标签构成的语言。<标签名称>

标签分类：

  • 围堵标签：有开始标签和结束标签。如
  • 自闭和标签：开始标签和结束标签在一起。如

语法：

  • 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单或双）引起来
  • html的标签不区分大小写，但建议使用小写。

注释：

复制代码
1
2
<!--  注释内容   -->

2.1 文件标签：

  • html：html文档的根标签

    复制代码
    1
    2
    3
    4
    <html lang="en">
    
</html>

  • head：头标签。用于指定html文档的一些属性。引入外部的资源

    复制代码
    1
    2
    3
    4
    <head>
    
</head>

  • title：标题标签

    复制代码
    1
    2
    <title>Title</title>

  • body：体标签

    复制代码
    1
    2
    3
    4
    <body>

</body>

  • !DOCTYPE html：html5中定义该文档是html文档

    复制代码
    1
    2
    <!DOCTYPE html>

2.2 文本标签：

  • h1-h6：标题标签

    复制代码
    1
    2
    3
    4
    <h1>阿爷杂货店</h1>
<h2>菜单</h2>
<h3>叽霸</h3>

  • p：段落标签

    复制代码
    1
    2
    3
    4
    <p>
    牛还是阿爷牛蛙
</p>

  • br：换行标签

    复制代码
    1
    2
    3
    阿爷杂货店，<br>
挺好。

  • hr：显示一条水平线标签

    复制代码
    1
    2
    <hr/>

2.3 图片标签

  • img：

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--
    相对路径
    1、以【./】代表当前目录 ./image/1.png
    不写默认为./当前目录 image/1.png

    2、【../】代表上一级目录

	alt:当图片显示不出来时，代替显示的文本
-->
<img src="image/1.png">

2.4 列表标签

  • ol：有序列表

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--    
	【不建议在html标签中修改类型，建议使用CSS】
    type 类型，如1、a、A、I、i
    start 开始的位置
-->
<ol type="1" start="5">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打呼噜</li>
</ol>

  • ul：无序列表

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--    
    【不建议在html标签中修改类型，建议使用CSS】
    type 类型，如disc、circle、square
    start 开始的位置
-->
<ul type="disc">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打呼噜</li>
</ul>

  • li：列表项

2.5 链接标签

  • a：超链接

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!--  
	【href】 ：指定访问资源的URL
	【target】 ：指定打开资源的方式
        _blank：新窗口打开。
        _parent：在父窗口中打开链接。
        _self：默认，当前页面跳转。
        _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)
-->
<a href="www.baidu.com" target="_self">点我跳转</a>

2.6 块标签

  • div：没有默认的样式，可以结合css控制样式。
  • span：没有默认的样式，可以结合css控制样式。

2.7 语义化标签

【html5中为了提高可读性，提供了一些没有样式的标签】

  • header
  • footer

2.8 表格标签

【表格是先定义行，然后再行中放入单元格】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zyTxhc1k-1644481492598)(C:Users11626AppDataRoamingTyporatypora-user-imagesimage-20220209143535272.png)]

  • table：定义表格
    • width：宽度
    • border：边框
    • cellpadding：定义内容和单元格的距离
    • cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合成一条
    • bgcolor：背景色
    • align：对齐方式
  • tr：定义行
    • bgcolor：背景色
    • align：对齐方式
  • td：定义单元格
    • colspan：合并列
    • rowspan：合并行
  • th：定义表头单元格（字体默认居中、加粗）
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="1" width="500">
    <tr>
        <th rowspan="2">成绩</th>
        <th>姓名</th>
        <th>学号</th>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E4LEccyg-1644481492598)(C:Users11626AppDataRoamingTyporatypora-user-imagesimage-20220209145206323.png)]

  • thead、tbody、tfoot：提升可读性，默认样式

2.9 表单标签

**概念：**用户采集用户输入的数据，用于和服务器进行交互

from

用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

  • 属性：

    • action：指定提交数据的URL

    • method：指定提交方式，一共7种，常用2种

      • get：请求参数会在地址栏中显示；请求参数长度有限制；不太安全；

      • post：请求参数不会再地址栏中显示，会封装在请求体中；请求参数长度没有限制；较为安全

  • 表单中的数据想要被提交，需要添加name属性

复制代码
1
2
3
4
5
6
7
 <form action="#" method="post">
     Username<input name="username"><br>
     Password<input name="password"><br>

     <input type="submit" value="Login">
</form>

表单项

  • imput：可以通过type属性值，可以改变展示的样式

    • type

      • text：文本输入框（默认）;placeholder，指定输入框信息，当输入框的内容发送变化，会自自动情况提示信息
      • password：密码输入框
      • radio：单选框；同一组单选框需要相同的name属性；一般会给每一个单选框提供value属性值，指定被选中后提交的值；checked属性指定默认值
      • checkbox：复选框；一般会给每一个单选框提供value属性值，指定被选中后提交的值；checked属性指定默认值
      • file：文件选择框
      • hidden：隐藏域，用于提交一些信息，不会显示在网页。用value指定值
      • 按钮
        • summit：提交按钮，value来指定显示的文字
        • button：一个按钮，可以配合JS实现一些效果；value来指定显示的文字
        • image：图片提交按钮，通过src属性指定图片路径
      • color：取色器
      • 时间
        • date：年月日
        • datetime-local：年月日时分
      • email：邮箱，会自动做校验
      • number：输入数字

    • id：指定输入项的id

    • name：表单中的数据想要被提交，需要添加name属性

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
       <form action="#" method="get">
            <!--    text    -->
           <label for="username">用户名</label>
           <input type="text" placeholder="请输入用户名" id="username" name="username"><br>

            <!--    password     -->
           <label for="password">密码</label>
           <input type="password" placeholder="请输入密码" id="password" name="password"><br>

            <!--    radio   -->
           性别
           <input type="radio" name="gender" value="male">男
           <input type="radio" name="gender"  value="female">女
           <br>

            <!--    checkbox    -->
           爱好
           <input type="checkbox" name="hobby" value="eat">吃
           <input type="checkbox" name="hobby" value="sleep">睡
           <input type="checkbox" name="hobby" value="play">玩
           <br>

            <!--    file    -->
           文件
           <input type="file" name="file">
           <br>

            <!--    hidden  -->
           隐藏域：
            <input type="hidden" name="id" value="aaa">
           <br>

            <!--    按钮      -->
           <input type="submit" value="提交按钮">
           <input type="button" value="一个按钮">
           <input type="image" src="image/1.png">
            <br>

            <!--    时间      -->
           生日<input type="date" name="birthday"><br>
           生日<input type="datetime-local" name="birthday"><br>

           <!--    email      -->
           邮箱<input type="email" name="email"><br>

           <!--    number      -->
           年龄<input type="number" name="age"><br>
       </form>

  • lable：指定输入项的文字描述信息

    • for属性会和imput的id属性对应，如果对应了，点击lable区域，会让imput输入框获取焦点

  • select：下拉列表

    • name：指定名字才能提交
    • option：下拉项
      • value：下拉项的值；因为有一些浏览器提交不支持中文，所以设置值来代替中文
      • selected：默认选中的项
复制代码
1
2
3
4
5
6
7
<select name="province">
    <option value="">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected>广州</option>
</select>
  • textarea：文本域
    • name：指定名字才能提交
    • clos：列数；每一行的字符数
    • rows：默认行数；
复制代码 
1
2
3
自我介绍
<textarea name="self" cols="20" rows="3"></textarea>

最后

以上就是直率钢铁侠最近收集整理的关于HTML标签学习笔记1.软件架构2.HTML的全部内容，更多相关HTML标签学习笔记1内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(67)

相关文章

HTML标签(笔记)
HTML标签(笔记)
网站类百度百科如何创建 网站类的百科词条是怎么做的
网站类百度百科如何创建 网站类的百科词条是怎么做的
HTML标签及案例超详细笔记HTML标签及案例超详细笔记1. HTML概述2. HTML基本标签3. 基本标签的综合案例
HTML标签及案例超详细笔记HTML标签及案例超详细笔记1. HTML概述2. HTML基本标签3. 基本标签的综合案例
制作一个仿百度百科的下拉菜单页面
制作一个仿百度百科的下拉菜单页面
HTML标签学习笔记1.软件架构2.HTML
HTML标签学习笔记1.软件架构2.HTML
常见 html 标签 笔记 （一）                                         html标签
常见 html 标签 笔记 （一）                                         html标签
HTML学习笔记（一）了解HTML与HTML的常用标签Html学习笔记(一)了解HTML与HTML的常用标签
HTML学习笔记（一）了解HTML与HTML的常用标签Html学习笔记(一)了解HTML与HTML的常用标签
html标签笔记-列表
html标签笔记-列表

评论列表共有 0 条评论

立即
投稿
返回
顶部