HTML标签学习笔记

最新推荐文章于 2022-09-02 21:41:43 发布

阿爷杂货店

最新推荐文章于 2022-09-02 21:41:43 发布

阅读量449

点赞数

分类专栏：学习笔记文章标签： html 服务器 javascript

本文链接：https://blog.csdn.net/grandpastore/article/details/122863712

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.软件架构

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

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

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

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

资源分类

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5Yf0XBm-1644481492595)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-20220208140957088.png)]$

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

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

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OwxsUC5i-1644481492596)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-20220208141106596.png)]$

2.HTML

概念：

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6KK3Ie9-1644481492597)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-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:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-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:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-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>

阿爷杂货店

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录