HTML5教程

前端html页面基础,元素,超文本标记语言

本文主要是介绍前端html页面基础,元素,超文本标记语言,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
  • 前端

    • 什么是前端
    • 前端核心
  • 超文本传输协议前戏
  • HTTP超文本传输协议
    • 什么是超文本传输协议
    • HTTP传输协议四大特性
    • 数据格式
    • 响应状态码
  • html简介
  • head内常见的标签
  • body内基本标签
  • body内基本符号
  • body内常见标签
  • 块级元素和行内元素
  • 标签的两大重要属性
  • 列表标签
    • 无序列表
    • 有序列表
    • 标题列表
  • 表格标签
  • 表单标签
    • input中type的重要属性

前端

什么是前端

前端 和用户直接打交道的操作界面(浏览器界面,手机app界面)
后端 不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

前端核心

html (网页的布局)类似于人的骨架
css (网页的样式)类似于人的衣服
js (网页的动态)类似于人的神经让人可以动起来


超文本传输协议前戏

1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件 为了实现无障碍沟通交流 有了一些协议
    HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题 因为别人早就封装好了 
    问题出在我们自己写的服务端的响应数据格式


超文本传输协议

什么是超文本传输协议

  HTTP协议定义了浏览器(即万维网客户进程)怎样向万维网服务器轻请求万维网文档,以及服务器怎样把文档传送给浏览器。简单来说,就是客户端和服务器进行数据传输的一种规则。

HTTP超文本传输协议四大特性

  1.基于请求响应(客户端先主动请求,服务端才会给出响应)

  2.基于tcp/ip之上作用于应用层的协议

  3.无状态(服务端不记住客户端,服务端发送一次请求,客户端执行结束后直接忘记)

  4.无/短链接(服务端不单单会忘记客户端,而且也会断开链接)

数据格式

请求数据格式 1.请求首行(请求方式:有很多种 协议名称及版本)
2.请求头(一大堆K:V键值对)
3.换行
4.请求体(携带一些敏感的数据 不是所有的请求都有请求体)
响应数据格式 1.响应首行(响应状态码)
2.响应头(一大堆K:V键值对)
3.换行
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
请求首行
GET / HTTP/1.1\r\n  
请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "Windows"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
Accept-Encoding: gzip, deflate\r\n
换行
\r\n
请求体
GET请求没有请求体 所以这里是空

 

响应状态码

  利用数字来表示一些复杂的情况说明(类似于暗号)

1xx 服务端已经接收到你的请求正在处理 你可以继续提交或者等待
2xx 200 OK服务端给出了相应响应
3xx 重定向
4xx 403请求不符合条件   404请求资源不存在
5xx 服务端内部错误

  我们在公司中还会自己定义更多的状态码 
        一般情况下从10000开始


HTML简介

超文本标记语言

  是 网页制作必备的标记语言 “超文本”就是指页面内可以包含多种元素图片、链接,甚至音乐、程序等非文字元素。

后缀 一般为.html/.hml
注释语法 <!--注释语言-->
文件结构

<html>

<head>head内的数据一般都不是给用户看的</head>

<body>body内的数据一般是给用户看的</body>

</html>

标签的分类

单标签<img/>

双标签<a></a>

   


head内常见的标签

title 页面的标题
style 支持编写css
link 引入外部css文件
script

支持编写JS代码

JS还可以通过src引入外部JS文件

meta <meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">

 


body内基本标签

h1~h6 标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下换线
i 斜体
s 删除线
b 加粗

 


body内基本符号

&nbsp; 空格
&gt; 大于号
&lt; 小于号
&amp; $
&yen;
&reg; 注册
&copy; 版权

 


body内常见标签

a标签(超链接标签) href      可以填写网址 点击自动跳转
             href还可以填写其他标签的id值 实现锚点功能
target     可以控制是否新建页面跳转
                    _self(原网页打开)
                    _blank(另起一个网页)
img标签(图片标签) src        填写图片地址(网络地址 本地地址)
title       鼠标悬浮在图片上就会有提示信息
alt         图片加载失败提示的信息
height   调整图片的高度
width     调整图片的宽度
            上述两个调整一个另外一个等比例缩放 

 


块级标签和行内标签

  块级标签独占一行

  行内标签可以并排

块级标签 h1~h6 p hr br div img
行内标签 u i s b span

  注意:

  1.块级标签可以通过css嵌套块级标签或者行内标签(p标签不能嵌套任何块级标签)

  2.行内标签只能嵌套行内标签


标签两大重要属性

id属性(一对一管理)

类似于身份证号 在同一个html页面上 id值不能重复(css用的时候用#)

class属性(批量管理) 类似于分组 多个标签可以拥有相同的class值 (css用的时候用.)

 


列表标签

无序列表(ul)    

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)
<ul>
        <li>python</li>
        <li>golang</li>
        <li>linux</li>
    </ul>

有序列表(ol)

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马
<ol type="I" start="10">
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
    </ol>

标题列表(dt,dd)

<dl>
      <dt>标题1</dt>
        <dd>内容1</dd>
      <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

 


表格标签(table,thead,tbody)

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>
</table>

 


表单标签(form,input)

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

input的type属性主要类型

  

text 单行文本
password 密码
date 日期
email 上传email
radio 单选按钮
checkbox 复选框
file 上传文件
select

默认是单选下拉菜单

multiple是多选下拉菜单

textarea 多行文本

submit

reset

button

提交按钮

重置按钮

普通按钮

<form action="" method=""></form>
    action属性
        用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
    method属性
        用于控制请求的方式(get\post)

<form action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">双色球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="">北京</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="普通按钮">
    </form>

 

这篇关于前端html页面基础,元素,超文本标记语言的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!