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

68 阅读 0 评论 45 点赞

我是靠谱客的博主直率钢铁侠，最近开发中收集的这篇文章主要介绍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的标签不区分大小写，但建议使用小写。

注释：

<!--  注释内容   -->

2.1 文件标签：

html：html文档的根标签
```
<html lang="en">
    
</html>
```
head：头标签。用于指定html文档的一些属性。引入外部的资源
```
<head>
    
</head>
```
title：标题标签
```
<title>Title</title>
```
body：体标签
```
<body>

</body>
```
!DOCTYPE html：html5中定义该文档是html文档
```
<!DOCTYPE html>
```

2.2 文本标签：

h1-h6：标题标签

<h1>阿爷杂货店</h1>
<h2>菜单</h2>
<h3>叽霸</h3>

p：段落标签
```
<p>
    牛还是阿爷牛蛙
</p>
```
br：换行标签
```
阿爷杂货店，<br>
挺好。
```
hr：显示一条水平线标签
```
<hr/>
```

2.3 图片标签

img：

<!--
    相对路径
    1、以【./】代表当前目录 ./image/1.png
    不写默认为./当前目录 image/1.png

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

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

2.4 列表标签

ol：有序列表

<!--    
	【不建议在html标签中修改类型，建议使用CSS】
    type 类型，如1、a、A、I、i
    start 开始的位置
-->
<ol type="1" start="5">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打呼噜</li>
</ol>

ul：无序列表

<!--    
    【不建议在html标签中修改类型，建议使用CSS】
    type 类型，如disc、circle、square
    start 开始的位置
-->
<ul type="disc">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打呼噜</li>
</ul>

li：列表项

2.5 链接标签

a：超链接

<!--  
	【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：定义表头单元格（字体默认居中、加粗）

<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属性

 <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属性

       <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：默认选中的项

<select name="province">
    <option value="">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected>广州</option>
</select>

textarea：文本域
- name：指定名字才能提交
- clos：列数；每一行的字符数
- rows：默认行数；

自我介绍
<textarea name="self" cols="20" rows="3"></textarea>

最后

以上就是直率钢铁侠为你收集整理的HTML标签学习笔记1.软件架构2.HTML的全部内容，希望文章能够帮你解决HTML标签学习笔记1.软件架构2.HTML所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

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

本文分类：学习笔记
浏览次数：68 次浏览
发布日期：2023-10-21 07:25:38
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_22_fx_14__23__22_0.html

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

概述

1.软件架构

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

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

2.HTML

2.1 文件标签：

2.2 文本标签：

2.3 图片标签

2.4 列表标签

2.5 链接标签

2.6 块标签

2.7 语义化标签

2.8 表格标签

2.9 表单标签

最后

评论列表共有 0 条评论

发表评论取消回复

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

概述

1.软件架构

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

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

2.HTML

2.1 文件标签：

2.2 文本标签：

2.3 图片标签

2.4 列表标签

2.5 链接标签

2.6 块标签

2.7 语义化标签

2.8 表格标签

2.9 表单标签

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复